[PW-1746] Upgrade checkout component to 3.2.0 (#541)

* Update checkout components version to 3.2.0
Update checkout components styling

*  - Adjust styling to new version
 - remove risk enabled false from checkout components
 - Add checkout component script to head

Helper/Data.php

@@ -33,8 +33,8 @@ class Data extends AbstractHelper
     const MODULE_NAME = 'adyen-magento2';
     const TEST = 'test';
     const LIVE = 'live';
-    const CHECKOUT_COMPONENT_JS_LIVE = 'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js';
-    const CHECKOUT_COMPONENT_JS_TEST = 'https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js';
+    const CHECKOUT_COMPONENT_JS_LIVE = 'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.2.0/adyen.js';
+    const CHECKOUT_COMPONENT_JS_TEST = 'https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.2.0/adyen.js';
 
     /**
      * @var \Magento\Framework\Encryption\EncryptorInterface

view/frontend/web/js/view/payment/adyen-methods.js

@@ -72,12 +72,13 @@ define(
                 checkoutCardComponentScriptTag.id = "AdyenCheckoutCardComponentScript";
                 checkoutCardComponentScriptTag.src = self.getCheckoutCardComponentSource();
                 checkoutCardComponentScriptTag.type = "text/javascript";
-                document.body.appendChild(checkoutCardComponentScriptTag);
+                document.head.appendChild(checkoutCardComponentScriptTag);
+
                 if (this.isGooglePayEnabled()) {
                     var googlepayscript = document.createElement('script');
                     googlepayscript.src = "https://pay.google.com/gp/p/js/pay.js";
                     googlepayscript.type = "text/javascript";
-                    document.body.appendChild(googlepayscript);
+                    document.head.appendChild(googlepayscript);
                 }
             },
             getCheckoutCardComponentSource: function() {

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

@@ -65,10 +65,7 @@ define(
 
                 // initialize adyen component for general use
                 this.checkout = new AdyenCheckout({
-                    locale: this.getLocale(),
-                    risk: {
-                        enabled: false
-                    }
+                    locale: this.getLocale()
                 });
 
                 return this;

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

@@ -82,10 +82,7 @@ define(
                  * @type {AdyenCheckout}
                  */
                 self.checkoutComponent = new AdyenCheckout({
-                    locale: self.getLocale(),
-                    risk: {
-                        enabled: false
-                    }
+                    locale: self.getLocale()
                 });
 
                 // reset variable:

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

@@ -74,7 +74,7 @@
                 <!-- /ko -->
 
                 <div class="field number cardContainerField">
-                    <div afterRender="renderSecureFields()" data-bind="attr: { id: 'cardContainer'}"></div>
+                    <div class="checkout-component-dock" afterRender="renderSecureFields()" data-bind="attr: { id: 'cardContainer'}"></div>
                 </div>
 
                 <div id="threeDS2Wrapper">

view/frontend/web/template/payment/google-pay-form.html

@@ -51,7 +51,7 @@
             <!--/ko-->
         </div>
         <div class="field number googlePay">
-            <div afterRender="renderGooglePay()" data-bind="attr: { id: 'googlePay'}">
+            <div class="checkout-component-dock" afterRender="renderGooglePay()" data-bind="attr: { id: 'googlePay'}">
                 <!-- ko ifnot: isGooglePayAllowed() -->
                 Google Pay is not available
                 <!--/ko--></div>

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

@@ -55,7 +55,7 @@
             <fieldset class="fieldset" data-bind='attr: {id: "payment_fieldset_" + $parent.getCode() + "_" + value}'>
                  <!-- ko if: hasIssuersAvailable() -->
                     <!-- ko if: isIdeal() -->
-                        <div afterRender="renderIdealComponent()" data-bind="attr: { id: 'iDealContainer'}"></div>
+                        <div class="checkout-component-dock" afterRender="renderIdealComponent()" data-bind="attr: { id: 'iDealContainer'}"></div>
                     <!--/ko-->
                     <!-- ko ifnot: isIdeal() -->
                         <label data-bind="attr: {'for': 'issuerId'}" class="label">
@@ -101,7 +101,7 @@
                     </div>
                     <!--/ko-->
 
-                    <div afterRender="renderKlarnaComponent()" data-bind="attr: { id: 'klarnaContainer'}"></div>
+                    <div class="checkout-component-dock" afterRender="renderKlarnaComponent()" data-bind="attr: { id: 'klarnaContainer'}"></div>
                 <!--/ko-->
 
                 <!-- ko if: isPaymentMethodAfterPay() -->
@@ -128,7 +128,7 @@
                     </div>
                     <!--/ko-->
 
-                    <div afterRender="renderAfterPayComponent()" data-bind="attr: { id: 'afterPayContainer'}"></div>
+                    <div class="checkout-component-dock" afterRender="renderAfterPayComponent()" data-bind="attr: { id: 'afterPayContainer'}"></div>
                 <!--/ko-->
 
                 <!-- ko if: isPaymentMethodOtherOpenInvoiceMethod() -->
@@ -218,7 +218,7 @@
                 <!--/ko-->
 
                 <!-- ko if: isSepaDirectDebit() -->
-                    <div afterRender="renderSepaDirectDebitComponent()" data-bind="attr: { id: 'sepaDirectDebitContainer'}"></div>
+                    <div class="checkout-component-dock" afterRender="renderSepaDirectDebitComponent()" data-bind="attr: { id: 'sepaDirectDebitContainer'}"></div>
                 <!--/ko-->
 
                 <!-- ko if: isAch() -->

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

@@ -81,7 +81,7 @@
                     </div>
                 </div>
 
-                <div afterRender="renderSecureCVC()" data-bind="attr: { id: 'cvcContainer-' + value}"></div>
+                <div class="checkout-component-dock" afterRender="renderSecureCVC()" data-bind="attr: { id: 'cvcContainer-' + value}"></div>
                 <!--/ko-->
 
                 <!-- ko if: agreement_data.bank -->