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

Add the AdyenComponent var in the requireJS paramas

view/frontend/web/js/view/payment/method-renderer/adyen-cc-method.js

@@ -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

@@ -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

@@ -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

@@ -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;
+    },
+  });
+}
+
+)
+;