Skip to content

A
Adyen Magento2
Commit 935f8042 authored by Attila Kiss's avatar Attila Kiss Committed by GitHub
Browse files
Options

Add bundle.js with checkout component version 3.12.1 (#828) 

Add the AdyenComponent var in the requireJS paramas
parent 52839256
Show whitespace changes
Inline Side-by-side
Showing with 1547 additions and 1426 deletions
view/frontend/web/js/bundle.js 0 → 100644
View file @ 935f8042
This source diff could not be displayed because it is too large. You can view the blob instead.
view/frontend/web/js/bundle.map.js 0 → 100644
View file @ 935f8042
This source diff could not be displayed because it is too large. You can view the blob instead.
view/frontend/web/js/view/payment/method-renderer/adyen-cc-method.js
View file @ 935f8042
......@@ -40,7 +40,8 @@ define(
'Adyen_Payment/js/model/threeds2',
'Magento_Checkout/js/model/error-processor',
'Adyen_Payment/js/model/adyen-payment-service',
'adyenCheckout'
'adyenCheckout',
'Adyen_Payment/js/bundle'
],
function (
$,
......@@ -62,7 +63,8 @@ define(
threeds2,
errorProcessor,
adyenPaymentService,
AdyenCheckout
AdyenCheckout,
AdyenComponent
) {
'use strict';
......
view/frontend/web/js/view/payment/method-renderer/adyen-google-pay-method.js
View file @ 935f8042
......@@ -34,9 +34,23 @@ define(
'Magento_Checkout/js/model/full-screen-loader',
'mage/url',
'Magento_Vault/js/view/payment/vault-enabler',
'adyenCheckout'
'adyenCheckout',
'Adyen_Payment/js/bundle',
],
function (ko, $, Component, placeOrderAction, additionalValidators, quote, urlBuilder, fullScreenLoader, url, VaultEnabler, AdyenCheckout) {
function(
ko,
$,
Component,
placeOrderAction,
additionalValidators,
quote,
urlBuilder,
fullScreenLoader,
url,
VaultEnabler,
AdyenCheckout,
AdyenComponent,
) {
'use strict';
/**
......@@ -50,34 +64,33 @@ define(
defaults: {
template: 'Adyen_Payment/payment/google-pay-form',
googlePayToken: null,
googlePayAllowed: null
googlePayAllowed: null,
},
/**
* @returns {Boolean}
*/
isShowLegend: function () {
isShowLegend: function() {
return true;
},
setPlaceOrderHandler: function (handler) {
setPlaceOrderHandler: function(handler) {
this.placeOrderHandler = handler;
},
setValidateHandler: function (handler) {
setValidateHandler: function(handler) {
this.validateHandler = handler;
},
getCode: function () {
getCode: function() {
return 'adyen_google_pay';
},
isActive: function () {
isActive: function() {
return true;
},
initObservable: function () {
this._super()
.observe([
initObservable: function() {
this._super().observe([
'googlePayToken',
'googlePayAllowed'
'googlePayAllowed',
]);
return this;
}, initialize: function () {
}, initialize: function() {
var self = this;
this.additionalValidators = additionalValidators;
this.vaultEnabler = new VaultEnabler();
......@@ -86,7 +99,7 @@ define(
this._super();
},
renderGooglePay: function () {
renderGooglePay: function() {
this.googlePayNode = document.getElementById('googlePay');
var self = this;
......@@ -95,8 +108,8 @@ define(
originKey: self.getOriginKey(),
environment: self.getCheckoutEnvironment(),
risk: {
enabled: false
}
enabled: false,
},
});
var googlepay = self.checkoutComponent.create('paywithgoogle', {
showPayButton: true,
......@@ -108,91 +121,92 @@ define(
// https://developers.google.com/pay/api/web/reference/object#MerchantInfo
merchantIdentifier: self.getMerchantIdentifier(),
merchantName: self.getMerchantAccount()
merchantName: self.getMerchantAccount(),
},
// Payment
amount: self.formatAmount(quote.totals().grand_total, self.getFormat()),
amount: self.formatAmount(quote.totals().grand_total,
self.getFormat()),
currency: quote.totals().quote_currency_code,
totalPriceStatus: 'FINAL',
// empty onSubmit to resolve javascript issues.
onSubmit: function() {},
onChange: function (state) {
onChange: function(state) {
if (!!state.isValid) {
self.googlePayToken(state.data.paymentMethod.googlePayToken);
self.getPlaceOrderDeferredObject()
.fail(
function () {
self.getPlaceOrderDeferredObject().fail(
function() {
fullScreenLoader.stopLoader();
self.isPlaceOrderActionAllowed(true);
}
},
).done(
function () {
function() {
self.afterPlaceOrder();
window.location.replace(url.build(window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl));
window.location.replace(url.build(
window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl));
}
},
);
}
},
buttonColor: 'black', // default/black/white
buttonType: 'long', // long/short
showButton: true // show or hide the Google Pay button
showButton: true, // show or hide the Google Pay button
});
var promise = googlepay.isAvailable();
promise.then(function (success) {
promise.then(function(success) {
self.googlePayAllowed(true);
googlepay.mount(self.googlePayNode);
$(self.googlePayNode).find('button').prop('disabled', true);
}, function (error) {
}, function(error) {
console.log(error);
self.googlePayAllowed(false);
});
},
isGooglePayAllowed: function () {
isGooglePayAllowed: function() {
if (this.googlePayAllowed()) {
return true;
}
return false;
},
getMerchantAccount: function () {
getMerchantAccount: function() {
return window.checkoutConfig.payment.adyenGooglePay.merchantAccount;
},
showLogo: function () {
showLogo: function() {
return window.checkoutConfig.payment.adyen.showLogo;
},
getLocale: function () {
getLocale: function() {
return window.checkoutConfig.payment.adyenGooglePay.locale;
},
getFormat: function () {
getFormat: function() {
return window.checkoutConfig.payment.adyenGooglePay.format;
},
getMerchantIdentifier: function () {
getMerchantIdentifier: function() {
return window.checkoutConfig.payment.adyenGooglePay.merchantIdentifier;
},
context: function () {
context: function() {
return this;
},
validate: function (hideErrors) {
validate: function(hideErrors) {
return this.additionalValidators.validate(hideErrors);
},
getControllerName: function () {
getControllerName: function() {
return window.checkoutConfig.payment.iframe.controllerName[this.getCode()];
},
getPlaceOrderUrl: function () {
getPlaceOrderUrl: function() {
return window.checkoutConfig.payment.iframe.placeOrderUrl[this.getCode()];
},
/**
* Get data for place order
* @returns {{method: *}}
*/
getData: function () {
getData: function() {
return {
'method': "adyen_google_pay",
'method': 'adyen_google_pay',
'additional_data': {
'token': this.googlePayToken()
}
'token': this.googlePayToken(),
},
};
},
......@@ -202,21 +216,21 @@ define(
* @param $currency
* @return string
*/
formatAmount: function (amount, format) {
return Math.round(amount * (Math.pow(10, format)))
formatAmount: function(amount, format) {
return Math.round(amount * (Math.pow(10, format)));
},
isVaultEnabled: function () {
isVaultEnabled: function() {
return this.vaultEnabler.isVaultEnabled();
},
getVaultCode: function () {
return "adyen_google_pay_vault";
getVaultCode: function() {
return 'adyen_google_pay_vault';
},
getOriginKey: function () {
getOriginKey: function() {
return window.checkoutConfig.payment.adyen.originKey;
},
getCheckoutEnvironment: function () {
getCheckoutEnvironment: function() {
return window.checkoutConfig.payment.adyen.checkoutEnvironment;
}
},
});
}
},
);
view/frontend/web/js/view/payment/method-renderer/adyen-hpp-method.js
View file @ 935f8042
......@@ -38,14 +38,42 @@ define(
'Magento_Ui/js/model/messages',
'Adyen_Payment/js/model/threeds2',
'Magento_Checkout/js/model/error-processor',
'adyenCheckout'
'adyenCheckout',
'Adyen_Payment/js/bundle'
],
function (ko, $, Component, selectPaymentMethodAction, quote, checkoutData, additionalValidators, storage, urlBuilder, adyenPaymentService, customer, fullScreenLoader, placeOrderAction, layout, Messages, threeds2, errorProcessor, AdyenCheckout) {
function(
ko,
$,
Component,
selectPaymentMethodAction,
quote,
checkoutData,
additionalValidators,
storage,
urlBuilder,
adyenPaymentService,
customer,
fullScreenLoader,
placeOrderAction,
layout,
Messages,
threeds2,
errorProcessor,
AdyenCheckout,
AdyenComponent
) {
'use strict';
var brandCode = ko.observable(null);
var paymentMethod = ko.observable(null);
var shippingAddressCountryCode = quote.shippingAddress().countryId;
var unsupportedPaymentMethods = ['scheme', 'boleto', 'bcmc_mobile_QR', 'wechatpay', /^bcmc$/, "applepay", "paywithgoogle"];
var unsupportedPaymentMethods = [
'scheme',
'boleto',
'bcmc_mobile_QR',
'wechatpay',
/^bcmc$/,
'applepay',
'paywithgoogle'];
var popupModal;
/**
* Shareble adyen checkout component
......@@ -58,11 +86,10 @@ define(
self: this,
defaults: {
template: 'Adyen_Payment/payment/hpp-form',
brandCode: ''
brandCode: '',
},
initObservable: function () {
this._super()
.observe([
initObservable: function() {
this._super().observe([
'brandCode',
'issuer',
'gender',
......@@ -72,11 +99,10 @@ define(
'ibanNumber',
'ssn',
'bankAccountNumber',
'bankLocationId'
'bankLocationId',
]);
return this;
}, initialize: function () {
}, initialize: function() {
var self = this;
this._super();
......@@ -91,35 +117,35 @@ define(
locale: self.getLocale(),
onAdditionalDetails: self.handleOnAdditionalDetails.bind(self),
originKey: self.getOriginKey(),
environment: self.getCheckoutEnvironment()
environment: self.getCheckoutEnvironment(),
});
// reset variable:
adyenPaymentService.setPaymentMethods();
adyenPaymentService.retrieveAvailablePaymentMethods(function () {
adyenPaymentService.retrieveAvailablePaymentMethods(function() {
var paymentMethods = adyenPaymentService.getAvailablePaymentMethods();
if (JSON.stringify(paymentMethods).indexOf("ratepay") > -1) {
if (JSON.stringify(paymentMethods).indexOf('ratepay') > -1) {
var ratePayId = window.checkoutConfig.payment.adyenHpp.ratePayId;
var dfValueRatePay = self.getRatePayDeviceIdentToken();
window.di = {
t: dfValueRatePay.replace(':', ''),
v: ratePayId,
l: 'Checkout'
l: 'Checkout',
};
// Load Ratepay script
var ratepayScriptTag = document.createElement('script');
ratepayScriptTag.src = "//d.ratepay.com/" + ratePayId + "/di.js";
ratepayScriptTag.type = "text/javascript";
ratepayScriptTag.src = '//d.ratepay.com/' + ratePayId + '/di.js';
ratepayScriptTag.type = 'text/javascript';
document.body.appendChild(ratepayScriptTag);
}
fullScreenLoader.stopLoader();
});
},
getAdyenHppPaymentMethods: function () {
getAdyenHppPaymentMethods: function() {
var self = this;
var currentShippingAddressCountryCode = quote.shippingAddress().countryId;
......@@ -133,33 +159,34 @@ define(
var paymentMethods = adyenPaymentService.getAvailablePaymentMethods();
var paymentList = _.reduce(paymentMethods, function (accumulator, value) {
var paymentList = _.reduce(paymentMethods,
function(accumulator, value) {
if (!self.isPaymentMethodSupported(value.type)) {
return accumulator;
}
var messageContainer = new Messages();
var name = 'messages-' + self.getBrandCodeFromPaymentMethod(value);
var name = 'messages-' +
self.getBrandCodeFromPaymentMethod(value);
var messagesComponent = {
parent: self.name,
name: name,
displayArea: name,
component: 'Magento_Ui/js/view/messages',
config: {
messageContainer: messageContainer
}
messageContainer: messageContainer,
},
};
layout([messagesComponent]);
var result = {};
/**
* Returns the payment method's brand code (in checkout api it is the type)
* @returns {*}
*/
result.getBrandCode = function () {
result.getBrandCode = function() {
return self.getBrandCodeFromPaymentMethod(value);
};
......@@ -172,16 +199,17 @@ define(
* @type {observable}
*/
result.placeOrderAllowed = ko.observable(true);
result.getCode = function () {
result.getCode = function() {
return self.item.method;
};
result.getMessageName = function () {
return 'messages-' + self.getBrandCodeFromPaymentMethod(value)
result.getMessageName = function() {
return 'messages-' +
self.getBrandCodeFromPaymentMethod(value);
};
result.getMessageContainer = function () {
result.getMessageContainer = function() {
return messageContainer;
}
result.validate = function () {
};
result.validate = function() {
return self.validate(result.getBrandCode());
};
result.placeRedirectOrder = function placeRedirectOrder(data) {
......@@ -192,22 +220,23 @@ define(
self.isPlaceOrderActionAllowed(false);
$.when(
placeOrderAction(data, self.currentMessageContainer)
placeOrderAction(data, self.currentMessageContainer),
).fail(
function (response) {
function(response) {
self.isPlaceOrderActionAllowed(true);
fullScreenLoader.stopLoader();
self.showErrorMessage(response);
}
},
).done(
function (orderId) {
function(orderId) {
self.afterPlaceOrder();
adyenPaymentService.getOrderPaymentStatus(orderId)
.done(function (responseJSON) {
self.validateActionOrPlaceOrder(responseJSON, orderId);
adyenPaymentService.getOrderPaymentStatus(orderId).
done(function(responseJSON) {
self.validateActionOrPlaceOrder(responseJSON,
orderId);
});
}
)
},
);
};
/**
......@@ -216,18 +245,18 @@ define(
* @param bool
* @returns {*}
*/
result.isPlaceOrderAllowed = function (bool) {
result.isPlaceOrderAllowed = function(bool) {
self.isPlaceOrderActionAllowed(bool);
return result.placeOrderAllowed(bool);
};
result.afterPlaceOrder = function () {
result.afterPlaceOrder = function() {
return self.afterPlaceOrder();
};
/**
* Checks if payment method is open invoice
* @returns {*|isPaymentMethodOpenInvoiceMethod}
*/
result.isPaymentMethodOpenInvoiceMethod = function () {
result.isPaymentMethodOpenInvoiceMethod = function() {
return value.isPaymentMethodOpenInvoiceMethod;
};
/**
......@@ -235,7 +264,7 @@ define(
* [klarna, afterpay]
* @returns {boolean}
*/
result.isPaymentMethodOtherOpenInvoiceMethod = function () {
result.isPaymentMethodOtherOpenInvoiceMethod = function() {
if (
!result.isPaymentMethodAfterPay() &&
!result.isPaymentMethodKlarna() &&
......@@ -251,8 +280,8 @@ define(
* Checks if payment method is klarna
* @returns {boolean}
*/
result.isPaymentMethodKlarna = function () {
if (result.getBrandCode() === "klarna") {
result.isPaymentMethodKlarna = function() {
if (result.getBrandCode() === 'klarna') {
return true;
}
......@@ -262,8 +291,8 @@ define(
* Checks if payment method is after pay
* @returns {boolean}
*/
result.isPaymentMethodAfterPay = function () {
if (result.getBrandCode() === "afterpay_default") {
result.isPaymentMethodAfterPay = function() {
if (result.getBrandCode() === 'afterpay_default') {
return true;
}
......@@ -273,8 +302,8 @@ define(
* Checks if payment method is after pay touch
* @returns {boolean}
*/
result.isPaymentMethodAfterPayTouch = function () {
if (result.getBrandCode() === "afterpaytouch") {
result.isPaymentMethodAfterPayTouch = function() {
if (result.getBrandCode() === 'afterpaytouch') {
return true;
}
......@@ -284,8 +313,8 @@ define(
* Get personal number (SSN) length based on the buyer's country
* @returns {number}
*/
result.getSsnLength = function () {
if (quote.billingAddress().countryId == "NO") {
result.getSsnLength = function() {
if (quote.billingAddress().countryId == 'NO') {
//14 digits for Norway ÅÅÅÅMMDD-XXXXX
return 14;
} else {
......@@ -296,30 +325,31 @@ define(
/**
* Get max length for the Bank account number
*/
result.getBankAccountNumberMaxLength = function () {
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 () {
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') {
$.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 () {
result.hasIssuersProperty = function() {
if (result.findIssuersProperty() !== false) {
return true;
}
......@@ -330,8 +360,10 @@ define(
* Checks if the payment method has issuer(s) available
* @returns {boolean}
*/
result.hasIssuersAvailable = function () {
if (result.hasIssuersProperty() && value.details[result.findIssuersProperty()].items.length > 0) {
result.hasIssuersAvailable = function() {
if (result.hasIssuersProperty() &&
value.details[result.findIssuersProperty()].items.length >
0) {
return true;
}
......@@ -341,7 +373,7 @@ define(
* Returns the issuers for a payment method
* @returns {*}
*/
result.getIssuers = function () {
result.getIssuers = function() {
if (result.hasIssuersAvailable()) {
return value.details[result.findIssuersProperty()].items;
}
......@@ -352,8 +384,8 @@ define(
* Checks if payment method is iDeal
* @returns {boolean}
*/
result.isIdeal = function () {
if (result.getBrandCode().indexOf("ideal") >= 0) {
result.isIdeal = function() {
if (result.getBrandCode().indexOf('ideal') >= 0) {
return true;
}
......@@ -363,8 +395,8 @@ define(
* Checks if payment method is ACH
* @returns {boolean}
*/
result.isAch = function () {
if (result.getBrandCode().indexOf("ach") == 0) {
result.isAch = function() {
if (result.getBrandCode().indexOf('ach') == 0) {
return true;
}
......@@ -373,8 +405,8 @@ define(
/**
* Checks if payment method is sepa direct debit
*/
result.isSepaDirectDebit = function () {
if (result.getBrandCode().indexOf("sepadirectdebit") >= 0) {
result.isSepaDirectDebit = function() {
if (result.getBrandCode().indexOf('sepadirectdebit') >= 0) {
return true;
}
......@@ -385,21 +417,21 @@ define(
* creates the ideal component,
* sets up the callbacks for ideal components and
*/
result.renderIdealComponent = function () {
result.renderIdealComponent = function() {
result.isPlaceOrderAllowed(false);
var idealNode = document.getElementById('iDealContainer');
var ideal = self.checkoutComponent.create('ideal', {
items: result.getIssuers(),
onChange: function (state) {
onChange: function(state) {
if (!!state.isValid) {
result.issuer(state.data.paymentMethod.issuer);
result.isPlaceOrderAllowed(true);
} else {
result.isPlaceOrderAllowed(false);
}
}
},
});
ideal.mount(idealNode);
......@@ -409,22 +441,26 @@ define(
* Creates the sepa direct debit component,
* sets up the callbacks for sepa components
*/
result.renderSepaDirectDebitComponent = function () {
result.renderSepaDirectDebitComponent = function() {
result.isPlaceOrderAllowed(false);
var sepaDirectDebitNode = document.getElementById('sepaDirectDebitContainer');
var sepaDirectDebitNode = document.getElementById(
'sepaDirectDebitContainer');
var sepaDirectDebit = self.checkoutComponent.create('sepadirectdebit', {
var sepaDirectDebit = self.checkoutComponent.create(
'sepadirectdebit', {
countryCode: self.getLocale(),
onChange: function (state) {
onChange: function(state) {
if (!!state.isValid) {
result.ownerName(state.data.paymentMethod["sepa.ownerName"]);
result.ibanNumber(state.data.paymentMethod["sepa.ibanNumber"]);
result.ownerName(
state.data.paymentMethod['sepa.ownerName']);
result.ibanNumber(
state.data.paymentMethod['sepa.ibanNumber']);
result.isPlaceOrderAllowed(true);
} else {
result.isPlaceOrderAllowed(false);
}
}
},
});
sepaDirectDebit.mount(sepaDirectDebitNode);
......@@ -434,7 +470,7 @@ define(
* Creates the klarna component,
* sets up the callbacks for klarna components
*/
result.renderKlarnaComponent = function () {
result.renderKlarnaComponent = function() {
/* The new Klarna integration doesn't return details and the component does not handle it */
if (!value.details) {
......@@ -445,20 +481,24 @@ define(
var klarna = self.checkoutComponent.create('klarna', {
countryCode: self.getLocale(),
details: self.filterOutOpenInvoiceComponentDetails(value.details),
details: self.filterOutOpenInvoiceComponentDetails(
value.details),
visibility: {
personalDetails: "editable"
personalDetails: 'editable',
},
onChange: function (state) {
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.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);
};
......@@ -466,28 +506,32 @@ define(
* Creates the afterpay component,
* sets up the callbacks for klarna components
*/
result.renderAfterPayComponent = function () {
result.renderAfterPayComponent = function() {
var afterPay = self.checkoutComponent.create('afterpay', {
countryCode: self.getLocale(),
details: self.filterOutOpenInvoiceComponentDetails(value.details),
details: self.filterOutOpenInvoiceComponentDetails(
value.details),
visibility: {
personalDetails: "editable"
personalDetails: 'editable',
},
onChange: function (state) {
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.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'));
};
result.continueToAdyenBrandCode = function () {
result.continueToAdyenBrandCode = function() {
// set payment method to adyen_hpp
var self = this;
......@@ -505,7 +549,7 @@ define(
additionalData.dob = this.dob();
additionalData.telephone = this.telephone();
additionalData.ssn = this.ssn();
if (brandCode() == "ratepay") {
if (brandCode() == 'ratepay') {
additionalData.df_value = this.getRatePayDeviceIdentToken();
}
} else if (self.isSepaDirectDebit()) {
......@@ -522,8 +566,7 @@ define(
}
return false;
}
};
if (result.hasIssuersProperty()) {
if (!result.hasIssuersAvailable()) {
......@@ -533,17 +576,20 @@ define(
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.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 () {
result.getRatePayDeviceIdentToken = function() {
return window.checkoutConfig.payment.adyenHpp.deviceIdentToken;
};
result.showSsn = function () {
if (result.getBrandCode().indexOf("klarna") >= 0) {
result.showSsn = function() {
if (result.getBrandCode().indexOf('klarna') >= 0) {
var ba = quote.billingAddress();
if (ba != null) {
var nordicCountriesList = window.checkoutConfig.payment.adyenHpp.nordicCountries;
......@@ -576,7 +622,7 @@ define(
* @param paymentMethod
* @returns {boolean}
*/
isPaymentMethodSupported: function (paymentMethod) {
isPaymentMethodSupported: function(paymentMethod) {
if (paymentMethod == 'wechatpayWeb') {
return true;
}
......@@ -588,24 +634,25 @@ define(
}
return true;
},
getGenderTypes: function () {
return _.map(window.checkoutConfig.payment.adyenHpp.genderTypes, function (value, key) {
getGenderTypes: function() {
return _.map(window.checkoutConfig.payment.adyenHpp.genderTypes,
function(value, key) {
return {
'key': key,
'value': value
}
'value': value,
};
});
},
selectPaymentMethodBrandCode: function () {
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
}
'method': self.method,
'po_number': null,
'additional_data': {
brand_code: self.value,
},
};
// set the brandCode
......@@ -623,18 +670,18 @@ define(
* This method is a workaround to close the modal in the right way and reconstruct the ActionModal.
* This will solve issues when you cancel the 3DS2 challenge and retry the payment
*/
closeModal: function (popupModal) {
popupModal.modal("closeModal");
closeModal: function(popupModal) {
popupModal.modal('closeModal');
$('.ActionModal').remove();
$('.modals-overlay').remove();
$('body').removeClass('_has-modal');
// reconstruct the ActionModal container again otherwise component can not find the ActionModal
$('#ActionWrapper').append("<div id=\"ActionModal\">" +
"<div id=\"ActionContainer\"></div>" +
"</div>");
$('#ActionWrapper').append('<div id="ActionModal">' +
'<div id="ActionContainer"></div>' +
'</div>');
},
isBrandCodeChecked: ko.computed(function () {
isBrandCodeChecked: ko.computed(function() {
if (!quote.paymentMethod()) {
return null;
......@@ -645,14 +692,14 @@ define(
}
return null;
}),
isIconEnabled: function () {
isIconEnabled: function() {
return window.checkoutConfig.payment.adyen.showLogo;
},
/**
* Based on the response we can start a action component or redirect
* @param responseJSON
*/
validateActionOrPlaceOrder: function (responseJSON, orderId) {
validateActionOrPlaceOrder: function(responseJSON, orderId) {
var self = this;
var response = JSON.parse(responseJSON);
......@@ -662,7 +709,7 @@ define(
self.renderActionComponent(response.action);
} else {
$.mage.redirect(
window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl
window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl,
);
}
},
......@@ -677,11 +724,10 @@ define(
* @param type
* @param token
*/
renderActionComponent: function (action) {
renderActionComponent: function(action) {
var self = this;
var actionNode = document.getElementById('ActionContainer');
fullScreenLoader.stopLoader();
self.popupModal = $('#ActionModal').modal({
......@@ -691,13 +737,14 @@ define(
innerScroll: false,
// empty buttons, we don't need that
buttons: [],
modalClass: 'ActionModal'
modalClass: 'ActionModal',
});
self.popupModal.modal("openModal");
self.actionComponent = self.checkoutComponent.createFromAction(action).mount(actionNode);
self.popupModal.modal('openModal');
self.actionComponent = self.checkoutComponent.createFromAction(
action).mount(actionNode);
},
handleOnAdditionalDetails: function (state, component) {
handleOnAdditionalDetails: function(state, component) {
var self = this;
// call endpoint with state.data
......@@ -705,11 +752,11 @@ define(
request.orderId = self.orderId;
// Using the same processor as 3DS2, refactor to generic name in a upcomming release will be breaking change for merchants.
threeds2.processThreeDS2(request).done(function () {
threeds2.processThreeDS2(request).done(function() {
$.mage.redirect(
window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl
window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl,
);
}).fail(function (response) {
}).fail(function(response) {
fullScreenLoader.stopLoader();
self.closeModal(self.popupModal);
errorProcessor.process(response, self.currentMessageContainer);
......@@ -721,18 +768,23 @@ define(
* Issue with the default currentMessageContainer needs to be resolved for now just throw manually the eror message
* @param response
*/
showErrorMessage: function (response) {
showErrorMessage: function(response) {
if (!!response['responseJSON'].parameters) {
$("#messages-" + brandCode()).text((response['responseJSON'].message).replace('%1', response['responseJSON'].parameters[0])).slideDown();
$('#messages-' + brandCode()).
text((response['responseJSON'].message).replace('%1',
response['responseJSON'].parameters[0])).
slideDown();
} else {
$("#messages-" + brandCode()).text(response['responseJSON'].message).slideDown();
$('#messages-' + brandCode()).
text(response['responseJSON'].message).
slideDown();
}
setTimeout(function () {
$("#messages-" + brandCode()).slideUp();
setTimeout(function() {
$('#messages-' + brandCode()).slideUp();
}, 10000);
},
validate: function (brandCode) {
validate: function(brandCode) {
var form = '#payment_form_' + this.getCode() + '_' + brandCode;
var validate = $(form).validation() && $(form).validation('isValid');
......@@ -747,17 +799,17 @@ define(
* (in checkout api it is the type)
* @returns {*}
*/
getBrandCodeFromPaymentMethod: function (paymentMethod) {
getBrandCodeFromPaymentMethod: function(paymentMethod) {
if (typeof paymentMethod.type !== 'undefined') {
return paymentMethod.type;
}
return '';
},
getRatePayDeviceIdentToken: function () {
getRatePayDeviceIdentToken: function() {
return window.checkoutConfig.payment.adyenHpp.deviceIdentToken;
},
getLocale: function () {
getLocale: function() {
return window.checkoutConfig.payment.adyenHpp.locale;
},
/**
......@@ -766,11 +818,11 @@ define(
* @param details
* @returns {Array}
*/
filterOutOpenInvoiceComponentDetails: function (details) {
filterOutOpenInvoiceComponentDetails: function(details) {
var self = this;
var filteredDetails = _.map(details, function (parentDetail) {
if (parentDetail.key == "personalDetails") {
var detailObject = _.map(parentDetail.details, function (detail) {
var filteredDetails = _.map(details, function(parentDetail) {
if (parentDetail.key == 'personalDetails') {
var detailObject = _.map(parentDetail.details, function(detail) {
if (detail.key == 'dateOfBirth' ||
detail.key == 'telephoneNumber' ||
detail.key == 'gender') {
......@@ -780,9 +832,9 @@ define(
if (!!detailObject) {
return {
"key": parentDetail.key,
"type": parentDetail.type,
"details": self.filterUndefinedItemsInArray(detailObject)
'key': parentDetail.key,
'type': parentDetail.type,
'details': self.filterUndefinedItemsInArray(detailObject),
};
}
}
......@@ -795,17 +847,17 @@ define(
* @param arr
* @returns {*}
*/
filterUndefinedItemsInArray: function (arr) {
return arr.filter(function (item) {
filterUndefinedItemsInArray: function(arr) {
return arr.filter(function(item) {
return typeof item !== 'undefined';
});
},
getOriginKey: function () {
getOriginKey: function() {
return window.checkoutConfig.payment.adyen.originKey;
},
getCheckoutEnvironment: function () {
getCheckoutEnvironment: function() {
return window.checkoutConfig.payment.adyen.checkoutEnvironment;
}
},
});
}
},
);
view/frontend/web/js/view/payment/method-renderer/adyen-oneclick-method.js
View file @ 935f8042
......@@ -42,9 +42,12 @@ define(
'Adyen_Payment/js/model/threeds2',
'Magento_Checkout/js/model/error-processor',
'Adyen_Payment/js/model/adyen-payment-service',
'adyenCheckout'
],
function (
'adyenCheckout',
]
'Adyen_Payment/js/bundle';
],
function(
ko,
_,
$,
......@@ -66,8 +69,9 @@ define(
threeds2,
errorProcessor,
adyenPaymentService,
AdyenCheckout
) {
AdyenCheckout,
AdyenComponent,
) {
'use strict';
......@@ -85,26 +89,26 @@ define(
template: 'Adyen_Payment/payment/oneclick-form',
recurringDetailReference: '',
variant: '',
numberOfInstallments: ''
numberOfInstallments: '',
},
initObservable: function () {
this._super()
.observe([
initObservable: function() {
this._super().observe([
'recurringDetailReference',
'creditCardType',
'encryptedCreditCardVerificationNumber',
'variant',
'numberOfInstallments'
'numberOfInstallments',
]);
return this;
},
initialize: function () {
initialize: function() {
var self = this;
this._super();
// create component needs to be in initialize method
var messageComponents = {};
_.map(window.checkoutConfig.payment.adyenOneclick.billingAgreements, function (value) {
_.map(window.checkoutConfig.payment.adyenOneclick.billingAgreements,
function(value) {
var messageContainer = new Messages();
var name = 'messages-' + value.reference_id;
......@@ -115,8 +119,8 @@ define(
displayArea: 'messages-' + value.reference_id,
component: 'Magento_Ui/js/view/messages',
config: {
messageContainer: messageContainer
}
messageContainer: messageContainer,
},
};
layout([messagesComponent]);
......@@ -130,7 +134,7 @@ define(
*
* @returns {Array}
*/
getAdyenBillingAgreements: function () {
getAdyenBillingAgreements: function() {
var self = this;
// shareable adyen checkout component
......@@ -139,12 +143,14 @@ define(
originKey: self.getOriginKey(),
environment: self.getCheckoutEnvironment(),
risk: {
enabled: false
}
enabled: false,
},
});
// convert to list so you can iterate
var paymentList = _.map(window.checkoutConfig.payment.adyenOneclick.billingAgreements, function (value) {
var paymentList = _.map(
window.checkoutConfig.payment.adyenOneclick.billingAgreements,
function(value) {
var creditCardExpMonth, creditCardExpYear = false;
......@@ -156,22 +162,26 @@ define(
// pre-define installments if they are set
var i, installments = [];
var grandTotal = quote.totals().grand_total;
var dividedString = "";
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;
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]
value: value.number_of_installments[i],
});
}
}
var messageContainer = self.messageComponents['messages-' + value.reference_id];
var messageContainer = self.messageComponents['messages-' +
value.reference_id];
// for recurring enable the placeOrder button at all times
var placeOrderAllowed = true;
......@@ -196,9 +206,11 @@ define(
'getInstallments': ko.observableArray(installments),
'placeOrderAllowed': ko.observable(placeOrderAllowed),
isButtonActive: function () {
return self.isActive() && this.getCode() == self.isChecked() && self.isBillingAgreementChecked() && this.placeOrderAllowed() && self.isPlaceOrderActionAllowed();
isButtonActive: function() {
return self.isActive() && this.getCode() == self.isChecked() &&
self.isBillingAgreementChecked() &&
this.placeOrderAllowed() &&
self.isPlaceOrderActionAllowed();
},
/**
* Custom place order function
......@@ -209,7 +221,7 @@ define(
* @param event
* @returns {boolean}
*/
placeOrder: function (data, event) {
placeOrder: function(data, event) {
var self = this;
if (event) {
......@@ -227,20 +239,20 @@ define(
fullScreenLoader.startLoader();
self.isPlaceOrderActionAllowed(false);
self.getPlaceOrderDeferredObject()
.fail(
function () {
self.getPlaceOrderDeferredObject().fail(
function() {
fullScreenLoader.stopLoader();
self.isPlaceOrderActionAllowed(true);
}
},
).done(
function (orderId) {
function(orderId) {
self.afterPlaceOrder();
adyenPaymentService.getOrderPaymentStatus(orderId)
.done(function (responseJSON) {
self.validateThreeDS2OrPlaceOrder(responseJSON, orderId)
adyenPaymentService.getOrderPaymentStatus(orderId).
done(function(responseJSON) {
self.validateThreeDS2OrPlaceOrder(responseJSON,
orderId);
});
}
},
);
}
return false;
......@@ -251,13 +263,14 @@ define(
* creates the card component,
* sets up the callbacks for card components
*/
renderSecureCVC: function () {
renderSecureCVC: function() {
var self = this;
if (!self.getOriginKey()) {
return;
}
var oneClickCardNode = document.getElementById('cvcContainer-' + self.value);
var oneClickCardNode = document.getElementById(
'cvcContainer-' + self.value);
var hideCVC = false;
// hide cvc if contract has been stored as recurring
......@@ -265,51 +278,52 @@ define(
hideCVC = true;
}
var oneClickCard = checkout
.create('card', {
var oneClickCard = checkout.create('card', {
hideCVC: hideCVC,
brand: self.agreement_data.variant,
storedPaymentMethodId: this.value,
expiryMonth: self.agreement_data.card.expiryMonth,
expiryYear: self.agreement_data.card.expiryYear,
holderName: self.agreement_data.card.holderName,
onChange: function (state, component) {
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'
typeof state.data.paymentMethod.encryptedSecurityCode !==
'undefined'
) {
self.encryptedCreditCardVerificationNumber = state.data.paymentMethod.encryptedSecurityCode;
}
} else {
self.encryptedCreditCardVerificationNumber = '';
if (self.agreement_data.variant != "maestro") {
if (self.agreement_data.variant != 'maestro') {
self.placeOrderAllowed(false);
isValid(false);
}
}
}
})
.mount(oneClickCardNode);
},
}).mount(oneClickCardNode);
window.adyencheckout = oneClickCard;
},
/**
* Based on the response we can start a 3DS2 validation or place the order
* @param responseJSON
*/
validateThreeDS2OrPlaceOrder: function (responseJSON, orderId) {
validateThreeDS2OrPlaceOrder: function(responseJSON, orderId) {
var self = this;
var response = JSON.parse(responseJSON);
if (!!response.threeDS2) {
// render component
self.renderThreeDS2Component(response.type, response.token, orderId);
self.renderThreeDS2Component(response.type, response.token,
orderId);
} else {
window.location.replace(url.build(window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl));
window.location.replace(url.build(
window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl));
}
},
/**
......@@ -323,33 +337,38 @@ define(
* @param type
* @param token
*/
renderThreeDS2Component: function (type, token, orderId) {
renderThreeDS2Component: function(type, token, orderId) {
var self = this;
var threeDS2Node = document.getElementById('threeDS2ContainerOneClick');
var threeDS2Node = document.getElementById(
'threeDS2ContainerOneClick');
if (type == "IdentifyShopper") {
self.threeDS2Component = checkout.create('threeDS2DeviceFingerprint', {
if (type == 'IdentifyShopper') {
self.threeDS2Component = checkout.create(
'threeDS2DeviceFingerprint', {
fingerprintToken: token,
onComplete: function (result) {
onComplete: function(result) {
var request = result.data;
request.orderId = orderId;
threeds2.processThreeDS2(request).done(function (responseJSON) {
self.validateThreeDS2OrPlaceOrder(responseJSON, orderId)
}).fail(function (result) {
errorProcessor.process(result, self.getMessageContainer());
threeds2.processThreeDS2(request).
done(function(responseJSON) {
self.validateThreeDS2OrPlaceOrder(responseJSON,
orderId);
}).
fail(function(result) {
errorProcessor.process(result,
self.getMessageContainer());
self.isPlaceOrderActionAllowed(true);
fullScreenLoader.stopLoader();
});
},
onError: function (error) {
onError: function(error) {
console.log(JSON.stringify(error));
}
},
});
} else if (type == "ChallengeShopper") {
} else if (type == 'ChallengeShopper') {
fullScreenLoader.stopLoader();
var popupModal = $('#threeDS2ModalOneClick').modal({
// disable user to hide popup
clickableOverlay: false,
......@@ -357,30 +376,34 @@ define(
innerScroll: false,
// empty buttons, we don't need that
buttons: [],
modalClass: 'threeDS2Modal'
modalClass: 'threeDS2Modal',
});
popupModal.modal("openModal");
popupModal.modal('openModal');
self.threeDS2Component = checkout
.create('threeDS2Challenge', {
self.threeDS2Component = checkout.create('threeDS2Challenge',
{
challengeToken: token,
onComplete: function (result) {
popupModal.modal("closeModal");
onComplete: function(result) {
popupModal.modal('closeModal');
fullScreenLoader.startLoader();
var request = result.data;
request.orderId = orderId;
threeds2.processThreeDS2(request).done(function (responseJSON) {
self.validateThreeDS2OrPlaceOrder(responseJSON, orderId)
}).fail(function (result) {
errorProcessor.process(result, self.getMessageContainer());
threeds2.processThreeDS2(request).
done(function(responseJSON) {
self.validateThreeDS2OrPlaceOrder(responseJSON,
orderId);
}).
fail(function(result) {
errorProcessor.process(result,
self.getMessageContainer());
self.isPlaceOrderActionAllowed(true);
fullScreenLoader.stopLoader();
});
},
onError: function (error) {
onError: function(error) {
console.log(JSON.stringify(error));
}
},
});
}
......@@ -391,12 +414,12 @@ define(
*
* @returns {{method: *, additional_data: {variant: *, recurring_detail_reference: *, number_of_installments: *, cvc: (string|*), expiryMonth: *, expiryYear: *}}}
*/
getData: function () {
getData: function() {
var self = this;
var browserInfo = threeDS2Utils.getBrowserInfo();
return {
"method": self.method,
'method': self.method,
additional_data: {
variant: variant(),
recurring_detail_reference: recurringDetailReference(),
......@@ -408,11 +431,11 @@ define(
screen_width: browserInfo.screenWidth,
screen_height: browserInfo.screenHeight,
timezone_offset: browserInfo.timeZoneOffset,
language: browserInfo.language
}
language: browserInfo.language,
},
};
},
validate: function () {
validate: function() {
var code = self.item.method;
var value = this.value;
......@@ -420,42 +443,45 @@ define(
var form = 'form[data-role=' + codeValue + ']';
var validate = $(form).validation() && $(form).validation('isValid');
var validate = $(form).validation() &&
$(form).validation('isValid');
// bcmc does not have any cvc
if (!validate || (isValid() == false && variant() != "bcmc" && variant() != "maestro")) {
if (!validate ||
(isValid() == false && variant() != 'bcmc' && variant() !=
'maestro')) {
return false;
}
return true;
},
getCode: function () {
getCode: function() {
return self.item.method;
},
hasVerification: function () {
return self.hasVerification()
hasVerification: function() {
return self.hasVerification();
},
getMessageName: function () {
getMessageName: function() {
return 'messages-' + value.reference_id;
},
getMessageContainer: function () {
getMessageContainer: function() {
return messageContainer;
},
getOriginKey: function () {
getOriginKey: function() {
return self.getOriginKey();
},
isPlaceOrderActionAllowed: function () {
isPlaceOrderActionAllowed: function() {
return self.isPlaceOrderActionAllowed(); // needed for placeOrder method
},
afterPlaceOrder: function () {
afterPlaceOrder: function() {
return self.afterPlaceOrder(); // needed for placeOrder method
},
getPlaceOrderDeferredObject: function () {
getPlaceOrderDeferredObject: function() {
return $.when(
placeOrderAction(this.getData(), this.getMessageContainer())
placeOrderAction(this.getData(), this.getMessageContainer()),
);
}
}
},
};
});
return paymentList;
......@@ -465,16 +491,16 @@ define(
*
* @returns {boolean}
*/
selectBillingAgreement: function () {
selectBillingAgreement: function() {
var self = this;
// set payment method data
var data = {
"method": self.method,
"po_number": null,
"additional_data": {
recurring_detail_reference: self.value
}
'method': self.method,
'po_number': null,
'additional_data': {
recurring_detail_reference: self.value,
},
};
// set the brandCode
......@@ -489,7 +515,7 @@ define(
return true;
},
isBillingAgreementChecked: ko.computed(function () {
isBillingAgreementChecked: ko.computed(function() {
if (!quote.paymentMethod()) {
return null;
......@@ -502,45 +528,47 @@ define(
}),
placeOrderHandler: null,
validateHandler: null,
setPlaceOrderHandler: function (handler) {
setPlaceOrderHandler: function(handler) {
this.placeOrderHandler = handler;
},
setValidateHandler: function (handler) {
setValidateHandler: function(handler) {
this.validateHandler = handler;
},
getPlaceOrderUrl: function () {
getPlaceOrderUrl: function() {
return window.checkoutConfig.payment.iframe.placeOrderUrl[this.getCode()];
},
getCode: function () {
getCode: function() {
return window.checkoutConfig.payment.adyenOneclick.methodCode;
},
isActive: function () {
isActive: function() {
return true;
},
getControllerName: function () {
getControllerName: function() {
return window.checkoutConfig.payment.iframe.controllerName[this.getCode()];
},
context: function () {
context: function() {
return this;
},
canCreateBillingAgreement: function () {
canCreateBillingAgreement: function() {
return window.checkoutConfig.payment.adyenCc.canCreateBillingAgreement;
},
isShowLegend: function () {
isShowLegend: function() {
return true;
},
hasVerification: function () {
hasVerification: function() {
return window.checkoutConfig.payment.adyenOneclick.hasCustomerInteraction;
},
getLocale: function () {
getLocale: function() {
return window.checkoutConfig.payment.adyenOneclick.locale;
},
getOriginKey: function () {
getOriginKey: function() {
return window.checkoutConfig.payment.adyen.originKey;
},
getCheckoutEnvironment: function () {
getCheckoutEnvironment: function() {
return window.checkoutConfig.payment.adyen.checkoutEnvironment;
}
},
});
}
);
}
)
;
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