Skip to content

Commit

Permalink
AD-50 Styling + refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@pjaneta
pjaneta committed Nov 20, 2023
1 parent 84e6d87 commit aba3a72
Show file tree
Hide file tree
Showing 3 changed files with 207 additions and 204 deletions.
5 changes: 5 additions & 0 deletions ...taddon/acceleratoraddon/web/webroot/_ui/responsive/common/css/adyenv6b2ccheckoutaddon.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,3 +109,8 @@ div#section_break {
position:relative !important;
max-height: 280px;
}

.adyen-checkout__applepay__button {
width: 100% !important;
border-radius: 0;
}
329 changes: 160 additions & 169 deletions ...koutaddon/acceleratoraddon/web/webroot/_ui/responsive/common/js/adyen_express_checkout.js
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,49 @@
var AdyenExpressCheckoutHybris = (function () {
var AdyenExpressCheckoutHybris = (function() {
'use strict';

var ErrorMessages = {
PaymentCancelled: 'checkout.error.authorization.payment.cancelled',
PaymentError: 'checkout.error.authorization.payment.error',
PaymentNotAvailable: 'checkout.summary.component.notavailable',
TermsNotAccepted: 'checkout.error.terms.not.accepted'
};
PaymentCancelled: 'checkout.error.authorization.payment.cancelled',
PaymentError: 'checkout.error.authorization.payment.error',
PaymentNotAvailable: 'checkout.summary.component.notavailable',
TermsNotAccepted: 'checkout.error.terms.not.accepted'
};

return {

adyenConfig: {
merchantName: null,
merchantId: null,
pageType: null,
productCode: null
},
adyenConfig: {
merchantName: null,
merchantId: null,
pageType: null,
productCode: null
},

initiateCheckout: async function (initConfig) {
const configuration = {
...initConfig,
analytics: {
enabled: false // Set to false to not send analytics data to Adyen.
},
risk: {
enabled: false
},
onError: (error, component) => {
console.error(error.name, error.message, error.stack, component);
},
};
initiateCheckout: async function(initConfig) {
const configuration = {
...initConfig,
analytics: {
enabled: false // Set to false to not send analytics data to Adyen.
},
risk: {
enabled: false
},
onError: (error, component) => {
console.error("Checkout error occured");
},
};

return await AdyenCheckout(configuration);
},
initiateApplePayExpress: async function (params, config) {
return await AdyenCheckout(configuration);
},
initiateApplePayExpress: async function(params, config) {
var checkoutPromise = this.initiateCheckout(config);
const {amount, countryCode, applePayMerchantIdentifier, applePayMerchantName, pageType, productCode} = params;
const {
amount,
countryCode,
applePayMerchantIdentifier,
applePayMerchantName,
pageType,
productCode
} = params;

const applePayNode = document.getElementById('adyen-component-button-container');

this.adyenConfig.merchantName = applePayMerchantName;
Expand All @@ -46,42 +54,29 @@ var AdyenExpressCheckoutHybris = (function () {
const applePayConfiguration = {
//onValidateMerchant is required if you're using your own Apple Pay certificate
onValidateMerchant: (resolve, reject, validationURL) => {
resolve();

// Your server uses the validation URL to request a session from the Apple Pay server.
// Call resolve(MERCHANTSESSION) or reject() to complete merchant validation.
/*validateMerchant(validationURL)
.then(response => {
// Complete merchant validation with resolve(MERCHANTSESSION) after receiving an opaque merchant session object, MerchantSession
resolve(response);
})
.catch(error => {
// Complete merchant validation with reject() if any error occurs
reject();
});*/
resolve();
}
};
checkoutPromise.then((checkout) => {
var applePayComponent = checkout.create("applepay", {
amount: {
currency: amount.currency,
value: amount.value
},
configuration: {
merchantName: applePayMerchantName,
merchantId: applePayMerchantIdentifier
},
// Button config
buttonType: "check-out",
buttonColor: "black",
requiredShippingContactFields: [
"postalAddress",
"name",
"email"
],
// onShippingContactSelected: function(resolve, reject, event){
// //TODO: might be used to recalculate cart with shipping method
// console.log(event.shippingContact);
var applePayComponent = checkout.create("applepay", {
amount: {
currency: amount.currency,
value: amount.value
},
configuration: {
merchantName: applePayMerchantName,
merchantId: applePayMerchantIdentifier
},
// Button config
buttonType: "check-out",
buttonColor: "black",
requiredShippingContactFields: [
"postalAddress",
"name",
"email"
],
//might be used to recalculate cart with shipping method
// onShippingContactSelected: function(resolve, reject, event){
//
// var shippingMethodUpdate = {
// newTotal: {
Expand All @@ -90,126 +85,122 @@ var AdyenExpressCheckoutHybris = (function () {
// }
// resolve(shippingMethodUpdate);
// },
onClick: function(resolve, reject) {
resolve();
},
onSubmit: function(state, component) {
// empty to block session flow, submit logic done in onAuthorized
},
onAuthorized: (resolve, reject, event) => {
var data = this.prepareData(event);
this.makePayment(data, resolve, reject);
}
});
applePayComponent.isAvailable()
.then(function () {
applePayComponent.mount(applePayNode);
})
.catch(function (e) {
// Apple Pay is not available
console.log('Something went wrong trying to mount the Apple Pay component: ' + e);
onClick: function(resolve, reject) {
resolve();
},
onSubmit: function(state, component) {
// empty to block session flow, submit logic done in onAuthorized
},
onAuthorized: (resolve, reject, event) => {
var data = this.prepareData(event);
this.makePayment(data, resolve, reject);
}
});
applePayComponent.isAvailable()
.then(function() {
applePayComponent.mount(applePayNode);
})
.catch(function(e) {
// Apple Pay is not available
console.log('Something went wrong trying to mount the Apple Pay component');
});
})
},
makePayment: function (data, resolve, reject) {
$.ajax({
url: this.getUrl(),
type: "POST",
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
success: function (response) {
try {
// var response = JSON.parse(data);
console.log(response);

if (response.resultCode && (response.resultCode === 'Authorised' || response.resultCode === 'RedirectShopper')) {
resolve();
AdyenExpressCheckoutHybris.handleResult(response, false);
} else {
makePayment: function(data, resolve, reject) {
$.ajax({
url: this.getUrl(),
type: "POST",
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
success: function(response) {
try {
if (response.resultCode && (response.resultCode === 'Authorised' || response.resultCode === 'RedirectShopper')) {
resolve();
AdyenExpressCheckoutHybris.handleResult(response, false);
} else {
reject();
AdyenExpressCheckoutHybris.handleResult(ErrorMessages.PaymentError, true);
}
} catch (e) {
reject();
AdyenExpressCheckoutHybris.handleResult(ErrorMessages.PaymentError, true);
}
} catch (e) {
console.log('Error parsing makePayment response: ' + data);
},
error: function(xmlHttpResponse, exception) {
reject();
AdyenExpressCheckoutHybris.handleResult(ErrorMessages.PaymentError, true);
}
},
error: function (xmlHttpResponse, exception) {
reject();
var responseMessage = xmlHttpResponse.responseJSON;
if (xmlHttpResponse.status === 400) {
AdyenExpressCheckoutHybris.handleResult(responseMessage, true);
} else {
console.log('Error on makePayment: ' + responseMessage);
AdyenExpressCheckoutHybris.handleResult(ErrorMessages.PaymentError, true);
var responseMessage = xmlHttpResponse.responseJSON;
if (xmlHttpResponse.status === 400) {
AdyenExpressCheckoutHybris.handleResult(responseMessage, true);
} else {
console.log('Error on makePayment');
AdyenExpressCheckoutHybris.handleResult(ErrorMessages.PaymentError, true);
}
}
})
},
handleResult: function(data, error) {
if (error) {
document.querySelector("#resultData").value = data;
document.querySelector("#isResultError").value = error;
} else {
document.querySelector("#resultData").value = JSON.stringify(data);
}
})
},
handleResult: function (data, error) {
if (error) {
document.querySelector("#resultData").value = data;
document.querySelector("#isResultError").value = error;
} else {
document.querySelector("#resultData").value = JSON.stringify(data);
}
document.querySelector("#handleComponentResultForm").submit();
},
prepareData: function(event) {
if (this.adyenConfig.pageType === 'PDP'){
return {
productCode: this.adyenConfig.productCode,
adyenApplePayMerchantName: this.adyenConfig.merchantName,
adyenApplePayMerchantIdentifier: this.adyenConfig.merchantId,
applePayToken: btoa(JSON.stringify(event.payment.token.paymentData)),
addressData: {
email: event.payment.shippingContact.emailAddress,
firstName: event.payment.shippingContact.givenName,
lastName: event.payment.shippingContact.familyName,
line1: event.payment.shippingContact.addressLines[0],
line2: event.payment.shippingContact.addressLines[1],
postalCode: event.payment.shippingContact.postalCode,
town: event.payment.shippingContact.locality,
country: {
isocode: event.payment.shippingContact.countryCode,
name: event.payment.shippingContact.country
}
document.querySelector("#handleComponentResultForm").submit();
},
prepareData: function(event) {
if (this.adyenConfig.pageType === 'PDP') {
return {
productCode: this.adyenConfig.productCode,
adyenApplePayMerchantName: this.adyenConfig.merchantName,
adyenApplePayMerchantIdentifier: this.adyenConfig.merchantId,
applePayToken: btoa(JSON.stringify(event.payment.token.paymentData)),
addressData: {
email: event.payment.shippingContact.emailAddress,
firstName: event.payment.shippingContact.givenName,
lastName: event.payment.shippingContact.familyName,
line1: event.payment.shippingContact.addressLines[0],
line2: event.payment.shippingContact.addressLines[1],
postalCode: event.payment.shippingContact.postalCode,
town: event.payment.shippingContact.locality,
country: {
isocode: event.payment.shippingContact.countryCode,
name: event.payment.shippingContact.country
}
}
}
}
}
if (this.adyenConfig.pageType === 'cart'){
return {
adyenApplePayMerchantName: this.adyenConfig.merchantName,
adyenApplePayMerchantIdentifier: this.adyenConfig.merchantId,
applePayToken: btoa(JSON.stringify(event.payment.token.paymentData)),
addressData: {
email: event.payment.shippingContact.emailAddress,
firstName: event.payment.shippingContact.givenName,
lastName: event.payment.shippingContact.familyName,
line1: event.payment.shippingContact.addressLines[0],
line2: event.payment.shippingContact.addressLines[1],
postalCode: event.payment.shippingContact.postalCode,
town: event.payment.shippingContact.locality,
country: {
isocode: event.payment.shippingContact.countryCode,
name: event.payment.shippingContact.country
}
if (this.adyenConfig.pageType === 'cart') {
return {
adyenApplePayMerchantName: this.adyenConfig.merchantName,
adyenApplePayMerchantIdentifier: this.adyenConfig.merchantId,
applePayToken: btoa(JSON.stringify(event.payment.token.paymentData)),
addressData: {
email: event.payment.shippingContact.emailAddress,
firstName: event.payment.shippingContact.givenName,
lastName: event.payment.shippingContact.familyName,
line1: event.payment.shippingContact.addressLines[0],
line2: event.payment.shippingContact.addressLines[1],
postalCode: event.payment.shippingContact.postalCode,
town: event.payment.shippingContact.locality,
country: {
isocode: event.payment.shippingContact.countryCode,
name: event.payment.shippingContact.country
}
}
}
}
console.error('unknown page type')
return {};
},
getUrl: function() {
if (this.adyenConfig.pageType === 'PDP') {
return ACC.config.encodedContextPath + '/expressCheckout/applePayPDP'
}
if (this.adyenConfig.pageType === 'cart') {
return ACC.config.encodedContextPath + '/expressCheckout/cart'
}
console.error('unknown page type')
return null;
}
console.error('unknown page type')
return {};
},
getUrl: function(){
if (this.adyenConfig.pageType === 'PDP'){
return ACC.config.encodedContextPath + '/expressCheckout/applePayPDP'
}
if (this.adyenConfig.pageType === 'cart'){
return ACC.config.encodedContextPath + '/expressCheckout/cart'
}
console.error('unknown page type')
return null;
}
}
})();
Loading

0 comments on commit aba3a72

Please sign in to comment.