Skip to content

A
Adyen Magento2
Commit 925eec72 authored by attilak's avatar attilak
Browse files
Options

Move all alternative payment methods to generic component (frontend) 

Remove unnecessary custom function from the frontend
Remove state data observers
Use the component's paymentMethods object to list all the methods
parent 4c8f2bb9
Show whitespace changes
Inline Side-by-side
Showing with 139 additions and 394 deletions
view/frontend/web/js/view/payment/method-renderer/adyen-hpp-method.js
View file @ 925eec72
......@@ -36,9 +36,26 @@ define(
'Magento_Checkout/js/action/place-order',
'uiLayout',
'Magento_Ui/js/model/messages',
'Adyen_Payment/js/bundle'
'Adyen_Payment/js/bundle',
'Adyen_Payment/js/model/adyen-configuration'
],
function (ko, $, Component, selectPaymentMethodAction, quote, checkoutData, additionalValidators, storage, adyenPaymentService, urlBuilder, customer, fullScreenLoader, placeOrderAction, layout, Messages, AdyenComponent) {
function (ko,
$,
Component,
selectPaymentMethodAction,
quote,
checkoutData,
additionalValidators,
storage,
adyenPaymentService,
urlBuilder,
customer,
fullScreenLoader,
placeOrderAction,
layout,
Messages,
AdyenComponent,
adyenConfiguration) {
'use strict';
var brandCode = ko.observable(null);
var paymentMethod = ko.observable(null);
......@@ -55,21 +72,13 @@ define(
self: this,
defaults: {
template: 'Adyen_Payment/payment/hpp-form',
brandCode: ''
brandCode: '',
stateData: {}
},
initObservable: function () {
this._super()
.observe([
'brandCode',
'issuer',
'gender',
'dob',
'telephone',
'ownerName',
'ibanNumber',
'ssn',
'bankAccountNumber',
'bankLocationId'
'brandCode'
]);
return this;
}, initialize: function () {
......@@ -83,9 +92,10 @@ define(
* Create sherable checkout component
* @type {AdyenCheckout}
*/
self.checkoutComponent = new AdyenCheckout({ locale: self.getLocale()});
self.checkoutComponent = adyenPaymentService.getCheckoutComponent();
var paymentMethods = self.checkoutComponent.paymentMethodsResponse.paymentMethods;
var paymentMethods = adyenPaymentService.getAvailablePaymentMethods();
// create component needs to be in initialize method
var messageComponents = {};
......@@ -123,13 +133,22 @@ define(
fullScreenLoader.stopLoader();
}
var paymentMethods = adyenPaymentService.getAvailablePaymentMethods();
console.log(paymentMethods);
console.log(paymentMethods.paymentMethods);
// filter unnecessary field details from checkout component
// TODO refactor
self.checkoutComponent.paymentMethodsResponse.paymentMethods.forEach(function (paymentMethod, index) {
if (!!self.checkoutComponent.paymentMethodsResponse.paymentMethods[index].details) {
if (!!self.checkoutComponent.paymentMethodsResponse.paymentMethods[index].details.personalDetails) {
self.checkoutComponent.paymentMethodsResponse.paymentMethods[index].details =
self.filterOutOpenInvoiceComponentDetails(paymentMethod.details);
}
}
});
var paymentList = _.reduce(paymentMethods, function (accumulator, value) {
console.log(value);
// Get paymentMethod list with filtered details
var paymentMethods = self.checkoutComponent.paymentMethodsResponse.paymentMethods;
// Iterate through the payment methods and render them
var paymentList = _.reduce(paymentMethods, function (accumulator, value) {
if (!self.isPaymentMethodSupported(value.type)) {
return accumulator;
}
......@@ -144,8 +163,8 @@ define(
return self.getBrandCodeFromPaymentMethod(value);
};
result.value = result.getBrandCode();
result.name = value;
result.brandCode = result.getBrandCode();
result.name = value.name;
result.method = self.item.method;
/**
* Observable to enable and disable place order buttons for payment methods
......@@ -176,309 +195,33 @@ define(
result.afterPlaceOrder = function () {
return self.afterPlaceOrder();
};
/**
* Checks if payment method is open invoice
* @returns {*|isPaymentMethodOpenInvoiceMethod}
*/
result.isPaymentMethodOpenInvoiceMethod = function () {
return value.isPaymentMethodOpenInvoiceMethod;
};
/**
* Checks if payment method is open invoice but not in the list below
* [klarna, afterpay]
* @returns {boolean}
*/
result.isPaymentMethodOtherOpenInvoiceMethod = function () {
if (
!result.isPaymentMethodAfterPay() &&
!result.isPaymentMethodKlarna() &&
!result.isPaymentMethodAfterPayTouch() &&
value.isPaymentMethodOpenInvoiceMethod
) {
return true;
}
return false;
};
/**
* Checks if payment method is klarna
* @returns {boolean}
*/
result.isPaymentMethodKlarna = function () {
if (result.getBrandCode() === "klarna") {
return true;
}
return false;
};
/**
* Checks if payment method is after pay
* @returns {boolean}
*/
result.isPaymentMethodAfterPay = function () {
if (result.getBrandCode() === "afterpay_default") {
return true;
}
return false;
};
/**
* Checks if payment method is after pay touch
* @returns {boolean}
*/
result.isPaymentMethodAfterPayTouch = function () {
if (result.getBrandCode() === "afterpaytouch") {
return true;
}
return false;
};
/**
* Get personal number (SSN) length based on the buyer's country
* @returns {number}
*/
result.getSsnLength = function () {
if (quote.billingAddress().countryId == "NO") {
//14 digits for Norway ÅÅÅÅMMDD-XXXXX
return 14;
}
else {
//13 digits for other Nordic countries ÅÅÅÅMMDD-XXXX
return 13;
}
};
/**
* Get max length for the Bank account number
*/
result.getBankAccountNumberMaxLength = function () {
return 17;
};
/**
* Finds the issuer property in the payment method's response and if available returns it's index
* @returns
*/
result.findIssuersProperty = function () {
var issuerKey = false;
if (typeof value.details !== 'undefined') {
$.each(value.details, function (key, detail) {
if (typeof detail.items !== 'undefined' && detail.key == 'issuer') {
issuerKey = key;
}
});
}
return issuerKey;
}
/**
* Checks if the payment method has issuers property available
* @returns {boolean}
*/
result.hasIssuersProperty = function () {
if (result.findIssuersProperty() !== false) {
return true;
}
return false;
};
/**
* Checks if the payment method has issuer(s) available
* @returns {boolean}
*/
result.hasIssuersAvailable = function () {
if (result.hasIssuersProperty() && value.details[result.findIssuersProperty()].items.length > 0) {
return true;
}
return false;
};
/**
* Returns the issuers for a payment method
* @returns {*}
*/
result.getIssuers = function () {
if (result.hasIssuersAvailable()) {
return value.details[result.findIssuersProperty()].items;
}
return [];
};
/**
* Checks if payment method is iDeal
* @returns {boolean}
*/
result.isIdeal = function () {
if (result.getBrandCode().indexOf("ideal") >= 0) {
return true;
}
return false;
};
/**
* Checks if payment method is ACH
* @returns {boolean}
*/
result.isAch = function () {
if (result.getBrandCode().indexOf("ach") == 0) {
return true;
}
return false;
};
/**
* Checks if payment method is sepa direct debit
*/
result.isSepaDirectDebit = function () {
if (result.getBrandCode().indexOf("sepadirectdebit") >= 0) {
return true;
}
return false;
};
/**
* Renders the secure fields,
* creates the ideal component,
* sets up the callbacks for ideal components and
*/
result.renderIdealComponent = function () {
result.renderCheckoutComponent = function () {
result.isPlaceOrderAllowed(false);
var idealNode = document.getElementById('iDealContainer');
var ideal = self.checkoutComponent.create('ideal', {
items: result.getIssuers(),
try {
self.checkoutComponent.create(result.getBrandCode(), {
onChange: function (state) {
if (!!state.isValid) {
result.issuer(state.data.paymentMethod.issuer);
result.stateData = state.data;
result.isPlaceOrderAllowed(true);
} else {
result.stateData = {};
result.isPlaceOrderAllowed(false);
}
}
});
ideal.mount(idealNode);
};
/**
* Creates the sepa direct debit component,
* sets up the callbacks for sepa components
*/
result.renderSepaDirectDebitComponent = function () {
result.isPlaceOrderAllowed(false);
var sepaDirectDebitNode = document.getElementById('sepaDirectDebitContainer');
var sepaDirectDebit = self.checkoutComponent.create('sepadirectdebit', {
countryCode: self.getLocale(),
onChange: function (state) {
if (!!state.isValid) {
result.ownerName(state.data.paymentMethod["sepa.ownerName"]);
result.ibanNumber(state.data.paymentMethod["sepa.ibanNumber"]);
result.isPlaceOrderAllowed(true);
} else {
result.isPlaceOrderAllowed(false);
}
}).mount('#adyen-alternative-payment-container-' + result.getBrandCode());
} catch (err) {
// The component does not exist yet
}
});
sepaDirectDebit.mount(sepaDirectDebitNode);
};
/**
* Creates the klarna component,
* sets up the callbacks for klarna components
*/
result.renderKlarnaComponent = function () {
/* The new Klarna integration doesn't return details and the component does not handle it */
if (!value.details) {
return;
}
var klarnaNode = document.getElementById('klarnaContainer');
var klarna = self.checkoutComponent.create('klarna', {
countryCode: self.getLocale(),
details: self.filterOutOpenInvoiceComponentDetails(value.details),
visibility: {
personalDetails: "editable"
},
onChange: function (state) {
if (!!state.isValid) {
result.dob(state.data.paymentMethod.personalDetails.dateOfBirth);
result.telephone(state.data.paymentMethod.personalDetails.telephoneNumber);
result.gender(state.data.paymentMethod.personalDetails.gender);
result.isPlaceOrderAllowed(true);
} else {
result.isPlaceOrderAllowed(false);
}
}
}).mount(klarnaNode);
};
/**
* Creates the afterpay component,
* sets up the callbacks for klarna components
*/
result.renderAfterPayComponent = function () {
var afterPay = self.checkoutComponent.create('afterpay', {
countryCode: self.getLocale(),
details: self.filterOutOpenInvoiceComponentDetails(value.details),
visibility: {
personalDetails: "editable"
},
onChange: function (state) {
if (!!state.isValid) {
result.dob(state.data.paymentMethod.personalDetails.dateOfBirth);
result.telephone(state.data.paymentMethod.personalDetails.telephoneNumber);
result.gender(state.data.paymentMethod.personalDetails.gender);
result.isPlaceOrderAllowed(true);
} else {
result.isPlaceOrderAllowed(false);
}
}
}).mount(document.getElementById('afterPayContainer'));
};
if (result.hasIssuersProperty()) {
if (!result.hasIssuersAvailable()) {
return false;
}
result.issuerIds = result.getIssuers();
result.issuer = ko.observable(null);
} else if (value.isPaymentMethodOpenInvoiceMethod) {
result.telephone = ko.observable(quote.shippingAddress().telephone);
result.gender = ko.observable(window.checkoutConfig.payment.adyenHpp.gender);
result.dob = ko.observable(window.checkoutConfig.payment.adyenHpp.dob);
result.datepickerValue = ko.observable(); // needed ??
result.ssn = ko.observable();
result.getRatePayDeviceIdentToken = function () {
return window.checkoutConfig.payment.adyenHpp.deviceIdentToken;
};
result.showSsn = function () {
if (result.getBrandCode().indexOf("klarna") >= 0) {
var ba = quote.billingAddress();
if (ba != null) {
var nordicCountriesList = window.checkoutConfig.payment.adyenHpp.nordicCountries;
if (nordicCountriesList.indexOf(ba.countryId) >= 0) {
return true;
}
}
}
return false;
};
} else if (result.isSepaDirectDebit()) {
result.ownerName = ko.observable(null);
result.ibanNumber = ko.observable(null);
} else if (result.isAch()) {
result.ownerName = ko.observable(null);
result.bankAccountNumber = ko.observable(null);
result.bankLocationId = ko.observable(null);
}
accumulator.push(result);
return accumulator;
......@@ -486,25 +229,8 @@ define(
return paymentList;
},
/**
* Some payment methods we do not want to render as it requires extra implementation
* or is already implemented in a separate payment method.
* Using a match as we want to prevent to render all Boleto and most of the WeChat types
* @param paymentMethod
* @returns {boolean}
*/
isPaymentMethodSupported: function (paymentMethod) {
if (paymentMethod == 'wechatpayWeb') {
return true;
}
for (var i = 0; i < unsupportedPaymentMethods.length; i++) {
var match = paymentMethod.match(unsupportedPaymentMethods[i]);
if (match) {
return false;
}
}
return true;
},
// TODO prefill gender in components where it is available
getGenderTypes: function () {
return _.map(window.checkoutConfig.payment.adyenHpp.genderTypes, function (value, key) {
return {
......@@ -520,29 +246,15 @@ define(
if (this.validate() && additionalValidators.validate()) {
var data = {};
data.stateData = self.stateData;
data.method = self.method;
var additionalData = {};
additionalData.brand_code = self.value;
if (self.hasIssuersAvailable()) {
additionalData.issuer_id = this.issuer();
} else if (self.isPaymentMethodOpenInvoiceMethod()) {
additionalData.gender = this.gender();
additionalData.dob = this.dob();
additionalData.telephone = this.telephone();
additionalData.ssn = this.ssn();
additionalData.brand_code = self.brandCode;
if (brandCode() == "ratepay") {
additionalData.df_value = this.getRatePayDeviceIdentToken();
}
} else if (self.isSepaDirectDebit()) {
additionalData.ownerName = this.ownerName();
additionalData.ibanNumber = this.ibanNumber();
} else if (self.isAch()) {
additionalData.bankAccountOwnerName = this.ownerName();
additionalData.bankAccountNumber = this.bankAccountNumber();
additionalData.bankLocationId = this.bankLocationId();
}
data.additional_data = additionalData;
this.placeRedirectOrder(data);
......@@ -550,26 +262,16 @@ define(
return false;
},
selectPaymentMethodBrandCode: function () {
var self = this;
// set payment method to adyen_hpp
var data = {
"method": self.method,
"po_number": null,
"additional_data": {
brand_code: self.value
}
};
// set the brandCode
brandCode(self.value);
// set payment method
paymentMethod(self.method);
// DEFAULT FUNCTIONS
validate: function (brandCode) {
var form = '#payment_form_' + this.getCode() + '_' + brandCode;
var validate = $(form).validation() && $(form).validation('isValid');
selectPaymentMethodAction(data);
checkoutData.setSelectedPaymentMethod(self.method);
if (!validate) {
return false;
}
return true;
},
......@@ -612,8 +314,48 @@ define(
}
)
},
isBrandCodeChecked: ko.computed(function () {
/**
*
* @returns {boolean}
*/
selectPaymentMethodBrandCode: function () {
var self = this;
// set payment method to adyen_hpp
var data = {
"method": self.method,
"po_number": null,
"additional_data": {
brand_code: self.brandCode
}
};
// set the brandCode
brandCode(self.brandCode);
// set payment method
paymentMethod(self.method);
selectPaymentMethodAction(data);
checkoutData.setSelectedPaymentMethod(self.method);
return true;
},
// CONFIGURATIONS
isIconEnabled: function () {
return window.checkoutConfig.payment.adyen.showLogo;
},
getRatePayDeviceIdentToken: function () {
return window.checkoutConfig.payment.adyenHpp.deviceIdentToken;
},
/**
*
*/
isBrandCodeChecked: ko.computed(function () {
if (!quote.paymentMethod()) {
return null;
}
......@@ -621,19 +363,27 @@ define(
if (quote.paymentMethod().method == paymentMethod()) {
return brandCode();
}
return null;
}),
isIconEnabled: function () {
return window.checkoutConfig.payment.adyen.showLogo;
},
validate: function (brandCode) {
var form = '#payment_form_' + this.getCode() + '_' + brandCode;
var validate = $(form).validation() && $(form).validation('isValid');
if (!validate) {
/**
* Some payment methods we do not want to render as it requires extra implementation
* or is already implemented in a separate payment method.
* Using a match as we want to prevent to render all Boleto and most of the WeChat types
* @param paymentMethod
* @returns {boolean}
*/
isPaymentMethodSupported: function (paymentMethod) {
if (paymentMethod == 'wechatpayWeb') {
return true;
}
for (var i = 0; i < unsupportedPaymentMethods.length; i++) {
var match = paymentMethod.match(unsupportedPaymentMethods[i]);
if (match) {
return false;
}
}
return true;
},
/**
......@@ -648,12 +398,6 @@ define(
return '';
},
getRatePayDeviceIdentToken: function () {
return window.checkoutConfig.payment.adyenHpp.deviceIdentToken;
},
getLocale: function () {
return window.checkoutConfig.payment.adyenHpp.locale;
},
/**
* In the open invoice components we need to validate only the personal details and only the
* dateOfBirth, telephoneNumber and gender if it's set in the admin
......
view/frontend/web/template/payment/hpp-form.html
View file @ 925eec72
......@@ -23,14 +23,14 @@
-->
<!-- ko foreach: getAdyenHppPaymentMethods() -->
<div class="payment-method" data-bind="css: {'_active': (value == $parent.isBrandCodeChecked())}">
<div class="payment-method" data-bind="css: {'_active': (brandCode == $parent.isBrandCodeChecked())}">
<div class="payment-method-title field choice">
<input type="radio"
name="payment[method]"
class="radio"
data-bind="attr: {'id': value}, value: value, checked: $parent.isBrandCodeChecked, click: $parent.selectPaymentMethodBrandCode"/>
<label data-bind="attr: {'for': value}" class="label">
data-bind="attr: {'id': 'paymentmethod_' + brandCode}, value: 'paymentmethod_' + brandCode, checked: brandCode == $parent.isBrandCodeChecked, click: $parent.selectPaymentMethodBrandCode"/>
<label data-bind="attr: {'for': 'paymentmethod_' + brandCode}" class="label">
<!-- ko if: name.icon -->
<img data-bind="attr: {
......@@ -40,7 +40,7 @@
}">
<!--/ko-->
<span data-bind="text: name.title"></span>
<span data-bind="text: name"></span>
</label>
</div>
<div class="payment-method-content">
......@@ -51,9 +51,10 @@
<!--/ko-->
</div>
<form class="form" data-role="adyen-hpp-form" action="#" method="post" data-bind="mageInit: { 'validation':[]}, attr: {id: 'payment_form_' + $parent.getCode() + '_' + value}">
<fieldset class="fieldset" data-bind='attr: {id: "payment_fieldset_" + $parent.getCode() + "_" + value}'>
<div class="adyen-alternative-payment-container"></div>
<form class="form" data-role="adyen-hpp-form" action="#" method="post" data-bind="mageInit: { 'validation':[]}, attr: {id: 'payment_form_' + $parent.getCode() + '_' + brandCode}">
<fieldset class="fieldset" data-bind='attr: {id: "payment_fieldset_" + $parent.getCode() + "_" + brandCode}'>
<div data-bind='attr: {id: "adyen-alternative-payment-container-" + brandCode}'
afterRender="renderCheckoutComponent()"></div>
</fieldset>
......@@ -64,7 +65,7 @@
</div>
<div>
<span class="message message-error error hpp-message" data-bind="attr: {id: 'messages-' + value}"></span>
<span class="message message-error error hpp-message" data-bind="attr: {id: 'messages-' + brandCode}"></span>
</div>
<div class="actions-toolbar">
......@@ -73,7 +74,7 @@
type="submit"
data-bind="
click: $parent.continueToAdyenBrandCode,
enable: placeOrderAllowed() && (value == $parent.isBrandCodeChecked()),
enable: placeOrderAllowed() && (brandCode == $parent.isBrandCodeChecked()),
css: {disabled: !$parent.isPlaceOrderActionAllowed()}"
disabled>
<span data-bind="text: $t('Place Order')"></span>
......
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