Add iDeal component

Model/Ui/AdyenHppConfigProvider.php

@@ -35,34 +35,39 @@ class AdyenHppConfigProvider implements ConfigProviderInterface
     /**
      * @var PaymentHelper
      */
-    protected $_paymentHelper;
+    protected $paymentHelper;
 
     /**
      * @var \Adyen\Payment\Helper\Data
      */
-    protected $_adyenHelper;
+    protected $adyenHelper;
 
     /**
      * Request object
      *
      * @var \Magento\Framework\App\RequestInterface
      */
-    protected $_request;
+    protected $request;
 
     /**
      * @var \Magento\Framework\UrlInterface
      */
-    protected $_urlBuilder;
+    protected $urlBuilder;
 
     /**
      * @var \Magento\Customer\Model\Session
      */
-    protected $_customerSession;
+    protected $customerSession;
 
     /**
      * @var \Magento\Checkout\Model\Session
      */
-    protected $_session;
+    protected $session;
+
+	/**
+	 * @var \Magento\Store\Model\StoreManagerInterface
+	 */
+    protected $storeManager;
 
     /**
      * AdyenHppConfigProvider constructor.
@@ -80,14 +85,16 @@ class AdyenHppConfigProvider implements ConfigProviderInterface
         \Magento\Framework\App\RequestInterface $request,
         \Magento\Framework\UrlInterface $urlBuilder,
         \Magento\Customer\Model\Session $customerSession,
-        \Magento\Checkout\Model\Session $session
+        \Magento\Checkout\Model\Session $session,
+		\Magento\Store\Model\StoreManagerInterface $storeManager
     ) {
-        $this->_paymentHelper = $paymentHelper;
-        $this->_adyenHelper = $adyenHelper;
-        $this->_request = $request;
-        $this->_urlBuilder = $urlBuilder;
-        $this->_customerSession = $customerSession;
-        $this->_session = $session;
+        $this->paymentHelper = $paymentHelper;
+        $this->adyenHelper = $adyenHelper;
+        $this->request = $request;
+        $this->urlBuilder = $urlBuilder;
+        $this->customerSession = $customerSession;
+        $this->session = $session;
+        $this->storeManager = $storeManager;
     }
 
     /**
@@ -102,9 +109,9 @@ class AdyenHppConfigProvider implements ConfigProviderInterface
             'payment' => [
                 self::CODE => [
                     'isActive' => true,
-                    'redirectUrl' => $this->_urlBuilder->getUrl(
+                    'redirectUrl' => $this->urlBuilder->getUrl(
                         'adyen/process/redirect',
-                        ['_secure' => $this->_getRequest()->isSecure()]
+                        ['_secure' => $this->getRequest()->isSecure()]
                     )
                 ]
             ]
@@ -114,19 +121,23 @@ class AdyenHppConfigProvider implements ConfigProviderInterface
         $dob = "";
 
         // get customer
-        if ($this->_customerSession->isLoggedIn()) {
+        if ($this->customerSession->isLoggedIn()) {
             $gender = \Adyen\Payment\Model\Gender::getAdyenGenderFromMagentoGender(
-                $this->_customerSession->getCustomerData()->getGender()
+                $this->customerSession->getCustomerData()->getGender()
             );
 
             // format to calendar date
-            $dob = $this->_customerSession->getCustomerData()->getDob();
+            $dob = $this->customerSession->getCustomerData()->getDob();
             if ($dob) {
                 $dob = strtotime($dob);
                 $dob = date('m/d/Y', $dob);
             }
         }
 
+		$config['payment']['adyenHpp']['originKey'] = $this->adyenHelper->getOriginKeyForBaseUrl();
+		$config['payment']['adyenHpp']['checkoutUrl'] = $this->adyenHelper->getCheckoutContextUrl($this->storeManager->getStore()->getId());
+		$config['payment']['adyenHpp']['locale'] = $this->adyenHelper->getStoreLocale($this->storeManager->getStore()->getId());
+
         // add to config
         $config['payment'] ['adyenHpp']['gender'] = $gender;
         $config['payment'] ['adyenHpp']['dob'] = $dob;
@@ -135,16 +146,16 @@ class AdyenHppConfigProvider implements ConfigProviderInterface
         $config['payment'] ['adyenHpp']['genderTypes'] = \Adyen\Payment\Model\Gender::getGenderTypes();
 
         $paymentMethodSelectionOnAdyen =
-            $this->_adyenHelper->getAdyenHppConfigDataFlag('payment_selection_on_adyen');
+            $this->adyenHelper->getAdyenHppConfigDataFlag('payment_selection_on_adyen');
 
         $config['payment'] ['adyenHpp']['isPaymentMethodSelectionOnAdyen'] = $paymentMethodSelectionOnAdyen;
-        $config['payment'] ['adyenHpp']['showGender'] = $this->_adyenHelper->getAdyenHppConfigDataFlag('show_gender');
-        $config['payment'] ['adyenHpp']['showDob'] = $this->_adyenHelper->getAdyenHppConfigDataFlag('show_dob');
-        $config['payment'] ['adyenHpp']['showTelephone'] = $this->_adyenHelper->getAdyenHppConfigDataFlag(
+        $config['payment'] ['adyenHpp']['showGender'] = $this->adyenHelper->getAdyenHppConfigDataFlag('show_gender');
+        $config['payment'] ['adyenHpp']['showDob'] = $this->adyenHelper->getAdyenHppConfigDataFlag('show_dob');
+        $config['payment'] ['adyenHpp']['showTelephone'] = $this->adyenHelper->getAdyenHppConfigDataFlag(
             'show_telephone'
         );
-        $config['payment'] ['adyenHpp']['ratePayId'] = $this->_adyenHelper->getRatePayId();
-        $config['payment'] ['adyenHpp']['deviceIdentToken'] = md5($this->_session->getQuoteId() . date('c'));
+        $config['payment'] ['adyenHpp']['ratePayId'] = $this->adyenHelper->getRatePayId();
+        $config['payment'] ['adyenHpp']['deviceIdentToken'] = md5($this->session->getQuoteId() . date('c'));
         $config['payment'] ['adyenHpp']['nordicCountries'] = ['SE', 'NO', 'DK', 'FI'];
 
         return $config;
@@ -155,8 +166,8 @@ class AdyenHppConfigProvider implements ConfigProviderInterface
      *
      * @return \Magento\Framework\App\RequestInterface
      */
-    protected function _getRequest()
+    protected function getRequest()
     {
-        return $this->_request;
+        return $this->request;
     }
 }

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

@@ -199,6 +199,65 @@ define(
 
                         return false;
                     };
+                    // Can be removed after checkout api feature branch goes live since the issuerId key is changed to
+                    // id there
+                    result.getIssuerListForComponent = function() {
+                        if (result.isIssuerListAvailable()) {
+                            return _.map(value.issuers, function (issuer, key) {
+                                return {
+                                    "id": issuer.issuerId,
+                                    "name": issuer.name
+                                };
+                            });
+                        }
+
+                        return [];
+                    };
+                    result.isIdeal = function () {
+                        if (value.brandCode.indexOf("ideal") >= 0) {
+                            return true;
+                        }
+
+                        return false;
+                    };
+
+                    /**
+                     * Renders the secure fields,
+                     * creates the card component,
+                     * sets up the callbacks for card components and
+                     * set up the installments
+                     */
+                    result.renderIdealComponent = function () {
+
+                        self.isPlaceOrderActionAllowed(false);
+
+                        var secureFieldsNode = document.getElementById('iDealContainer');
+
+                        var checkout = new AdyenCheckout({
+                            locale: self.getLocale()
+                        });
+
+                        var ideal = checkout.create('ideal', {
+                            originKey: self.getOriginKey(),
+                            loadingContext: self.getLoadingContext(),
+                            items: result.getIssuerListForComponent(),
+                            onChange: function (state) {
+                                // isValid is not present on start
+                                if (typeof state.isValid !== 'undefined' && state.isValid === false) {
+                                    self.isPlaceOrderActionAllowed(false);
+                                }
+                            },
+                            onValid: function (state) {
+                                result.issuerId(state.data.issuer);
+                                self.isPlaceOrderActionAllowed(true);
+                            },
+                            onError: function (state) {
+                                self.isPlaceOrderActionAllowed(false);
+                            }
+                        });
+
+                        ideal.mount(secureFieldsNode);
+                    };
 
                     if (value.hasOwnProperty("issuers")) {
                         if (value.issuers.length == 0) {
@@ -370,6 +429,15 @@ define(
             },
             getRatePayDeviceIdentToken: function () {
                 return window.checkoutConfig.payment.adyenHpp.deviceIdentToken;
+            },
+            getOriginKey: function () {
+                return window.checkoutConfig.payment.adyenHpp.originKey;
+            },
+            getLoadingContext: function () {
+                return window.checkoutConfig.payment.adyenHpp.checkoutUrl;
+            },
+            getLocale: function () {
+                return window.checkoutConfig.payment.adyenHpp.locale;
             }
         });
     }

view/frontend/web/template/payment/hpp-form.html

@@ -55,17 +55,22 @@
                 <form class="form" data-role="adyen-hpp-form" action="#" method="post" data-bind="mageInit: { 'validation':[]}, attr: {id: 'payment_form_' + $parent.getCode() + '_' + value}">
                 <fieldset class="fieldset" data-bind='attr: {id: "payment_fieldset_" + $parent.getCode() + "_" + value}'>
                      <!-- ko if: isIssuerListAvailable() -->
-                        <label data-bind="attr: {'for': 'issuerId'}" class="label">
-                            <span><!-- ko text: $t('Select Your Bank') --><!-- /ko --></span>
-                        </label>
-
-                        <select name="payment[issuer_id]" data-bind="
-                                options: name.issuers,
-                                optionsText: 'name',
-                                optionsValue: 'issuerId',
-                                value: issuerId,
-                                optionsCaption: $t('Choose Your Bank')">
-                        </select>
+                        <!-- ko if: isIdeal() -->
+                            <div afterRender="renderIdealComponent()" data-bind="attr: { id: 'iDealContainer'}"></div>
+                        <!--/ko-->
+                        <!-- ko ifnot: isIdeal() -->
+                            <label data-bind="attr: {'for': 'issuerId'}" class="label">
+                                <span><!-- ko text: $t('Select Your Bank') --><!-- /ko --></span>
+                            </label>
+
+                            <select name="payment[issuer_id]" data-bind="
+                                        options: name.issuers,
+                                        optionsText: 'name',
+                                        optionsValue: 'issuerId',
+                                        value: issuerId,
+                                        optionsCaption: $t('Choose Your Bank')">
+                            </select>
+                        <!--/ko-->
                     <!--/ko-->
 
                     <!-- ko if: isPaymentMethodOpenInvoiceMethod() -->