Skip to content

A
Adyen Magento2
Commit 884bc019 authored by attilak's avatar attilak
Browse files
Options

Use generic component for card payments 

Send the state.data as a string in 1 field instead of mapping it
Use component createFromAction
Use adyenConfiguration
parent 7aba083e
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 174 deletions
view/frontend/web/js/view/payment/method-renderer/adyen-cc-method.js
View file @ 884bc019
...@@ -28,7 +28,6 @@ define( ...@@ -28,7 +28,6 @@ define(
'Magento_Payment/js/model/credit-card-validation/credit-card-data', 'Magento_Payment/js/model/credit-card-validation/credit-card-data',
'Magento_Checkout/js/model/payment/additional-validators', 'Magento_Checkout/js/model/payment/additional-validators',
'Magento_Checkout/js/model/quote', 'Magento_Checkout/js/model/quote',
'Adyen_Payment/js/model/installments',
'mage/url', 'mage/url',
'Magento_Vault/js/view/payment/vault-enabler', 'Magento_Vault/js/view/payment/vault-enabler',
'Magento_Checkout/js/model/url-builder', 'Magento_Checkout/js/model/url-builder',
...@@ -36,11 +35,9 @@ define( ...@@ -36,11 +35,9 @@ define(
'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/action/select-payment-method', 'Magento_Checkout/js/action/select-payment-method',
'Adyen_Payment/js/threeds2-js-utils',
'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/model/adyen-configuration'
], ],
function ( function (
$, $,
...@@ -50,7 +47,6 @@ define( ...@@ -50,7 +47,6 @@ define(
creditCardData, creditCardData,
additionalValidators, additionalValidators,
quote, quote,
installmentsHelper,
url, url,
VaultEnabler, VaultEnabler,
urlBuilder, urlBuilder,
...@@ -58,11 +54,9 @@ define( ...@@ -58,11 +54,9 @@ define(
fullScreenLoader, fullScreenLoader,
setPaymentMethodAction, setPaymentMethodAction,
selectPaymentMethodAction, selectPaymentMethodAction,
threeDS2Utils,
threeds2,
errorProcessor, errorProcessor,
adyenPaymentService, adyenPaymentService,
AdyenComponent adyenConfiguration
) { ) {
'use strict'; 'use strict';
...@@ -74,10 +68,10 @@ define( ...@@ -74,10 +68,10 @@ define(
defaults: { defaults: {
template: 'Adyen_Payment/payment/cc-form', template: 'Adyen_Payment/payment/cc-form',
creditCardOwner: '',
storeCc: false,
installment: '', installment: '',
creditCardDetailsValid: false stateData: {},
checkoutComponent: {},
cardComponent: {}
}, },
/** /**
* @returns {exports.initialize} * @returns {exports.initialize}
...@@ -87,28 +81,14 @@ define( ...@@ -87,28 +81,14 @@ define(
this.vaultEnabler = new VaultEnabler(); this.vaultEnabler = new VaultEnabler();
this.vaultEnabler.setPaymentCode(this.getVaultCode()); this.vaultEnabler.setPaymentCode(this.getVaultCode());
this.vaultEnabler.isActivePaymentTokenEnabler(false); this.vaultEnabler.isActivePaymentTokenEnabler(false);
this.checkoutComponent = adyenPaymentService.getCheckoutComponent();
// initialize adyen component for general use
this.checkout = new AdyenCheckout({
locale: this.getLocale(),
originKey: this.getOriginKey(),
environment: this.getCheckoutEnvironment()
});
return this; return this;
}, },
initObservable: function () { initObservable: function () {
this._super() this._super()
.observe([ .observe([
'creditCardType',
'creditCardOwner',
'creditCardNumber',
'securityCode',
'expiryMonth',
'expiryYear',
'installment', 'installment',
'installments',
'creditCardDetailsValid',
'placeOrderAllowed' 'placeOrderAllowed'
]); ]);
...@@ -116,93 +96,58 @@ define( ...@@ -116,93 +96,58 @@ define(
}, },
/** /**
* Returns true if card details can be stored * Returns true if card details can be stored
* The user is logged in and
* Billing agreement or vault is ebabled
*
* @returns {*|boolean} * @returns {*|boolean}
*/ */
getEnableStoreDetails: function () { getEnableStoreDetails: function () {
return this.canCreateBillingAgreement() && !this.isVaultEnabled(); if (customer.isLoggedIn()) {
// TODO create new configuration to enable stored details without vault and billing agreement
// since we noew use the payment Methods response to fetch the stored payment methods
return this.canCreateBillingAgreement() || this.isVaultEnabled();
}
return false;
}, },
/** /**
* Renders the secure fields, * Renders checkout card component
* creates the card component,
* sets up the callbacks for card components and
* set up the installments
*/ */
renderSecureFields: function () { renderCardComponent: function () {
var self = this; if (!adyenConfiguration.getOriginKey()) {
if (!self.getOriginKey()) {
return; return;
} }
self.installments(0); var self = this;
// installments configuration
// installments var installmentsConfiguration = this.getAllInstallments();
var allInstallments = self.getAllInstallments(); // TODO get config from admin configuration
var cardNode = document.getElementById('cardContainer'); installmentsConfiguration = '[[0,2,3],[2,3,3]]'; // DUmmy data for testing
var placeOrderAllowed = self.placeOrderAllowed.bind(this);
function handleOnChange(state, component) {
if (!!state.isValid) {
console.log(state.data);
this.stateData = state.data;
placeOrderAllowed(true);
} else {
placeOrderAllowed(false);
}
};
self.cardComponent = self.checkout.create('card', { // Extra configuration object for card payments
type: 'card', const configuration = {
hasHolderName: true, hasHolderName: true,
holderNameRequired: true, holderNameRequired: true,
enableStoreDetails: self.getEnableStoreDetails(), enableStoreDetails: self.getEnableStoreDetails(),
groupTypes: self.getAvailableCardTypeAltCodes(), groupTypes: self.getAvailableCardTypeAltCodes(),
installments: installmentsConfiguration,
onChange: handleOnChange
};
onChange: function (state, component) { // create and mount
if (!!state.isValid && !component.state.errors.encryptedSecurityCode) { this.cardComponent = this.checkoutComponent.create('card', configuration).mount('#cardContainer');
self.storeCc = !!state.data.storePaymentMethod;
self.creditCardNumber(state.data.paymentMethod.encryptedCardNumber);
self.expiryMonth(state.data.paymentMethod.encryptedExpiryMonth);
self.expiryYear(state.data.paymentMethod.encryptedExpiryYear);
self.securityCode(state.data.paymentMethod.encryptedSecurityCode);
self.creditCardOwner(state.data.paymentMethod.holderName);
self.creditCardDetailsValid(true);
self.placeOrderAllowed(true);
} else {
self.creditCardDetailsValid(false);
self.placeOrderAllowed(false);
}
},
onBrand: function (state) {
// Define the card type
// translate adyen card type to magento card type
var creditCardType = self.getCcCodeByAltCode(state.brand);
if (creditCardType) {
// If the credit card type is already set, check if it changed or not
if (!self.creditCardType() || self.creditCardType() && self.creditCardType() != creditCardType) {
var numberOfInstallments = [];
if (creditCardType in allInstallments) {
// get for the creditcard the installments
var installmentCreditcard = allInstallments[creditCardType];
var grandTotal = quote.totals().grand_total;
var precision = quote.getPriceFormat().precision;
var currencyCode = quote.totals().quote_currency_code;
numberOfInstallments = installmentsHelper.getInstallmentsWithPrices(installmentCreditcard, grandTotal, precision, currencyCode);
}
if (numberOfInstallments) {
self.installments(numberOfInstallments);
}
else {
self.installments(0);
}
}
// for BCMC as this is not a core payment method inside magento use maestro as brand detection
if (creditCardType == "BCMC") {
self.creditCardType("MI");
} else {
self.creditCardType(creditCardType);
}
} else {
self.creditCardType("")
self.installments(0);
}
}
}).mount(cardNode);
}, },
/** /**
* Rendering the 3DS2.0 components * Rendering the 3DS2.0 components
...@@ -215,35 +160,29 @@ define( ...@@ -215,35 +160,29 @@ define(
* @param type * @param type
* @param token * @param token
*/ */
renderThreeDS2Component: function (type, token, orderId) { renderThreeDS2Component: function (action, orderId) {
var self = this; var self = this;
var threeDS2Node = document.getElementById('threeDS2Container');
if (type == "IdentifyShopper") {
self.threeDS2IdentifyComponent = self.checkout
.create('threeDS2DeviceFingerprint', {
fingerprintToken: token,
onComplete: function (result) {
self.threeDS2IdentifyComponent.unmount();
var request = result.data;
request.orderId = orderId;
threeds2.processThreeDS2(request).done(function (responseJSON) {
self.validateThreeDS2OrPlaceOrder(responseJSON, orderId)
}).fail(function (result) {
errorProcessor.process(result, self.messageContainer);
self.isPlaceOrderActionAllowed(true);
fullScreenLoader.stopLoader();
});
},
onError: function (error) {
console.log(JSON.stringify(error));
}
});
self.threeDS2IdentifyComponent.mount(threeDS2Node);
// Handle identify shopper action
if (action.type == 'IdentifyShopper') {
var configuration = {
onComplete: function (result) {
self.threeDS2IdentifyComponent.unmount();
var request = result.data;
request.orderId = orderId;
adyenPaymentService.processThreeDS2(request).done(function (responseJSON) {
self.validateThreeDS2OrPlaceOrder(responseJSON, orderId)
}).fail(function (result) {
errorProcessor.process(result, self.messageContainer);
self.isPlaceOrderActionAllowed(true);
fullScreenLoader.stopLoader();
});
}
};
}
} else if (type == "ChallengeShopper") { // Handle challenge shopper action
if (action.type == "ChallengeShopper") {
fullScreenLoader.stopLoader(); fullScreenLoader.stopLoader();
var popupModal = $('#threeDS2Modal').modal({ var popupModal = $('#threeDS2Modal').modal({
...@@ -258,30 +197,27 @@ define( ...@@ -258,30 +197,27 @@ define(
popupModal.modal("openModal"); popupModal.modal("openModal");
self.threeDS2ChallengeComponent = self.checkout var configuration = {
.create('threeDS2Challenge', { size: '05',
challengeToken: token, onComplete: function (result) {
size: '05', self.threeDS2ChallengeComponent.unmount();
onComplete: function (result) { self.closeModal(popupModal);
self.threeDS2ChallengeComponent.unmount(); fullScreenLoader.startLoader();
self.closeModal(popupModal); var request = result.data;
fullScreenLoader.startLoader(); request.orderId = orderId;
var request = result.data; adyenPaymentService.processThreeDS2(request).done(function (responseJSON) {
request.orderId = orderId; self.validateThreeDS2OrPlaceOrder(responseJSON, orderId);
threeds2.processThreeDS2(request).done(function (responseJSON) { }).fail(function (result) {
self.validateThreeDS2OrPlaceOrder(responseJSON, orderId); errorProcessor.process(result, self.messageContainer);
}).fail(function (result) { self.isPlaceOrderActionAllowed(true);
errorProcessor.process(result, self.messageContainer); fullScreenLoader.stopLoader();
self.isPlaceOrderActionAllowed(true); });
fullScreenLoader.stopLoader(); }
}); };
},
onError: function (error) {
console.log(JSON.stringify(error));
}
});
self.threeDS2ChallengeComponent.mount(threeDS2Node);
} }
self.checkoutComponent.createFromAction(action, configuration).mount('#threeDS2Container');
}, },
/** /**
* This method is a workaround to close the modal in the right way and reconstruct the threeDS2Modal. * This method is a workaround to close the modal in the right way and reconstruct the threeDS2Modal.
...@@ -303,26 +239,10 @@ define( ...@@ -303,26 +239,10 @@ define(
* @returns {{method: *}} * @returns {{method: *}}
*/ */
getData: function () { getData: function () {
const browserInfo = threeDS2Utils.getBrowserInfo();
var data = { var data = {
'method': this.item.method, 'method': this.item.method,
additional_data: { additional_data: {
'guestEmail': quote.guestEmail, 'state_data': JSON.stringify(this.stateData),
'cc_type': this.creditCardType(),
'number': this.creditCardNumber(),
'cvc': this.securityCode(),
'expiryMonth': this.expiryMonth(),
'expiryYear': this.expiryYear(),
'holderName': this.creditCardOwner(),
'store_cc': this.storeCc,
'number_of_installments': this.installment(),
'java_enabled': browserInfo.javaEnabled,
'screen_color_depth': browserInfo.colorDepth,
'screen_width': browserInfo.screenWidth,
'screen_height': browserInfo.screenHeight,
'timezone_offset': browserInfo.timeZoneOffset,
'language': browserInfo.language,
'combo_card_type': this.comboCardOption() 'combo_card_type': this.comboCardOption()
} }
}; };
...@@ -422,15 +342,6 @@ define( ...@@ -422,15 +342,6 @@ define(
return true; return true;
}, },
/**
* The card component send the card details validity in a callback which is saved in the
* creditCardDetailsValid observable
*
* @returns {*}
*/
isCreditCardDetailsValid: function () {
return this.creditCardDetailsValid();
},
/** /**
* Translates the card type alt code (used in Adyen) to card type code (used in Magento) if it's available * Translates the card type alt code (used in Adyen) to card type code (used in Magento) if it's available
* *
...@@ -482,23 +393,44 @@ define( ...@@ -482,23 +393,44 @@ define(
return false; return false;
}, },
//TODO create configuration for this on admin
isShowLegend: function () { isShowLegend: function () {
return true; return true;
}, },
//TODO create a configuration for information on admin
getLegend: function () {
return '';
},
showLogo: function () { showLogo: function () {
return window.checkoutConfig.payment.adyen.showLogo; return adyenConfiguration.showLogo;
}, },
/**
*
* @param type
* @returns {*}
*/
getIcons: function (type) { getIcons: function (type) {
return window.checkoutConfig.payment.adyenCc.icons.hasOwnProperty(type) return window.checkoutConfig.payment.adyenCc.icons.hasOwnProperty(type)
? window.checkoutConfig.payment.adyenCc.icons[type] ? window.checkoutConfig.payment.adyenCc.icons[type]
: false : false
}, },
/**
*
* @returns {any}
*/
hasInstallments: function () { hasInstallments: function () {
return this.comboCardOption() === 'credit' && window.checkoutConfig.payment.adyenCc.hasInstallments; return this.comboCardOption() === 'credit' && window.checkoutConfig.payment.adyenCc.hasInstallments;
}, },
/**
*
* @returns {*}
*/
getAllInstallments: function () { getAllInstallments: function () {
return window.checkoutConfig.payment.adyenCc.installments; return window.checkoutConfig.payment.adyenCc.installments;
}, },
/**
* @returns {*|boolean}
*/
areComboCardsEnabled: function () { areComboCardsEnabled: function () {
if (quote.billingAddress() === null) { if (quote.billingAddress() === null) {
return false; return false;
...@@ -518,6 +450,9 @@ define( ...@@ -518,6 +450,9 @@ define(
setValidateHandler: function (handler) { setValidateHandler: function (handler) {
this.validateHandler = handler; this.validateHandler = handler;
}, },
/**
* @returns {exports}
*/
context: function () { context: function () {
return this; return this;
}, },
......
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