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
Hide 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
......@@ -24,199 +24,213 @@
/*global define*/
define(
[
'ko',
'jquery',
'Magento_Checkout/js/view/payment/default',
'Magento_Checkout/js/action/place-order',
'Magento_Checkout/js/model/payment/additional-validators',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/url-builder',
'Magento_Checkout/js/model/full-screen-loader',
'mage/url',
'Magento_Vault/js/view/payment/vault-enabler',
'adyenCheckout'
'ko',
'jquery',
'Magento_Checkout/js/view/payment/default',
'Magento_Checkout/js/action/place-order',
'Magento_Checkout/js/model/payment/additional-validators',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/url-builder',
'Magento_Checkout/js/model/full-screen-loader',
'mage/url',
'Magento_Vault/js/view/payment/vault-enabler',
'adyenCheckout',
'Adyen_Payment/js/bundle',
],
function (ko, $, Component, placeOrderAction, additionalValidators, quote, urlBuilder, fullScreenLoader, url, VaultEnabler, AdyenCheckout) {
'use strict';
function(
ko,
$,
Component,
placeOrderAction,
additionalValidators,
quote,
urlBuilder,
fullScreenLoader,
url,
VaultEnabler,
AdyenCheckout,
AdyenComponent,
) {
'use strict';
/**
* Shareble adyen checkout component
* @type {AdyenCheckout}
*/
var checkoutComponent;
return Component.extend({
self: this,
defaults: {
template: 'Adyen_Payment/payment/google-pay-form',
googlePayToken: null,
googlePayAllowed: null,
},
/**
* Shareble adyen checkout component
* @type {AdyenCheckout}
* @returns {Boolean}
*/
var checkoutComponent;
return Component.extend({
self: this,
defaults: {
template: 'Adyen_Payment/payment/google-pay-form',
googlePayToken: null,
googlePayAllowed: null
},
/**
* @returns {Boolean}
*/
isShowLegend: function () {
return true;
},
setPlaceOrderHandler: function (handler) {
this.placeOrderHandler = handler;
},
setValidateHandler: function (handler) {
this.validateHandler = handler;
},
getCode: function () {
return 'adyen_google_pay';
},
isActive: function () {
return true;
},
initObservable: function () {
this._super()
.observe([
'googlePayToken',
'googlePayAllowed'
]);
return this;
}, initialize: function () {
var self = this;
this.additionalValidators = additionalValidators;
this.vaultEnabler = new VaultEnabler();
this.vaultEnabler.setPaymentCode(this.getVaultCode());
this.vaultEnabler.isActivePaymentTokenEnabler(false);
this._super();
},
isShowLegend: function() {
return true;
},
setPlaceOrderHandler: function(handler) {
this.placeOrderHandler = handler;
},
setValidateHandler: function(handler) {
this.validateHandler = handler;
},
getCode: function() {
return 'adyen_google_pay';
},
isActive: function() {
return true;
},
initObservable: function() {
this._super().observe([
'googlePayToken',
'googlePayAllowed',
]);
return this;
}, initialize: function() {
var self = this;
this.additionalValidators = additionalValidators;
this.vaultEnabler = new VaultEnabler();
this.vaultEnabler.setPaymentCode(this.getVaultCode());
this.vaultEnabler.isActivePaymentTokenEnabler(false);
this._super();
},
renderGooglePay: function () {
this.googlePayNode = document.getElementById('googlePay');
renderGooglePay: function() {
this.googlePayNode = document.getElementById('googlePay');
var self = this;
self.checkoutComponent = new AdyenCheckout({
locale: self.getLocale(),
originKey: self.getOriginKey(),
environment: self.getCheckoutEnvironment(),
risk: {
enabled: false
}
});
var googlepay = self.checkoutComponent.create('paywithgoogle', {
showPayButton: true,
environment: self.getCheckoutEnvironment().toUpperCase(),
var self = this;
self.checkoutComponent = new AdyenCheckout({
locale: self.getLocale(),
originKey: self.getOriginKey(),
environment: self.getCheckoutEnvironment(),
risk: {
enabled: false,
},
});
var googlepay = self.checkoutComponent.create('paywithgoogle', {
showPayButton: true,
environment: self.getCheckoutEnvironment().toUpperCase(),
configuration: {
// Adyen's merchant account
gatewayMerchantId: self.getMerchantAccount(),
configuration: {
// Adyen's merchant account
gatewayMerchantId: self.getMerchantAccount(),
// https://developers.google.com/pay/api/web/reference/object#MerchantInfo
merchantIdentifier: self.getMerchantIdentifier(),
merchantName: self.getMerchantAccount()
},
// https://developers.google.com/pay/api/web/reference/object#MerchantInfo
merchantIdentifier: self.getMerchantIdentifier(),
merchantName: self.getMerchantAccount(),
},
// Payment
amount: self.formatAmount(quote.totals().grand_total, self.getFormat()),
currency: quote.totals().quote_currency_code,
totalPriceStatus: 'FINAL',
// Payment
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) {
if (!!state.isValid) {
self.googlePayToken(state.data.paymentMethod.googlePayToken);
self.getPlaceOrderDeferredObject()
.fail(
function () {
fullScreenLoader.stopLoader();
self.isPlaceOrderActionAllowed(true);
}
).done(
function () {
self.afterPlaceOrder();
window.location.replace(url.build(window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl));
// empty onSubmit to resolve javascript issues.
onSubmit: function() {},
onChange: function(state) {
if (!!state.isValid) {
self.googlePayToken(state.data.paymentMethod.googlePayToken);
self.getPlaceOrderDeferredObject().fail(
function() {
fullScreenLoader.stopLoader();
self.isPlaceOrderActionAllowed(true);
},
).done(
function() {
self.afterPlaceOrder();
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
});
var promise = googlepay.isAvailable();
promise.then(function (success) {
self.googlePayAllowed(true);
googlepay.mount(self.googlePayNode);
$(self.googlePayNode).find('button').prop('disabled', true);
}, function (error) {
console.log(error);
self.googlePayAllowed(false);
});
},
isGooglePayAllowed: function () {
if (this.googlePayAllowed()) {
return true;
}
return false;
},
getMerchantAccount: function () {
return window.checkoutConfig.payment.adyenGooglePay.merchantAccount;
},
showLogo: function () {
return window.checkoutConfig.payment.adyen.showLogo;
},
getLocale: function () {
return window.checkoutConfig.payment.adyenGooglePay.locale;
},
getFormat: function () {
return window.checkoutConfig.payment.adyenGooglePay.format;
},
getMerchantIdentifier: function () {
return window.checkoutConfig.payment.adyenGooglePay.merchantIdentifier;
},
context: function () {
return this;
},
validate: function (hideErrors) {
return this.additionalValidators.validate(hideErrors);
},
getControllerName: function () {
return window.checkoutConfig.payment.iframe.controllerName[this.getCode()];
},
getPlaceOrderUrl: function () {
return window.checkoutConfig.payment.iframe.placeOrderUrl[this.getCode()];
},
/**
* Get data for place order
* @returns {{method: *}}
*/
getData: function () {
return {
'method': "adyen_google_pay",
'additional_data': {
'token': this.googlePayToken()
}
};
},
);
}
},
buttonColor: 'black', // default/black/white
buttonType: 'long', // long/short
showButton: true, // show or hide the Google Pay button
});
var promise = googlepay.isAvailable();
promise.then(function(success) {
self.googlePayAllowed(true);
googlepay.mount(self.googlePayNode);
$(self.googlePayNode).find('button').prop('disabled', true);
}, function(error) {
console.log(error);
self.googlePayAllowed(false);
});
},
isGooglePayAllowed: function() {
if (this.googlePayAllowed()) {
return true;
}
return false;
},
getMerchantAccount: function() {
return window.checkoutConfig.payment.adyenGooglePay.merchantAccount;
},
showLogo: function() {
return window.checkoutConfig.payment.adyen.showLogo;
},
getLocale: function() {
return window.checkoutConfig.payment.adyenGooglePay.locale;
},
getFormat: function() {
return window.checkoutConfig.payment.adyenGooglePay.format;
},
getMerchantIdentifier: function() {
return window.checkoutConfig.payment.adyenGooglePay.merchantIdentifier;
},
context: function() {
return this;
},
validate: function(hideErrors) {
return this.additionalValidators.validate(hideErrors);
},
getControllerName: function() {
return window.checkoutConfig.payment.iframe.controllerName[this.getCode()];
},
getPlaceOrderUrl: function() {
return window.checkoutConfig.payment.iframe.placeOrderUrl[this.getCode()];
},
/**
* Get data for place order
* @returns {{method: *}}
*/
getData: function() {
return {
'method': 'adyen_google_pay',
'additional_data': {
'token': this.googlePayToken(),
},
};
},
/**
* Return the formatted currency. Adyen accepts the currency in multiple formats.
* @param $amount
* @param $currency
* @return string
*/
formatAmount: function (amount, format) {
return Math.round(amount * (Math.pow(10, format)))
},
isVaultEnabled: function () {
return this.vaultEnabler.isVaultEnabled();
},
getVaultCode: function () {
return "adyen_google_pay_vault";
},
getOriginKey: function () {
return window.checkoutConfig.payment.adyen.originKey;
},
getCheckoutEnvironment: function () {
return window.checkoutConfig.payment.adyen.checkoutEnvironment;
}
});
}
/**
* Return the formatted currency. Adyen accepts the currency in multiple formats.
* @param $amount
* @param $currency
* @return string
*/
formatAmount: function(amount, format) {
return Math.round(amount * (Math.pow(10, format)));
},
isVaultEnabled: function() {
return this.vaultEnabler.isVaultEnabled();
},
getVaultCode: function() {
return 'adyen_google_pay_vault';
},
getOriginKey: function() {
return window.checkoutConfig.payment.adyen.originKey;
},
getCheckoutEnvironment: function() {
return window.checkoutConfig.payment.adyen.checkoutEnvironment;
},
});
},
);
view/frontend/web/js/view/payment/method-renderer/adyen-hpp-method.js
View file @ 935f8042
......@@ -21,791 +21,843 @@
*/
define(
[
'ko',
'jquery',
'Magento_Checkout/js/view/payment/default',
'Magento_Checkout/js/action/select-payment-method',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/checkout-data',
'Magento_Checkout/js/model/payment/additional-validators',
'mage/storage',
'Magento_Checkout/js/model/url-builder',
'Adyen_Payment/js/model/adyen-payment-service',
'Magento_Customer/js/model/customer',
'Magento_Checkout/js/model/full-screen-loader',
'Magento_Checkout/js/action/place-order',
'uiLayout',
'Magento_Ui/js/model/messages',
'Adyen_Payment/js/model/threeds2',
'Magento_Checkout/js/model/error-processor',
'adyenCheckout'
'ko',
'jquery',
'Magento_Checkout/js/view/payment/default',
'Magento_Checkout/js/action/select-payment-method',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/checkout-data',
'Magento_Checkout/js/model/payment/additional-validators',
'mage/storage',
'Magento_Checkout/js/model/url-builder',
'Adyen_Payment/js/model/adyen-payment-service',
'Magento_Customer/js/model/customer',
'Magento_Checkout/js/model/full-screen-loader',
'Magento_Checkout/js/action/place-order',
'uiLayout',
'Magento_Ui/js/model/messages',
'Adyen_Payment/js/model/threeds2',
'Magento_Checkout/js/model/error-processor',
'adyenCheckout',
'Adyen_Payment/js/bundle'
],
function (ko, $, Component, selectPaymentMethodAction, quote, checkoutData, additionalValidators, storage, urlBuilder, adyenPaymentService, customer, fullScreenLoader, placeOrderAction, layout, Messages, threeds2, errorProcessor, AdyenCheckout) {
'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 popupModal;
/**
* Shareble adyen checkout component
* @type {AdyenCheckout}
*/
var checkoutComponent;
var orderId;
return Component.extend({
self: this,
defaults: {
template: 'Adyen_Payment/payment/hpp-form',
brandCode: ''
},
initObservable: function () {
this._super()
.observe([
'brandCode',
'issuer',
'gender',
'dob',
'telephone',
'ownerName',
'ibanNumber',
'ssn',
'bankAccountNumber',
'bankLocationId'
]);
return this;
}, initialize: function () {
var self = this;
this._super();
fullScreenLoader.startLoader();
/**
* Create sherable checkout component
* @type {AdyenCheckout}
*/
self.checkoutComponent = new AdyenCheckout({
locale: self.getLocale(),
onAdditionalDetails: self.handleOnAdditionalDetails.bind(self),
originKey: self.getOriginKey(),
environment: self.getCheckoutEnvironment()
});
// reset variable:
adyenPaymentService.setPaymentMethods();
adyenPaymentService.retrieveAvailablePaymentMethods(function () {
var paymentMethods = adyenPaymentService.getAvailablePaymentMethods();
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'
};
// Load Ratepay script
var ratepayScriptTag = document.createElement('script');
ratepayScriptTag.src = "//d.ratepay.com/" + ratePayId + "/di.js";
ratepayScriptTag.type = "text/javascript";
document.body.appendChild(ratepayScriptTag);
}
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 popupModal;
/**
* Shareble adyen checkout component
* @type {AdyenCheckout}
*/
var checkoutComponent;
var orderId;
return Component.extend({
self: this,
defaults: {
template: 'Adyen_Payment/payment/hpp-form',
brandCode: '',
},
initObservable: function() {
this._super().observe([
'brandCode',
'issuer',
'gender',
'dob',
'telephone',
'ownerName',
'ibanNumber',
'ssn',
'bankAccountNumber',
'bankLocationId',
]);
return this;
}, initialize: function() {
var self = this;
this._super();
fullScreenLoader.startLoader();
/**
* Create sherable checkout component
* @type {AdyenCheckout}
*/
self.checkoutComponent = new AdyenCheckout({
locale: self.getLocale(),
onAdditionalDetails: self.handleOnAdditionalDetails.bind(self),
originKey: self.getOriginKey(),
environment: self.getCheckoutEnvironment(),
});
// reset variable:
adyenPaymentService.setPaymentMethods();
adyenPaymentService.retrieveAvailablePaymentMethods(function() {
var paymentMethods = adyenPaymentService.getAvailablePaymentMethods();
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',
};
// Load Ratepay script
var ratepayScriptTag = document.createElement('script');
ratepayScriptTag.src = '//d.ratepay.com/' + ratePayId + '/di.js';
ratepayScriptTag.type = 'text/javascript';
document.body.appendChild(ratepayScriptTag);
}
fullScreenLoader.stopLoader();
});
},
getAdyenHppPaymentMethods: function () {
var self = this;
var currentShippingAddressCountryCode = quote.shippingAddress().countryId;
// retrieve new payment methods if country code changed
if (shippingAddressCountryCode != currentShippingAddressCountryCode) {
fullScreenLoader.startLoader();
adyenPaymentService.retrieveAvailablePaymentMethods();
shippingAddressCountryCode = currentShippingAddressCountryCode;
fullScreenLoader.stopLoader();
}
fullScreenLoader.stopLoader();
});
},
getAdyenHppPaymentMethods: function() {
var self = this;
var currentShippingAddressCountryCode = quote.shippingAddress().countryId;
var paymentMethods = adyenPaymentService.getAvailablePaymentMethods();
// retrieve new payment methods if country code changed
if (shippingAddressCountryCode != currentShippingAddressCountryCode) {
fullScreenLoader.startLoader();
adyenPaymentService.retrieveAvailablePaymentMethods();
shippingAddressCountryCode = currentShippingAddressCountryCode;
fullScreenLoader.stopLoader();
}
var paymentList = _.reduce(paymentMethods, function (accumulator, value) {
var paymentMethods = adyenPaymentService.getAvailablePaymentMethods();
if (!self.isPaymentMethodSupported(value.type)) {
return accumulator;
}
var paymentList = _.reduce(paymentMethods,
function(accumulator, value) {
var messageContainer = new Messages();
var name = 'messages-' + self.getBrandCodeFromPaymentMethod(value);
var messagesComponent = {
parent: self.name,
name: name,
displayArea: name,
component: 'Magento_Ui/js/view/messages',
config: {
messageContainer: messageContainer
}
};
layout([messagesComponent]);
var result = {};
/**
* Returns the payment method's brand code (in checkout api it is the type)
* @returns {*}
*/
result.getBrandCode = function () {
return self.getBrandCodeFromPaymentMethod(value);
};
result.value = result.getBrandCode();
result.name = value;
result.method = self.item.method;
/**
* Observable to enable and disable place order buttons for payment methods
* Default value is true to be able to send the real hpp requiests that doesn't require any input
* @type {observable}
*/
result.placeOrderAllowed = ko.observable(true);
result.getCode = function () {
return self.item.method;
};
result.getMessageName = function () {
return 'messages-' + self.getBrandCodeFromPaymentMethod(value)
};
result.getMessageContainer = function () {
return messageContainer;
}
result.validate = function () {
return self.validate(result.getBrandCode());
};
result.placeRedirectOrder = function placeRedirectOrder(data) {
// Place Order but use our own redirect url after
fullScreenLoader.startLoader();
$('.hpp-message').slideUp();
self.isPlaceOrderActionAllowed(false);
$.when(
placeOrderAction(data, self.currentMessageContainer)
).fail(
function (response) {
self.isPlaceOrderActionAllowed(true);
fullScreenLoader.stopLoader();
self.showErrorMessage(response);
}
).done(
function (orderId) {
self.afterPlaceOrder();
adyenPaymentService.getOrderPaymentStatus(orderId)
.done(function (responseJSON) {
self.validateActionOrPlaceOrder(responseJSON, orderId);
});
}
)
};
/**
* Set and get if the place order action is allowed
* Sets the placeOrderAllowed observable and the original isPlaceOrderActionAllowed as well
* @param bool
* @returns {*}
*/
result.isPlaceOrderAllowed = function (bool) {
self.isPlaceOrderActionAllowed(bool);
return result.placeOrderAllowed(bool);
};
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;
}
if (!self.isPaymentMethodSupported(value.type)) {
return accumulator;
}
return false;
};
/**
* Checks if payment method is klarna
* @returns {boolean}
*/
result.isPaymentMethodKlarna = function () {
if (result.getBrandCode() === "klarna") {
return true;
}
var messageContainer = new Messages();
var name = 'messages-' +
self.getBrandCodeFromPaymentMethod(value);
var messagesComponent = {
parent: self.name,
name: name,
displayArea: name,
component: 'Magento_Ui/js/view/messages',
config: {
messageContainer: messageContainer,
},
};
layout([messagesComponent]);
return false;
};
/**
* Checks if payment method is after pay
* @returns {boolean}
*/
result.isPaymentMethodAfterPay = function () {
if (result.getBrandCode() === "afterpay_default") {
return true;
}
var result = {};
return false;
};
/**
* Checks if payment method is after pay touch
* @returns {boolean}
*/
result.isPaymentMethodAfterPayTouch = function () {
if (result.getBrandCode() === "afterpaytouch") {
return true;
}
/**
* Returns the payment method's brand code (in checkout api it is the type)
* @returns {*}
*/
result.getBrandCode = function() {
return self.getBrandCodeFromPaymentMethod(value);
};
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;
}
result.value = result.getBrandCode();
result.name = value;
result.method = self.item.method;
/**
* Observable to enable and disable place order buttons for payment methods
* Default value is true to be able to send the real hpp requiests that doesn't require any input
* @type {observable}
*/
result.placeOrderAllowed = ko.observable(true);
result.getCode = function() {
return self.item.method;
};
result.getMessageName = function() {
return 'messages-' +
self.getBrandCodeFromPaymentMethod(value);
};
result.getMessageContainer = function() {
return messageContainer;
};
result.validate = function() {
return self.validate(result.getBrandCode());
};
result.placeRedirectOrder = function placeRedirectOrder(data) {
// Place Order but use our own redirect url after
fullScreenLoader.startLoader();
$('.hpp-message').slideUp();
self.isPlaceOrderActionAllowed(false);
$.when(
placeOrderAction(data, self.currentMessageContainer),
).fail(
function(response) {
self.isPlaceOrderActionAllowed(true);
fullScreenLoader.stopLoader();
self.showErrorMessage(response);
},
).done(
function(orderId) {
self.afterPlaceOrder();
adyenPaymentService.getOrderPaymentStatus(orderId).
done(function(responseJSON) {
self.validateActionOrPlaceOrder(responseJSON,
orderId);
});
}
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;
}
/**
* Set and get if the place order action is allowed
* Sets the placeOrderAllowed observable and the original isPlaceOrderActionAllowed as well
* @param bool
* @returns {*}
*/
result.isPlaceOrderAllowed = function(bool) {
self.isPlaceOrderActionAllowed(bool);
return result.placeOrderAllowed(bool);
};
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 [];
};
/**
* 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 klarna
* @returns {boolean}
*/
result.isPaymentMethodKlarna = function() {
if (result.getBrandCode() === 'klarna') {
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 after pay
* @returns {boolean}
*/
result.isPaymentMethodAfterPay = function() {
if (result.getBrandCode() === 'afterpay_default') {
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;
};
/**
* Checks if payment method is after pay touch
* @returns {boolean}
*/
result.isPaymentMethodAfterPayTouch = function() {
if (result.getBrandCode() === 'afterpaytouch') {
return true;
}
return false;
};
/**
* Renders the secure fields,
* creates the ideal component,
* sets up the callbacks for ideal components and
*/
result.renderIdealComponent = function () {
result.isPlaceOrderAllowed(false);
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;
}
var idealNode = document.getElementById('iDealContainer');
var ideal = self.checkoutComponent.create('ideal', {
items: result.getIssuers(),
onChange: function (state) {
if (!!state.isValid) {
result.issuer(state.data.paymentMethod.issuer);
result.isPlaceOrderAllowed(true);
} else {
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);
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;
}
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);
}
}
});
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;
}
return false;
};
/**
* Returns the issuers for a payment method
* @returns {*}
*/
result.getIssuers = function() {
if (result.hasIssuersAvailable()) {
return value.details[result.findIssuersProperty()].items;
}
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'));
};
result.continueToAdyenBrandCode = function () {
// set payment method to adyen_hpp
var self = this;
if (this.validate() && additionalValidators.validate()) {
var data = {};
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();
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);
}
return [];
};
/**
* Checks if payment method is iDeal
* @returns {boolean}
*/
result.isIdeal = function() {
if (result.getBrandCode().indexOf('ideal') >= 0) {
return true;
}
return false;
}
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;
}
if (result.hasIssuersProperty()) {
if (!result.hasIssuersAvailable()) {
return false;
}
return false;
};
/**
* Renders the secure fields,
* creates the ideal component,
* sets up the callbacks for ideal components and
*/
result.renderIdealComponent = function() {
result.isPlaceOrderAllowed(false);
var idealNode = document.getElementById('iDealContainer');
var ideal = self.checkoutComponent.create('ideal', {
items: result.getIssuers(),
onChange: function(state) {
if (!!state.isValid) {
result.issuer(state.data.paymentMethod.issuer);
result.isPlaceOrderAllowed(true);
} else {
result.isPlaceOrderAllowed(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);
}
ideal.mount(idealNode);
};
accumulator.push(result);
return accumulator;
}, []);
/**
* 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);
}
},
});
sepaDirectDebit.mount(sepaDirectDebitNode);
};
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;
},
getGenderTypes: function () {
return _.map(window.checkoutConfig.payment.adyenHpp.genderTypes, function (value, key) {
return {
'key': key,
'value': value
}
});
},
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
}
/**
* 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);
};
// set the brandCode
brandCode(self.value);
/**
* 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'));
};
// set payment method
paymentMethod(self.method);
result.continueToAdyenBrandCode = function() {
// set payment method to adyen_hpp
var self = this;
if (this.validate() && additionalValidators.validate()) {
var data = {};
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();
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();
}
selectPaymentMethodAction(data);
checkoutData.setSelectedPaymentMethod(self.method);
data.additional_data = additionalData;
this.placeRedirectOrder(data);
}
return true;
},
/**
* 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");
$('.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>");
},
isBrandCodeChecked: ko.computed(function () {
return false;
};
if (!quote.paymentMethod()) {
return null;
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);
}
if (quote.paymentMethod().method == paymentMethod()) {
return brandCode();
}
return null;
}),
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) {
var self = this;
var response = JSON.parse(responseJSON);
if (!!response.action) {
// render component
self.orderId = orderId;
self.renderActionComponent(response.action);
} else {
$.mage.redirect(
window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl
);
}
},
/**
* Rendering the 3DS2.0 components
* To do the device fingerprint at the response of IdentifyShopper render the threeDS2DeviceFingerprint
* component
* To render the challenge for the customer at the response of ChallengeShopper render the
* threeDS2Challenge component
* Both of them is going to be rendered in a Magento dialog popup
*
* @param type
* @param token
*/
renderActionComponent: function (action) {
var self = this;
var actionNode = document.getElementById('ActionContainer');
fullScreenLoader.stopLoader();
self.popupModal = $('#ActionModal').modal({
// disable user to hide popup
clickableOverlay: false,
responsive: true,
innerScroll: false,
// empty buttons, we don't need that
buttons: [],
modalClass: 'ActionModal'
});
self.popupModal.modal("openModal");
self.actionComponent = self.checkoutComponent.createFromAction(action).mount(actionNode);
},
handleOnAdditionalDetails: function (state, component) {
var self = this;
// call endpoint with state.data
var request = state.data;
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 () {
$.mage.redirect(
window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl
);
}).fail(function (response) {
fullScreenLoader.stopLoader();
self.closeModal(self.popupModal);
errorProcessor.process(response, self.currentMessageContainer);
self.isPlaceOrderActionAllowed(true);
self.showErrorMessage(response);
});
},
/**
* Issue with the default currentMessageContainer needs to be resolved for now just throw manually the eror message
* @param response
*/
showErrorMessage: function (response) {
if (!!response['responseJSON'].parameters) {
$("#messages-" + brandCode()).text((response['responseJSON'].message).replace('%1', response['responseJSON'].parameters[0])).slideDown();
} else {
$("#messages-" + brandCode()).text(response['responseJSON'].message).slideDown();
}
accumulator.push(result);
return accumulator;
}, []);
setTimeout(function () {
$("#messages-" + brandCode()).slideUp();
}, 10000);
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;
},
getGenderTypes: function() {
return _.map(window.checkoutConfig.payment.adyenHpp.genderTypes,
function(value, key) {
return {
'key': key,
'value': value,
};
});
},
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,
},
validate: function (brandCode) {
var form = '#payment_form_' + this.getCode() + '_' + brandCode;
var validate = $(form).validation() && $(form).validation('isValid');
};
if (!validate) {
return false;
}
// set the brandCode
brandCode(self.value);
return true;
},
/**
* Returns the payment method's brand code using the payment method from the response object
* (in checkout api it is the type)
* @returns {*}
*/
getBrandCodeFromPaymentMethod: function (paymentMethod) {
if (typeof paymentMethod.type !== 'undefined') {
return paymentMethod.type;
}
// set payment method
paymentMethod(self.method);
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
* @param details
* @returns {Array}
*/
filterOutOpenInvoiceComponentDetails: function (details) {
var self = this;
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') {
return detail;
}
});
if (!!detailObject) {
return {
"key": parentDetail.key,
"type": parentDetail.type,
"details": self.filterUndefinedItemsInArray(detailObject)
};
}
}
});
selectPaymentMethodAction(data);
checkoutData.setSelectedPaymentMethod(self.method);
return self.filterUndefinedItemsInArray(filteredDetails);
},
/**
* Helper function to filter out the undefined items from an array
* @param arr
* @returns {*}
*/
filterUndefinedItemsInArray: function (arr) {
return arr.filter(function (item) {
return typeof item !== 'undefined';
});
},
getOriginKey: function () {
return window.checkoutConfig.payment.adyen.originKey;
},
getCheckoutEnvironment: function () {
return window.checkoutConfig.payment.adyen.checkoutEnvironment;
return true;
},
/**
* 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');
$('.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>');
},
isBrandCodeChecked: ko.computed(function() {
if (!quote.paymentMethod()) {
return null;
}
if (quote.paymentMethod().method == paymentMethod()) {
return brandCode();
}
return null;
}),
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) {
var self = this;
var response = JSON.parse(responseJSON);
if (!!response.action) {
// render component
self.orderId = orderId;
self.renderActionComponent(response.action);
} else {
$.mage.redirect(
window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl,
);
}
},
/**
* Rendering the 3DS2.0 components
* To do the device fingerprint at the response of IdentifyShopper render the threeDS2DeviceFingerprint
* component
* To render the challenge for the customer at the response of ChallengeShopper render the
* threeDS2Challenge component
* Both of them is going to be rendered in a Magento dialog popup
*
* @param type
* @param token
*/
renderActionComponent: function(action) {
var self = this;
var actionNode = document.getElementById('ActionContainer');
fullScreenLoader.stopLoader();
self.popupModal = $('#ActionModal').modal({
// disable user to hide popup
clickableOverlay: false,
responsive: true,
innerScroll: false,
// empty buttons, we don't need that
buttons: [],
modalClass: 'ActionModal',
});
self.popupModal.modal('openModal');
self.actionComponent = self.checkoutComponent.createFromAction(
action).mount(actionNode);
},
handleOnAdditionalDetails: function(state, component) {
var self = this;
// call endpoint with state.data
var request = state.data;
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() {
$.mage.redirect(
window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl,
);
}).fail(function(response) {
fullScreenLoader.stopLoader();
self.closeModal(self.popupModal);
errorProcessor.process(response, self.currentMessageContainer);
self.isPlaceOrderActionAllowed(true);
self.showErrorMessage(response);
});
},
/**
* Issue with the default currentMessageContainer needs to be resolved for now just throw manually the eror message
* @param response
*/
showErrorMessage: function(response) {
if (!!response['responseJSON'].parameters) {
$('#messages-' + brandCode()).
text((response['responseJSON'].message).replace('%1',
response['responseJSON'].parameters[0])).
slideDown();
} else {
$('#messages-' + brandCode()).
text(response['responseJSON'].message).
slideDown();
}
setTimeout(function() {
$('#messages-' + brandCode()).slideUp();
}, 10000);
},
validate: function(brandCode) {
var form = '#payment_form_' + this.getCode() + '_' + brandCode;
var validate = $(form).validation() && $(form).validation('isValid');
if (!validate) {
return false;
}
return true;
},
/**
* Returns the payment method's brand code using the payment method from the response object
* (in checkout api it is the type)
* @returns {*}
*/
getBrandCodeFromPaymentMethod: function(paymentMethod) {
if (typeof paymentMethod.type !== 'undefined') {
return paymentMethod.type;
}
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
* @param details
* @returns {Array}
*/
filterOutOpenInvoiceComponentDetails: function(details) {
var self = this;
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') {
return detail;
}
});
if (!!detailObject) {
return {
'key': parentDetail.key,
'type': parentDetail.type,
'details': self.filterUndefinedItemsInArray(detailObject),
};
}
}
});
}
});
return self.filterUndefinedItemsInArray(filteredDetails);
},
/**
* Helper function to filter out the undefined items from an array
* @param arr
* @returns {*}
*/
filterUndefinedItemsInArray: function(arr) {
return arr.filter(function(item) {
return typeof item !== 'undefined';
});
},
getOriginKey: function() {
return window.checkoutConfig.payment.adyen.originKey;
},
getCheckoutEnvironment: function() {
return window.checkoutConfig.payment.adyen.checkoutEnvironment;
},
});
},
);
view/frontend/web/js/view/payment/method-renderer/adyen-oneclick-method.js
View file @ 935f8042
......@@ -21,526 +21,554 @@
*/
define(
[
'ko',
'underscore',
'jquery',
'Magento_Payment/js/view/payment/cc-form',
'Magento_Checkout/js/action/select-payment-method',
'Magento_Checkout/js/model/payment/additional-validators',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/checkout-data',
'Magento_Checkout/js/action/redirect-on-success',
'uiLayout',
'Magento_Ui/js/model/messages',
'mage/url',
'Adyen_Payment/js/threeds2-js-utils',
'Magento_Checkout/js/model/full-screen-loader',
'Magento_Paypal/js/action/set-payment-method',
'Magento_Checkout/js/model/url-builder',
'mage/storage',
'Magento_Checkout/js/action/place-order',
'Adyen_Payment/js/model/threeds2',
'Magento_Checkout/js/model/error-processor',
'Adyen_Payment/js/model/adyen-payment-service',
'adyenCheckout'
],
function (
ko,
_,
$,
Component,
selectPaymentMethodAction,
additionalValidators,
quote,
checkoutData,
redirectOnSuccessAction,
layout,
Messages,
url,
threeDS2Utils,
fullScreenLoader,
setPaymentMethodAction,
urlBuilder,
storage,
placeOrderAction,
threeds2,
errorProcessor,
adyenPaymentService,
AdyenCheckout
) {
'use strict';
var messageComponents;
var recurringDetailReference = ko.observable(null);
var variant = ko.observable(null);
var paymentMethod = ko.observable(null);
var numberOfInstallments = ko.observable(null);
var isValid = ko.observable(false);
return Component.extend({
isPlaceOrderActionAllowed: ko.observable(quote.billingAddress() != null),
defaults: {
template: 'Adyen_Payment/payment/oneclick-form',
recurringDetailReference: '',
variant: '',
numberOfInstallments: ''
},
initObservable: function () {
this._super()
.observe([
'recurringDetailReference',
'creditCardType',
'encryptedCreditCardVerificationNumber',
'variant',
'numberOfInstallments'
]);
return this;
},
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) {
var messageContainer = new Messages();
var name = 'messages-' + value.reference_id;
var messagesComponent = {
parent: self.name,
name: 'messages-' + value.reference_id,
// name: self.name + '.messages',
displayArea: 'messages-' + value.reference_id,
component: 'Magento_Ui/js/view/messages',
config: {
messageContainer: messageContainer
}
};
layout([messagesComponent]);
messageComponents[name] = messageContainer;
});
this.messageComponents = messageComponents;
},
/**
* List all Adyen billing agreements
* Set up installments
*
* @returns {Array}
*/
getAdyenBillingAgreements: function () {
var self = this;
// shareable adyen checkout component
var checkout = new AdyenCheckout({
locale: self.getLocale(),
originKey: self.getOriginKey(),
environment: self.getCheckoutEnvironment(),
risk: {
enabled: false
}
});
// convert to list so you can iterate
var paymentList = _.map(window.checkoutConfig.payment.adyenOneclick.billingAgreements, function (value) {
var creditCardExpMonth, creditCardExpYear = false;
if (value.agreement_data.card) {
creditCardExpMonth = value.agreement_data.card.expiryMonth;
creditCardExpYear = value.agreement_data.card.expiryYear;
}
'ko',
'underscore',
'jquery',
'Magento_Payment/js/view/payment/cc-form',
'Magento_Checkout/js/action/select-payment-method',
'Magento_Checkout/js/model/payment/additional-validators',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/checkout-data',
'Magento_Checkout/js/action/redirect-on-success',
'uiLayout',
'Magento_Ui/js/model/messages',
'mage/url',
'Adyen_Payment/js/threeds2-js-utils',
'Magento_Checkout/js/model/full-screen-loader',
'Magento_Paypal/js/action/set-payment-method',
'Magento_Checkout/js/model/url-builder',
'mage/storage',
'Magento_Checkout/js/action/place-order',
'Adyen_Payment/js/model/threeds2',
'Magento_Checkout/js/model/error-processor',
'Adyen_Payment/js/model/adyen-payment-service',
'adyenCheckout',
]
'Adyen_Payment/js/bundle';
],
function(
ko,
_,
$,
Component,
selectPaymentMethodAction,
additionalValidators,
quote,
checkoutData,
redirectOnSuccessAction,
layout,
Messages,
url,
threeDS2Utils,
fullScreenLoader,
setPaymentMethodAction,
urlBuilder,
storage,
placeOrderAction,
threeds2,
errorProcessor,
adyenPaymentService,
AdyenCheckout,
AdyenComponent,
) {
'use strict';
var messageComponents;
var recurringDetailReference = ko.observable(null);
var variant = ko.observable(null);
var paymentMethod = ko.observable(null);
var numberOfInstallments = ko.observable(null);
var isValid = ko.observable(false);
return Component.extend({
isPlaceOrderActionAllowed: ko.observable(quote.billingAddress() != null),
defaults: {
template: 'Adyen_Payment/payment/oneclick-form',
recurringDetailReference: '',
variant: '',
numberOfInstallments: '',
},
initObservable: function() {
this._super().observe([
'recurringDetailReference',
'creditCardType',
'encryptedCreditCardVerificationNumber',
'variant',
'numberOfInstallments',
]);
return this;
},
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) {
var messageContainer = new Messages();
var name = 'messages-' + value.reference_id;
var messagesComponent = {
parent: self.name,
name: 'messages-' + value.reference_id,
// name: self.name + '.messages',
displayArea: 'messages-' + value.reference_id,
component: 'Magento_Ui/js/view/messages',
config: {
messageContainer: messageContainer,
},
};
layout([messagesComponent]);
messageComponents[name] = messageContainer;
});
this.messageComponents = messageComponents;
},
/**
* List all Adyen billing agreements
* Set up installments
*
* @returns {Array}
*/
getAdyenBillingAgreements: function() {
var self = this;
// shareable adyen checkout component
var checkout = new AdyenCheckout({
locale: self.getLocale(),
originKey: self.getOriginKey(),
environment: self.getCheckoutEnvironment(),
risk: {
enabled: false,
},
});
// pre-define installments if they are set
var i, installments = [];
var grandTotal = quote.totals().grand_total;
var dividedString = "";
var dividedAmount = 0;
// convert to list so you can iterate
var paymentList = _.map(
window.checkoutConfig.payment.adyenOneclick.billingAgreements,
function(value) {
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;
var creditCardExpMonth, creditCardExpYear = false;
installments.push({
key: [dividedString],
value: value.number_of_installments[i]
});
}
}
if (value.agreement_data.card) {
creditCardExpMonth = value.agreement_data.card.expiryMonth;
creditCardExpYear = value.agreement_data.card.expiryYear;
}
var messageContainer = self.messageComponents['messages-' + value.reference_id];
// 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],
});
}
}
// for recurring enable the placeOrder button at all times
var placeOrderAllowed = true;
if (self.hasVerification()) {
placeOrderAllowed = false;
} else {
// for recurring cards there is no validation needed
isValid(true);
}
var messageContainer = self.messageComponents['messages-' +
value.reference_id];
return {
'label': value.agreement_label,
'value': value.reference_id,
'agreement_data': value.agreement_data,
'logo': value.logo,
'installment': '',
'number_of_installments': value.number_of_installments,
'method': self.item.method,
'encryptedCreditCardVerificationNumber': '',
'creditCardExpMonth': ko.observable(creditCardExpMonth),
'creditCardExpYear': ko.observable(creditCardExpYear),
'getInstallments': ko.observableArray(installments),
'placeOrderAllowed': ko.observable(placeOrderAllowed),
isButtonActive: function () {
return self.isActive() && this.getCode() == self.isChecked() && self.isBillingAgreementChecked() && this.placeOrderAllowed() && self.isPlaceOrderActionAllowed();
},
/**
* Custom place order function
*
* @override
*
* @param data
* @param event
* @returns {boolean}
*/
placeOrder: function (data, event) {
var self = this;
if (event) {
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()) {
fullScreenLoader.startLoader();
self.isPlaceOrderActionAllowed(false);
self.getPlaceOrderDeferredObject()
.fail(
function () {
fullScreenLoader.stopLoader();
self.isPlaceOrderActionAllowed(true);
}
).done(
function (orderId) {
self.afterPlaceOrder();
adyenPaymentService.getOrderPaymentStatus(orderId)
.done(function (responseJSON) {
self.validateThreeDS2OrPlaceOrder(responseJSON, orderId)
});
}
);
}
return false;
},
// for recurring enable the placeOrder button at all times
var placeOrderAllowed = true;
if (self.hasVerification()) {
placeOrderAllowed = false;
} else {
// for recurring cards there is no validation needed
isValid(true);
}
/**
* Renders the secure CVC field,
* creates the card component,
* sets up the callbacks for card components
*/
renderSecureCVC: function () {
var self = this;
if (!self.getOriginKey()) {
return;
}
var oneClickCardNode = document.getElementById('cvcContainer-' + self.value);
var hideCVC = false;
// hide cvc if contract has been stored as recurring
if (!this.hasVerification()) {
hideCVC = true;
}
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) {
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);
}
}
}
})
.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) {
var self = this;
var response = JSON.parse(responseJSON);
if (!!response.threeDS2) {
// render component
self.renderThreeDS2Component(response.type, response.token, orderId);
} else {
window.location.replace(url.build(window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl));
}
},
/**
* Rendering the 3DS2.0 components
* To do the device fingerprint at the response of IdentifyShopper render the threeDS2DeviceFingerprint
* component
* To render the challenge for the customer at the response of ChallengeShopper render the
* threeDS2Challenge component
* Both of them is going to be rendered in a Magento dialog popup
*
* @param type
* @param token
*/
renderThreeDS2Component: function (type, token, orderId) {
var self = this;
var threeDS2Node = document.getElementById('threeDS2ContainerOneClick');
if (type == "IdentifyShopper") {
self.threeDS2Component = checkout.create('threeDS2DeviceFingerprint', {
fingerprintToken: token,
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());
self.isPlaceOrderActionAllowed(true);
fullScreenLoader.stopLoader();
});
},
onError: function (error) {
console.log(JSON.stringify(error));
}
});
} else if (type == "ChallengeShopper") {
fullScreenLoader.stopLoader();
return {
'label': value.agreement_label,
'value': value.reference_id,
'agreement_data': value.agreement_data,
'logo': value.logo,
'installment': '',
'number_of_installments': value.number_of_installments,
'method': self.item.method,
'encryptedCreditCardVerificationNumber': '',
'creditCardExpMonth': ko.observable(creditCardExpMonth),
'creditCardExpYear': ko.observable(creditCardExpYear),
'getInstallments': ko.observableArray(installments),
'placeOrderAllowed': ko.observable(placeOrderAllowed),
isButtonActive: function() {
return self.isActive() && this.getCode() == self.isChecked() &&
self.isBillingAgreementChecked() &&
this.placeOrderAllowed() &&
self.isPlaceOrderActionAllowed();
},
/**
* Custom place order function
*
* @override
*
* @param data
* @param event
* @returns {boolean}
*/
placeOrder: function(data, event) {
var self = this;
if (event) {
event.preventDefault();
}
// only use installments for cards
if (self.agreement_data.card) {
if (self.hasVerification()) {
var options = {enableValidations: false};
}
numberOfInstallments(self.installment);
}
var popupModal = $('#threeDS2ModalOneClick').modal({
// disable user to hide popup
clickableOverlay: false,
responsive: true,
innerScroll: false,
// empty buttons, we don't need that
buttons: [],
modalClass: 'threeDS2Modal'
});
popupModal.modal("openModal");
self.threeDS2Component = checkout
.create('threeDS2Challenge', {
challengeToken: token,
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());
self.isPlaceOrderActionAllowed(true);
fullScreenLoader.stopLoader();
});
},
onError: function (error) {
console.log(JSON.stringify(error));
}
});
}
self.threeDS2Component.mount(threeDS2Node);
},
/**
* 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: *}}}
*/
getData: function () {
var self = this;
var browserInfo = threeDS2Utils.getBrowserInfo();
return {
"method": self.method,
additional_data: {
variant: variant(),
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
}
};
},
validate: function () {
if (this.validate() && additionalValidators.validate()) {
fullScreenLoader.startLoader();
self.isPlaceOrderActionAllowed(false);
self.getPlaceOrderDeferredObject().fail(
function() {
fullScreenLoader.stopLoader();
self.isPlaceOrderActionAllowed(true);
},
).done(
function(orderId) {
self.afterPlaceOrder();
adyenPaymentService.getOrderPaymentStatus(orderId).
done(function(responseJSON) {
self.validateThreeDS2OrPlaceOrder(responseJSON,
orderId);
});
},
);
}
return false;
},
/**
* Renders the secure CVC field,
* creates the card component,
* sets up the callbacks for card components
*/
renderSecureCVC: function() {
var self = this;
var code = self.item.method;
var value = this.value;
var codeValue = code + '_' + value;
if (!self.getOriginKey()) {
return;
}
var oneClickCardNode = document.getElementById(
'cvcContainer-' + self.value);
var form = 'form[data-role=' + codeValue + ']';
var hideCVC = false;
// hide cvc if contract has been stored as recurring
if (!this.hasVerification()) {
hideCVC = true;
}
var validate = $(form).validation() && $(form).validation('isValid');
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) {
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 = '';
// bcmc does not have any cvc
if (!validate || (isValid() == false && variant() != "bcmc" && variant() != "maestro")) {
return false;
}
if (self.agreement_data.variant != 'maestro') {
self.placeOrderAllowed(false);
isValid(false);
}
}
},
}).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) {
var self = this;
var response = JSON.parse(responseJSON);
if (!!response.threeDS2) {
// render component
self.renderThreeDS2Component(response.type, response.token,
orderId);
} else {
window.location.replace(url.build(
window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl));
}
},
/**
* Rendering the 3DS2.0 components
* To do the device fingerprint at the response of IdentifyShopper render the threeDS2DeviceFingerprint
* component
* To render the challenge for the customer at the response of ChallengeShopper render the
* threeDS2Challenge component
* Both of them is going to be rendered in a Magento dialog popup
*
* @param type
* @param token
*/
renderThreeDS2Component: function(type, token, orderId) {
var self = this;
return true;
},
getCode: function () {
return self.item.method;
},
hasVerification: function () {
return self.hasVerification()
},
getMessageName: function () {
return 'messages-' + value.reference_id;
},
getMessageContainer: function () {
return messageContainer;
var threeDS2Node = document.getElementById(
'threeDS2ContainerOneClick');
if (type == 'IdentifyShopper') {
self.threeDS2Component = checkout.create(
'threeDS2DeviceFingerprint', {
fingerprintToken: token,
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());
self.isPlaceOrderActionAllowed(true);
fullScreenLoader.stopLoader();
});
},
getOriginKey: function () {
return self.getOriginKey();
onError: function(error) {
console.log(JSON.stringify(error));
},
isPlaceOrderActionAllowed: function () {
return self.isPlaceOrderActionAllowed(); // needed for placeOrder method
});
} else if (type == 'ChallengeShopper') {
fullScreenLoader.stopLoader();
var popupModal = $('#threeDS2ModalOneClick').modal({
// disable user to hide popup
clickableOverlay: false,
responsive: true,
innerScroll: false,
// empty buttons, we don't need that
buttons: [],
modalClass: 'threeDS2Modal',
});
popupModal.modal('openModal');
self.threeDS2Component = checkout.create('threeDS2Challenge',
{
challengeToken: token,
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());
self.isPlaceOrderActionAllowed(true);
fullScreenLoader.stopLoader();
});
},
afterPlaceOrder: function () {
return self.afterPlaceOrder(); // needed for placeOrder method
onError: function(error) {
console.log(JSON.stringify(error));
},
getPlaceOrderDeferredObject: function () {
return $.when(
placeOrderAction(this.getData(), this.getMessageContainer())
);
}
}
});
});
}
return paymentList;
},
/**
* Select a billing agreement (stored one click payment method) from the list
*
* @returns {boolean}
*/
selectBillingAgreement: function () {
self.threeDS2Component.mount(threeDS2Node);
},
/**
* 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: *}}}
*/
getData: function() {
var self = this;
// set payment method data
var data = {
"method": self.method,
"po_number": null,
"additional_data": {
recurring_detail_reference: self.value
}
var browserInfo = threeDS2Utils.getBrowserInfo();
return {
'method': self.method,
additional_data: {
variant: variant(),
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,
},
};
},
validate: function() {
// set the brandCode
recurringDetailReference(self.value);
variant(self.agreement_data.variant);
var code = self.item.method;
var value = this.value;
var codeValue = code + '_' + value;
// set payment method
paymentMethod(self.method);
var form = 'form[data-role=' + codeValue + ']';
selectPaymentMethodAction(data);
checkoutData.setSelectedPaymentMethod(self.method);
var validate = $(form).validation() &&
$(form).validation('isValid');
return true;
},
isBillingAgreementChecked: ko.computed(function () {
if (!quote.paymentMethod()) {
return null;
// bcmc does not have any cvc
if (!validate ||
(isValid() == false && variant() != 'bcmc' && variant() !=
'maestro')) {
return false;
}
if (quote.paymentMethod().method == paymentMethod()) {
return recurringDetailReference();
}
return null;
}),
placeOrderHandler: null,
validateHandler: null,
setPlaceOrderHandler: function (handler) {
this.placeOrderHandler = handler;
},
setValidateHandler: function (handler) {
this.validateHandler = handler;
},
getPlaceOrderUrl: function () {
return window.checkoutConfig.payment.iframe.placeOrderUrl[this.getCode()];
},
getCode: function () {
return window.checkoutConfig.payment.adyenOneclick.methodCode;
},
isActive: function () {
return true;
},
getControllerName: function () {
return window.checkoutConfig.payment.iframe.controllerName[this.getCode()];
},
context: function () {
return this;
},
canCreateBillingAgreement: function () {
return window.checkoutConfig.payment.adyenCc.canCreateBillingAgreement;
},
isShowLegend: function () {
return true;
},
hasVerification: function () {
return window.checkoutConfig.payment.adyenOneclick.hasCustomerInteraction;
},
getLocale: function () {
return window.checkoutConfig.payment.adyenOneclick.locale;
},
getOriginKey: function () {
return window.checkoutConfig.payment.adyen.originKey;
},
getCheckoutEnvironment: function () {
return window.checkoutConfig.payment.adyen.checkoutEnvironment;
}
});
}
);
},
getCode: function() {
return self.item.method;
},
hasVerification: function() {
return self.hasVerification();
},
getMessageName: function() {
return 'messages-' + value.reference_id;
},
getMessageContainer: function() {
return messageContainer;
},
getOriginKey: function() {
return self.getOriginKey();
},
isPlaceOrderActionAllowed: function() {
return self.isPlaceOrderActionAllowed(); // needed for placeOrder method
},
afterPlaceOrder: function() {
return self.afterPlaceOrder(); // needed for placeOrder method
},
getPlaceOrderDeferredObject: function() {
return $.when(
placeOrderAction(this.getData(), this.getMessageContainer()),
);
},
};
});
return paymentList;
},
/**
* Select a billing agreement (stored one click payment method) from the list
*
* @returns {boolean}
*/
selectBillingAgreement: function() {
var self = this;
// set payment method data
var data = {
'method': self.method,
'po_number': null,
'additional_data': {
recurring_detail_reference: self.value,
},
};
// set the brandCode
recurringDetailReference(self.value);
variant(self.agreement_data.variant);
// set payment method
paymentMethod(self.method);
selectPaymentMethodAction(data);
checkoutData.setSelectedPaymentMethod(self.method);
return true;
},
isBillingAgreementChecked: ko.computed(function() {
if (!quote.paymentMethod()) {
return null;
}
if (quote.paymentMethod().method == paymentMethod()) {
return recurringDetailReference();
}
return null;
}),
placeOrderHandler: null,
validateHandler: null,
setPlaceOrderHandler: function(handler) {
this.placeOrderHandler = handler;
},
setValidateHandler: function(handler) {
this.validateHandler = handler;
},
getPlaceOrderUrl: function() {
return window.checkoutConfig.payment.iframe.placeOrderUrl[this.getCode()];
},
getCode: function() {
return window.checkoutConfig.payment.adyenOneclick.methodCode;
},
isActive: function() {
return true;
},
getControllerName: function() {
return window.checkoutConfig.payment.iframe.controllerName[this.getCode()];
},
context: function() {
return this;
},
canCreateBillingAgreement: function() {
return window.checkoutConfig.payment.adyenCc.canCreateBillingAgreement;
},
isShowLegend: function() {
return true;
},
hasVerification: function() {
return window.checkoutConfig.payment.adyenOneclick.hasCustomerInteraction;
},
getLocale: function() {
return window.checkoutConfig.payment.adyenOneclick.locale;
},
getOriginKey: function() {
return window.checkoutConfig.payment.adyen.originKey;
},
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