Skip to content

A
Adyen Magento2
Commit 577bf82c authored by attilak's avatar attilak
Browse files
Options

Use generic component for stored payment methods 

Send state.data in one field instead of mapping it
Use adyenConfiguration
parent 884bc019
Show whitespace changes
Inline Side-by-side
Showing with 54 additions and 192 deletions
view/frontend/web/js/view/payment/method-renderer/adyen-oneclick-method.js
View file @ 577bf82c
...@@ -33,16 +33,15 @@ define( ...@@ -33,16 +33,15 @@ define(
'uiLayout', 'uiLayout',
'Magento_Ui/js/model/messages', 'Magento_Ui/js/model/messages',
'mage/url', 'mage/url',
'Adyen_Payment/js/threeds2-js-utils',
'Magento_Checkout/js/model/full-screen-loader', 'Magento_Checkout/js/model/full-screen-loader',
'Magento_Paypal/js/action/set-payment-method', 'Magento_Paypal/js/action/set-payment-method',
'Magento_Checkout/js/model/url-builder', 'Magento_Checkout/js/model/url-builder',
'mage/storage', 'mage/storage',
'Magento_Checkout/js/action/place-order', 'Magento_Checkout/js/action/place-order',
'Adyen_Payment/js/model/threeds2',
'Magento_Checkout/js/model/error-processor', 'Magento_Checkout/js/model/error-processor',
'Adyen_Payment/js/model/adyen-payment-service', 'Adyen_Payment/js/model/adyen-payment-service',
'Adyen_Payment/js/bundle' 'Adyen_Payment/js/bundle',
'Adyen_Payment/js/model/adyen-configuration'
], ],
function ( function (
ko, ko,
...@@ -57,18 +56,16 @@ define( ...@@ -57,18 +56,16 @@ define(
layout, layout,
Messages, Messages,
url, url,
threeDS2Utils,
fullScreenLoader, fullScreenLoader,
setPaymentMethodAction, setPaymentMethodAction,
urlBuilder, urlBuilder,
storage, storage,
placeOrderAction, placeOrderAction,
threeds2,
errorProcessor, errorProcessor,
adyenPaymentService, adyenPaymentService,
AdyenComponent adyenComponentBundle,
adyenConfiguration
) { ) {
'use strict'; 'use strict';
var messageComponents; var messageComponents;
...@@ -84,14 +81,15 @@ define( ...@@ -84,14 +81,15 @@ define(
template: 'Adyen_Payment/payment/oneclick-form', template: 'Adyen_Payment/payment/oneclick-form',
recurringDetailReference: '', recurringDetailReference: '',
variant: '', variant: '',
numberOfInstallments: '' numberOfInstallments: '',
checkoutComponent: {},
storedPayments: []
}, },
initObservable: function () { initObservable: function () {
this._super() this._super()
.observe([ .observe([
'recurringDetailReference', 'recurringDetailReference',
'creditCardType', 'creditCardType',
'encryptedCreditCardVerificationNumber',
'variant', 'variant',
'numberOfInstallments' 'numberOfInstallments'
]); ]);
...@@ -101,17 +99,20 @@ define( ...@@ -101,17 +99,20 @@ define(
var self = this; var self = this;
this._super(); this._super();
this.checkoutComponent = adyenPaymentService.getCheckoutComponent();
this.storedPayments = this.checkoutComponent.paymentMethodsResponse.storedPaymentMethods;
// create component needs to be in initialize method // create component needs to be in initialize method
var messageComponents = {}; var messageComponents = {};
_.map(window.checkoutConfig.payment.adyenOneclick.billingAgreements, function (value) { _.map(this.storedPayments, function (storedPayment) {
var messageContainer = new Messages(); var messageContainer = new Messages();
var name = 'messages-' + value.reference_id; var name = 'messages-' + storedPayment.id;
var messagesComponent = { var messagesComponent = {
parent: self.name, parent: self.name,
name: 'messages-' + value.reference_id, name: 'messages-' + storedPayment.id,
// name: self.name + '.messages', // name: self.name + '.messages',
displayArea: 'messages-' + value.reference_id, displayArea: 'messages-' + storedPayment.id,
component: 'Magento_Ui/js/view/messages', component: 'Magento_Ui/js/view/messages',
config: { config: {
messageContainer: messageContainer messageContainer: messageContainer
...@@ -129,46 +130,12 @@ define( ...@@ -129,46 +130,12 @@ define(
* *
* @returns {Array} * @returns {Array}
*/ */
getAdyenBillingAgreements: function () { getAdyenStoredPayments: function () {
var self = this; var self = this;
// shareable adyen checkout component
var checkout = new AdyenCheckout({
locale: self.getLocale(),
originKey: self.getOriginKey(),
environment: self.getCheckoutEnvironment(),
});
// convert to list so you can iterate // convert to list so you can iterate
var paymentList = _.map(window.checkoutConfig.payment.adyenOneclick.billingAgreements, function (value) { var paymentList = _.map(this.storedPayments, function (storedPayment) {
var messageContainer = self.messageComponents['messages-' + storedPayment.id];
var creditCardExpMonth, creditCardExpYear = false;
if (value.agreement_data.card) {
creditCardExpMonth = value.agreement_data.card.expiryMonth;
creditCardExpYear = value.agreement_data.card.expiryYear;
}
// pre-define installments if they are set
var i, installments = [];
var grandTotal = quote.totals().grand_total;
var dividedString = "";
var dividedAmount = 0;
if (value.number_of_installments) {
for (i = 0; i < value.number_of_installments.length; i++) {
dividedAmount = (grandTotal / value.number_of_installments[i]).toFixed(quote.getPriceFormat().precision);
dividedString = value.number_of_installments[i] + " x " + dividedAmount + " " + quote.totals().quote_currency_code;
installments.push({
key: [dividedString],
value: value.number_of_installments[i]
});
}
}
var messageContainer = self.messageComponents['messages-' + value.reference_id];
// for recurring enable the placeOrder button at all times // for recurring enable the placeOrder button at all times
var placeOrderAllowed = true; var placeOrderAllowed = true;
...@@ -179,21 +146,20 @@ define( ...@@ -179,21 +146,20 @@ define(
isValid(true); isValid(true);
} }
var agreementLabel = storedPayment.name + ', ' + storedPayment.holderName + ', **** ' + storedPayment.lastFour;
console.log(self.checkoutComponent);
return { return {
'label': value.agreement_label, 'label': agreementLabel,
'value': value.reference_id, 'value': storedPayment.storedPaymentMethodId,
'agreement_data': value.agreement_data, 'brand': storedPayment.brand,
'logo': value.logo, 'logo': {},
'installment': '', 'installment': '',
'number_of_installments': value.number_of_installments,
'method': self.item.method, 'method': self.item.method,
'encryptedCreditCardVerificationNumber': '', 'encryptedCreditCardVerificationNumber': '',
'creditCardExpMonth': ko.observable(creditCardExpMonth),
'creditCardExpYear': ko.observable(creditCardExpYear),
'getInstallments': ko.observableArray(installments),
'placeOrderAllowed': ko.observable(placeOrderAllowed), 'placeOrderAllowed': ko.observable(placeOrderAllowed),
checkoutComponent: self.checkoutComponent,
isButtonActive: function () { isButtonActive: function () {
return self.isActive() && this.getCode() == self.isChecked() && self.isBillingAgreementChecked() && this.placeOrderAllowed(); return self.isActive() && this.getCode() == self.isChecked() && self.isBillingAgreementChecked() && this.placeOrderAllowed();
}, },
...@@ -212,13 +178,6 @@ define( ...@@ -212,13 +178,6 @@ define(
if (event) { if (event) {
event.preventDefault(); event.preventDefault();
} }
// only use installments for cards
if (self.agreement_data.card) {
if (self.hasVerification()) {
var options = {enableValidations: false};
}
numberOfInstallments(self.installment);
}
if (this.validate() && additionalValidators.validate()) { if (this.validate() && additionalValidators.validate()) {
fullScreenLoader.startLoader(); fullScreenLoader.startLoader();
...@@ -244,104 +203,37 @@ define( ...@@ -244,104 +203,37 @@ define(
}, },
/** /**
* Renders the secure CVC field, * Renders the stored payment component,
* creates the card component,
* sets up the callbacks for card components
*/ */
renderSecureCVC: function () { renderStoredPaymentComponent: function () {
var self = this; var self = this;
if (!self.getOriginKey()) { if (!adyenConfiguration.getOriginKey()) {
return; return;
} }
var oneClickCardNode = document.getElementById('cvcContainer-' + self.value);
// this should be fixed in new version of checkout card component
var hideCVC = false; var hideCVC = false;
if (this.hasVerification()) { if (!this.hasVerification()) {
if (self.agreement_data.variant == "maestro") {
// for maestro cvc is optional
self.placeOrderAllowed(true);
}
} else {
hideCVC = true; hideCVC = true;
} }
const oneClickData = { /*Use the storedPaymentMethod object and the custom onChange function as the configuration object together*/
type: self.agreement_data.variant, var configuration = Object.assign(storedPayment, {
hideCVC: hideCVC,
details: self.getOneclickDetails(),
expiryMonth:self.agreement_data.card.expiryMonth,
expiryYear:self.agreement_data.card.expiryYear,
holderName:self.agreement_data.card.holderName,
number:self.agreement_data.card.number,
onChange: function (state, component) {
if (state.isValid) {
self.placeOrderAllowed(true);
isValid(true);
if (typeof state.data !== 'undefined' &&
typeof state.data.paymentMethod !== 'undefined' &&
typeof state.data.paymentMethod.encryptedSecurityCode !== 'undefined'
) {
self.encryptedCreditCardVerificationNumber = state.data.paymentMethod.encryptedSecurityCode;
}
} else {
self.encryptedCreditCardVerificationNumber = '';
if (self.agreement_data.variant != "maestro") {
self.placeOrderAllowed(false);
isValid(false);
}
}
}
};
console.log(oneClickData);
var oneClickCard = checkout
.create('card',{
type: self.agreement_data.variant,
hideCVC: hideCVC, hideCVC: hideCVC,
details: self.getOneclickDetails(), 'onChange': function (state) {
// storedDetails: { if (!!state.isValid) {
// "card": { self.stateData = state.data;
// "expiryMonth": self.agreement_data.card.expiryMonth, self.placeOrderAllowed = true;
// "expiryYear": self.agreement_data.card.expiryYear,
// "holderName": self.agreement_data.card.holderName,
// "number": self.agreement_data.card.number
// }
// }
expiryMonth:self.agreement_data.card.expiryMonth,
expiryYear:self.agreement_data.card.expiryYear,
holderName:self.agreement_data.card.holderName,
number:self.agreement_data.card.number,
onChange: function (state, component) {
if (state.isValid) {
self.placeOrderAllowed(true);
isValid(true);
if (typeof state.data !== 'undefined' &&
typeof state.data.paymentMethod !== 'undefined' &&
typeof state.data.paymentMethod.encryptedSecurityCode !== 'undefined'
) {
self.encryptedCreditCardVerificationNumber = state.data.paymentMethod.encryptedSecurityCode;
}
} else { } else {
self.encryptedCreditCardVerificationNumber = ''; self.placeOrderAllowed = false;
self.stateData = {};
if (self.agreement_data.variant != "maestro") {
self.placeOrderAllowed(false);
isValid(false);
} }
} }
} });
})
.mount(oneClickCardNode);
window.adyencheckout = oneClickCard; var oneClickCard = self.checkoutComponent
.create(storedPayment.type, configuration)
.mount('#storedPaymentContainer-' + self.value);
}, },
/** /**
* Based on the response we can start a 3DS2 validation or place the order * Based on the response we can start a 3DS2 validation or place the order
...@@ -380,7 +272,7 @@ define( ...@@ -380,7 +272,7 @@ define(
onComplete: function (result) { onComplete: function (result) {
var request = result.data; var request = result.data;
request.orderId = orderId; request.orderId = orderId;
threeds2.processThreeDS2(request).done(function (responseJSON) { adyenPaymentService.processThreeDS2(request).done(function (responseJSON) {
self.validateThreeDS2OrPlaceOrder(responseJSON, orderId) self.validateThreeDS2OrPlaceOrder(responseJSON, orderId)
}).fail(function (result) { }).fail(function (result) {
errorProcessor.process(result, self.getMessageContainer()); errorProcessor.process(result, self.getMessageContainer());
...@@ -416,7 +308,7 @@ define( ...@@ -416,7 +308,7 @@ define(
fullScreenLoader.startLoader(); fullScreenLoader.startLoader();
var request = result.data; var request = result.data;
request.orderId = orderId; request.orderId = orderId;
threeds2.processThreeDS2(request).done(function (responseJSON) { adyenPaymentService.processThreeDS2(request).done(function (responseJSON) {
self.validateThreeDS2OrPlaceOrder(responseJSON, orderId) self.validateThreeDS2OrPlaceOrder(responseJSON, orderId)
}).fail(function (result) { }).fail(function (result) {
errorProcessor.process(result, self.getMessageContainer()); errorProcessor.process(result, self.getMessageContainer());
...@@ -432,50 +324,18 @@ define( ...@@ -432,50 +324,18 @@ define(
self.threeDS2Component.mount(threeDS2Node); self.threeDS2Component.mount(threeDS2Node);
}, },
/**
* We use the billingAgreements to save the oneClick stored payments but we don't store the
* details object that we get from the paymentMethods call. This function is a fix for BCMC.
* When we render the stored payments dynamically from the paymentMethods call response it
* should be removed
* @returns {*}
*/
getOneclickDetails: function () {
var self = this;
if (self.agreement_data.variant === 'bcmc') {
return [];
} else {
return [
{
"key": "cardDetails.cvc",
"type": "cvc"
}
];
}
},
/** /**
* Builds the payment details part of the payment information reqeust * Builds the payment details part of the payment information reqeust
* *
* @returns {{method: *, additional_data: {variant: *, recurring_detail_reference: *, number_of_installments: *, cvc: (string|*), expiryMonth: *, expiryYear: *}}} * @returns {{additional_data: {state_data: string}, method: *}}
*/ */
getData: function () { getData: function () {
var self = this; var self = this;
var browserInfo = threeDS2Utils.getBrowserInfo();
return { return {
"method": self.method, "method": self.method,
additional_data: { additional_data: {
variant: variant(), 'state_data': JSON.stringify(this.stateData),
recurring_detail_reference: recurringDetailReference(),
store_cc: true,
number_of_installments: numberOfInstallments(),
cvc: self.encryptedCreditCardVerificationNumber,
java_enabled: browserInfo.javaEnabled,
screen_color_depth: browserInfo.colorDepth,
screen_width: browserInfo.screenWidth,
screen_height: browserInfo.screenHeight,
timezone_offset: browserInfo.timeZoneOffset,
language: browserInfo.language
} }
}; };
}, },
...@@ -503,13 +363,13 @@ define( ...@@ -503,13 +363,13 @@ define(
return self.hasVerification() return self.hasVerification()
}, },
getMessageName: function () { getMessageName: function () {
return 'messages-' + value.reference_id; return 'messages-' + storedPayment.id;
}, },
getMessageContainer: function () { getMessageContainer: function () {
return messageContainer; return messageContainer;
}, },
getOriginKey: function () { getOriginKey: function () {
return self.getOriginKey(); return adyenConfiguration.getOriginKey();
}, },
isPlaceOrderActionAllowed: function () { isPlaceOrderActionAllowed: function () {
return self.isPlaceOrderActionAllowed(); // needed for placeOrder method return self.isPlaceOrderActionAllowed(); // needed for placeOrder method
...@@ -546,7 +406,7 @@ define( ...@@ -546,7 +406,7 @@ define(
// set the brandCode // set the brandCode
recurringDetailReference(self.value); recurringDetailReference(self.value);
variant(self.agreement_data.variant); variant(self.brand);
// set payment method // set payment method
paymentMethod(self.method); paymentMethod(self.method);
...@@ -591,12 +451,14 @@ define( ...@@ -591,12 +451,14 @@ define(
context: function () { context: function () {
return this; return this;
}, },
canCreateBillingAgreement: function () { //TODO create configuration for this on admin
return window.checkoutConfig.payment.adyenCc.canCreateBillingAgreement;
},
isShowLegend: function () { isShowLegend: function () {
return true; return true;
}, },
//TODO create a configuration for information on admin
getLegend: function () {
return '';
},
hasVerification: function () { hasVerification: function () {
return window.checkoutConfig.payment.adyenOneclick.hasCustomerInteraction; return window.checkoutConfig.payment.adyenOneclick.hasCustomerInteraction;
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment