PW-634 frontend

- Remove CSE library at One click
- Add Card components (CVC) instead of CSE
- Move to new beta card components
- Remove expiry date update from the template and the js

Helper/Data.php

@@ -35,6 +35,7 @@ class Data extends AbstractHelper
     const LIVE = 'live';
     const CHECKOUT_CONTEXT_URL_LIVE = 'https://checkoutshopper-live.adyen.com/checkoutshopper/';
 	const CHECKOUT_CONTEXT_URL_TEST = 'https://checkoutshopper-test.adyen.com/checkoutshopper/';
+	const CHECKOUT_COMPONENT_JS = 'https://checkoutshopper-beta.adyen.com/checkoutshopper/sdk/2.0.0-beta.4/adyen.js';
 
     /**
      * @var \Magento\Framework\Encryption\EncryptorInterface
@@ -1427,4 +1428,11 @@ class Data extends AbstractHelper
 	{
 		return new \Adyen\Service\CheckoutUtility($client);
 	}
+
+	/**
+	 * @return string
+	 */
+	public function getCheckoutCardComponentJs() {
+		return self::CHECKOUT_COMPONENT_JS;
+	}
 }

Model/Ui/AdyenGenericConfigProvider.php

@@ -58,6 +58,9 @@ class AdyenGenericConfigProvider implements ConfigProviderInterface
         } else {
             $config['payment']['adyen']['showLogo'] = false;
         }
+
+		$config['payment']['checkoutCardComponentSource'] = $this->_adyenHelper->getCheckoutCardComponentJs();
+
         return $config;
     }
     /**

Model/Ui/AdyenOneclickConfigProvider.php

@@ -72,16 +72,17 @@ class AdyenOneclickConfigProvider implements ConfigProviderInterface
      */
     private $ccConfig;
 
-    /**
-     * AdyenOneclickConfigProvider constructor.
-     *
-     * @param \Adyen\Payment\Helper\Data $adyenHelper
-     * @param \Magento\Framework\App\RequestInterface $request
-     * @param \Magento\Customer\Model\Session $customerSession
-     * @param \Magento\Checkout\Model\Session $session
-     * @param \Magento\Store\Model\StoreManagerInterface $storeManager
-     * @param \Magento\Framework\UrlInterface $urlBuilder
-     */
+	/**
+	 * AdyenOneclickConfigProvider constructor.
+	 *
+	 * @param \Adyen\Payment\Helper\Data $adyenHelper
+	 * @param \Magento\Framework\App\RequestInterface $request
+	 * @param \Magento\Customer\Model\Session $customerSession
+	 * @param \Magento\Checkout\Model\Session $session
+	 * @param \Magento\Store\Model\StoreManagerInterface $storeManager
+	 * @param \Magento\Framework\UrlInterface $urlBuilder
+	 * @param \Magento\Payment\Model\CcConfig $ccConfig
+	 */
     public function __construct(
         \Adyen\Payment\Helper\Data $adyenHelper,
         \Magento\Framework\App\RequestInterface $request,
@@ -132,6 +133,11 @@ class AdyenOneclickConfigProvider implements ConfigProviderInterface
             ]
         ]);
 
+		$config['payment']['adyenOneclick']['methodCode'] = self::CODE;
+		$config['payment']['adyenOneclick']['originKey'] = $this->_adyenHelper->getOriginKeyForBaseUrl();
+		$config['payment']['adyenOneclick']['checkoutUrl'] = $this->_adyenHelper->getCheckoutContextUrl($this->_storeManager->getStore()->getId());
+		$config['payment']['adyenOneclick']['locale'] = $this->_adyenHelper->getStoreLocale($this->_storeManager->getStore()->getId());
+
         $recurringType = $this->_adyenHelper->getAdyenAbstractConfigData('recurring_type');
         $canCreateBillingAgreement = false;
         if ($recurringType == "ONECLICK" || $recurringType == "ONECLICK,RECURRING") {
@@ -175,6 +181,7 @@ class AdyenOneclickConfigProvider implements ConfigProviderInterface
                 $recurringType
             );
         }
+
         return $billingAgreements;
     }
 

etc/di.xml

@@ -445,7 +445,7 @@
         <arguments>
             <argument name="requestBuilder" xsi:type="object">AdyenPaymentOneclickAuthorizeRequest</argument>
             <argument name="transferFactory" xsi:type="object">Adyen\Payment\Gateway\Http\TransferFactory</argument>
-            <argument name="client" xsi:type="object">Adyen\Payment\Gateway\Http\Client\TransactionAuthorization</argument>
+            <argument name="client" xsi:type="object">Adyen\Payment\Gateway\Http\Client\TransactionPayment</argument>
             <argument name="validator" xsi:type="object">GeneralResponseValidator</argument>
             <argument name="handler" xsi:type="object">AdyenPaymentCcResponseHandlerComposite</argument>
         </arguments>

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

@@ -66,6 +66,22 @@ define(
             }
         );
         /** Add view logic here if needed */
-        return Component.extend({});
+        return Component.extend({
+            initialize: function () {
+                var self = this;
+                this._super();
+
+                // include checkout card component javascript
+                var checkoutCardComponentScriptTag = document.getElementById('AdyenCheckoutCardComponentScript');
+                checkoutCardComponentScriptTag = document.createElement('script');
+                checkoutCardComponentScriptTag.id = "AdyenCheckoutCardComponentScript";
+                checkoutCardComponentScriptTag.src = self.getCheckoutCardComponentSource();
+                checkoutCardComponentScriptTag.type = "text/javascript";
+                document.body.appendChild(checkoutCardComponentScriptTag);
+            },
+            getCheckoutCardComponentSource: function() {
+                return window.checkoutConfig.payment.checkoutCardComponentSource;
+            },
+        });
     }
 );
\ No newline at end of file

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

@@ -29,8 +29,7 @@ define(
         'Magento_Checkout/js/model/payment/additional-validators',
         'Magento_Checkout/js/model/quote',
         'Adyen_Payment/js/model/installments',
-        'mage/url',
-        'Adyen_Payment/js/adyen.2.0.0'
+        'mage/url'
     ],
     function ($, ko, Component, customer, creditCardData, additionalValidators, quote, installments, url) {
 
@@ -80,13 +79,13 @@ define(
                 var allInstallments = self.getAllInstallments();
                 var cardNode = document.getElementById('cardContainer');
 
-                var checkout = new Adyen.Checkout({
-                    locale: window.checkoutConfig.payment.adyenCc.locale
+                var checkout = new AdyenCheckout({
+                    locale: self.getLocale()
                 });
 
                 var card = checkout.create('card', {
-                    originKey: window.checkoutConfig.payment.adyenCc.originKey,
-                    loadingContext: window.checkoutConfig.payment.adyenCc.checkoutUrl,
+                    originKey: self.getOriginKey(),
+                    loadingContext: self.getLoadingContext(),
                     type: 'card',
                     groupTypes: self.getAvailableCardTypeAltCodes(),
 
@@ -96,7 +95,7 @@ define(
                         var creditCardType = self.getCcCodeByAltCode(state.brand);
 
                         if (creditCardType) {
-                            /* If the credit card type is already set, check if it changed or not */
+                            // If the credit card type is already set, check if it changed or not
                             if (!self.creditCardType() || self.creditCardType() && self.creditCardType() != creditCardType) {
                                 if (creditCardType in allInstallments) {
 
@@ -310,6 +309,15 @@ define(
             getCode: function () {
                 return window.checkoutConfig.payment.adyenCc.methodCode;
             },
+            getOriginKey: function () {
+                return window.checkoutConfig.payment.adyenCc.originKey;
+            },
+            getLoadingContext: function () {
+                return window.checkoutConfig.payment.adyenCc.checkoutUrl;
+            },
+            getLocale: function () {
+                return window.checkoutConfig.payment.adyenCc.locale;
+            },
             isActive: function () {
                 return true;
             },

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

@@ -86,90 +86,8 @@
                     </div>
                 </div>
 
-
-                <div class="field number expire-update" data-bind="css: {'_disable': (true == expiry())}">
-                    <label class="label">
-                        <span><!-- ko text: $t('Expiration Date')--><!-- /ko --></span>
-                    </label>
-                    <div class="control">
-                        <span data-bind="text: agreement_data.card.expiryMonth + '/' + agreement_data.card.expiryYear"></span>
-                        <a class="" data-bind="click: selectExpiry"
-                                ><!-- ko text: $t('Update') --><!-- /ko --></a>
-                    </div>
-                </div>
-
-                <div class="field date required changable-card-expiry" data-bind="attr: {id: getCode() + '_' + value + '_cc_type_exp_div'}, css: {'_active': (true == expiry())}">
-                    <label data-bind="attr: {for: getCode() + '_' + value + '_expiration'}" class="label">
-                        <span><!-- ko text: $t('Expiration Date')--><!-- /ko --></span>
-                    </label>
-                    <div class="control">
-                        <div class="fields group group-2">
-                            <div class="field no-label month">
-                                <div class="control">
-                                    <select  class="select select-month"
-                                             data-encrypted-name="expiryMonth"
-                                             data-bind="attr: {id: getCode() + '_' + value + '_expiration', 'data-container': getCode() + '-' + value + '-cc-month', 'data-validate': JSON.stringify({required:true, 'validate-cc-exp':'#' + getCode() + '_expiration_yr'})},
-                                                enable: $parent.isActive($parents),
-                                                options: $parent.getCcMonthsValues(),
-                                                optionsValue: 'value',
-                                                optionsText: 'month',
-                                                optionsCaption: $t('Month'),
-                                                value: creditCardExpMonth"
-                                             data-validate="{required:true}">
-                                    </select>
-                                </div>
-                            </div>
-                            <div class="field no-label year">
-                                <div class="control">
-                                    <select class="select select-year"
-                                            data-encrypted-name="expiryYear"
-                                            data-bind="attr: {id: getCode() + '_' + value + '_expiration_yr', 'data-container': getCode() + '-' + value + '-cc-year', 'data-validate': JSON.stringify({required:true})},
-                                               enable: $parent.isActive($parents),
-                                               options: $parent.getCcYearsValues(),
-                                               optionsValue: 'value',
-                                               optionsText: 'year',
-                                               optionsCaption: $t('Year'),
-                                               value: creditCardExpYear"
-                                            data-validate="{required:true}">
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-
                 <!-- ko if: hasVerification()-->
-                <div class="field cvv required" data-bind="attr: {id: getCode() + '_' + value + '_cc_type_cvv_div'}">
-                    <label data-bind="attr: {for: getCode() + '_' + value + '_cc_cid'}" class="label">
-                        <span><!-- ko text: $t('Card Verification Number')--><!-- /ko --></span>
-                    </label>
-                    <div class="control _with-tooltip">
-                        <input type="number"
-                               autocomplete="off"
-                               class="input-text cvv"
-                               data-encrypted-name="cvc"
-                               value=""
-                               data-bind="attr: {id: getCode() + '_' + value + '_cc_cid',
-                                title: $t('Card Verification Number'),
-                                'data-container': getCode() + '-' + value + '-cc-cvv',
-                                'data-validate': JSON.stringify({'required-number':true})},
-                                enable: $parent.isActive($parents),
-                                value: creditCardVerificationNumber"
-                               data-validate="{required:true}"/>
-                        <div class="field-tooltip toggle">
-                        <span class="field-tooltip-action action-cvv"
-                              tabindex="0"
-                              data-toggle="dropdown"
-                              data-bind="attr: {title: $t('What is this?')}, mageInit: {'dropdown':{'activeClass': '_active'}}">
-                            <span><!-- ko text: $t('What is this?')--><!-- /ko --></span>
-                        </span>
-                            <div class="field-tooltip-content"
-                                 data-target="dropdown"
-                                 data-bind="html: $parent.getCvvImageHtml()"></div>
-                        </div>
-                    </div>
-                </div>
+                <div afterRender="renderSecureCVC()" data-bind="attr: { id: 'cvcContainer-' + value}" ></div>
                 <!-- /ko -->
                 <!--/ko-->