Release 1.1.0

Model/ExpressInit.php

@@ -189,6 +189,13 @@ public function execute(
             );
             // We have to save it here to get the totals in the express data builder
             $this->quoteRepository->save($adyenExpressQuote);
+
+            // Quote object is required to collect the totals instead of cart object.
+            $quoteModel = $this->quoteRepository->getActive($adyenExpressQuote->getId());
+            $quoteModel->collectTotals();
+            $quoteModel->setTotalsCollectedFlag(false);
+            $this->quoteRepository->save($quoteModel);
+
             $expressData = $this->expressDataBuilder->execute(
                 $adyenExpressQuote,
                 $product
@@ -234,8 +241,7 @@ private function addProductToAdyenExpressQuote(
             $product,
             $productCartParams
         );
-        $adyenExpressQuote->collectTotals();
-        $adyenExpressQuote->setTotalsCollectedFlag(false);
+
         return $adyenExpressQuote;
     }
 

etc/csp_whitelist.xml

@@ -13,23 +13,41 @@
 <csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
     <policies>
+        <policy id="script-src">
+            <values>
+                <value id="adyen" type="host">*.adyen.com</value>
+            </values>
+        </policy>
+        <policy id="frame-src">
+            <values>
+                <value id="adyen" type="host">*.adyen.com</value>
+            </values>
+        </policy>
         <policy id="img-src">
             <values>
                 <value id="google-static-img" type="host">https://*.gstatic.com</value>
+                <value id="adyen" type="host">*.adyen.com</value>
+            </values>
+        </policy>
+        <policy id="connect-src">
+            <values>
+                <value id="adyen" type="host">*.adyen.com</value>
             </values>
         </policy>
-
         <policy id="font-src">
             <values>
                 <value id="google-static-fonts" type="host">https://*.gstatic.com</value>
             </values>
         </policy>
-
         <policy id="style-src">
             <values>
                 <value id="google-static-styles" type="host">https://fonts.googleapis.com/</value>
             </values>
         </policy>
+        <policy id="form-action">
+            <values>
+                <value id="adyen" type="host">*.adyen.com</value>
+            </values>
+        </policy>
     </policies>
-
 </csp_whitelist>

view/frontend/templates/googlepay/shortcut.phtml

@@ -31,3 +31,4 @@ $config = [
 <div class="adyen-checkout__dropin google-pay-button-card" id="<?= $id ?>"
      data-mage-init="<?= $escaper->escapeHtmlAttr(json_encode($config)) ?>">
 </div>
+<div id="googlepay_actionmodal"></div>

view/frontend/web/js/applepay/button.js

@@ -422,12 +422,7 @@ define([
                     }
                 };
 
-                const stateData = {
-                    'paymentMethod': {
-                        'type': 'applepay',
-                        'applePayToken': btoa(JSON.stringify(event.payment.token.paymentData))
-                    }
-                };
+                let componentData = self.applePayComponent.data;
 
                 setShippingInformation(payload, this.isProductView).done(function () {
                     // Submit payment information
@@ -437,7 +432,7 @@ define([
                             method: 'adyen_hpp',
                             additional_data: {
                                 brand_code: 'applepay',
-                                stateData: JSON.stringify(stateData)
+                                stateData: JSON.stringify(componentData)
                             }
                         }
                     };

view/frontend/web/js/googlepay/button.js

@@ -1,8 +1,14 @@
 define([
+    'jquery',
+    'ko',
     'uiComponent',
     'mage/translate',
     'Magento_Customer/js/customer-data',
+    'Magento_Checkout/js/model/full-screen-loader',
+    'Magento_Checkout/js/model/quote',
     'Adyen_Payment/js/adyen',
+    'Adyen_Payment/js/model/adyen-payment-modal',
+    'Adyen_Payment/js/model/adyen-payment-service',
     'Adyen_ExpressCheckout/js/actions/activateCart',
     'Adyen_ExpressCheckout/js/actions/cancelCart',
     'Adyen_ExpressCheckout/js/actions/createPayment',
@@ -26,13 +32,20 @@ define([
     'Adyen_ExpressCheckout/js/model/config',
     'Adyen_ExpressCheckout/js/model/countries',
     'Adyen_ExpressCheckout/js/model/totals',
-    'Adyen_ExpressCheckout/js/model/currency'
+    'Adyen_ExpressCheckout/js/model/currency',
+    'mage/cookies',
 ],
     function (
+        $,
+        ko,
         Component,
         $t,
         customerData,
+        fullScreenLoader,
+        quote,
         AdyenCheckout,
+        adyenPaymentModal,
+        adyenPaymentService,
         activateCart,
         cancelCart,
         createPayment,
@@ -61,13 +74,18 @@ define([
         'use strict';
 
         return Component.extend({
+            isPlaceOrderActionAllowed: ko.observable(
+                quote.billingAddress() != null),
+
             defaults: {
                 shippingMethods: {},
                 googlePayToken: null,
                 googlePayAllowed: null,
                 isProductView: false,
                 maskedId: null,
-                googlePayComponent: null
+                googlePayComponent: null,
+                modalLabel: 'googlepay_actionmodal',
+                orderId: 0
             },
 
             initialize: async function (config, element) {
@@ -135,25 +153,26 @@ define([
                 let googlePaymentMethod = await getPaymentMethod('googlepay', this.isProductView);
 
                 if (!isConfigSet(googlePaymentMethod, ['gatewayMerchantId', 'merchantId'])) {
-                    return;
                 }
 
                 this.initialiseGooglePayComponent(googlePaymentMethod, element);
             },
 
             initialiseGooglePayComponent: async function (googlePaymentMethod, element) {
                 const config = configModel().getConfig();
-                const checkoutComponent = await new AdyenCheckout({
+                this.checkoutComponent = await new AdyenCheckout({
                     locale: config.locale,
-                    originKey: config.originkey,
+                    clientKey: config.originkey,
                     environment: config.checkoutenv,
+                    paymentMethodsResponse: getPaymentMethod('googlepay', this.isProductView),
+                    onAdditionalDetails: this.handleOnAdditionalDetails.bind(this),
                     risk: {
                         enabled: false
                     }
                 });
                 const googlePayConfig = this.getGooglePayConfig(googlePaymentMethod, element);
 
-                this.googlePayComponent = checkoutComponent.create(googlePaymentMethod, googlePayConfig);
+                this.googlePayComponent = this.checkoutComponent.create(googlePaymentMethod, googlePayConfig);
 
                 this.googlePayComponent.isAvailable()
                     .then(function () {
@@ -331,25 +350,19 @@ define([
 
             startPlaceOrder: function (paymentData) {
                 let self = this;
+                let componentData = self.googlePayComponent.data;
 
                 this.setShippingInformation(paymentData)
                     .done(function () {
-                        const stateData = JSON.stringify({
-                            paymentMethod: {
-                                googlePayCardNetwork: paymentData.paymentMethodData.info.cardNetwork,
-                                googlePayToken: paymentData.paymentMethodData.tokenizationData.token,
-                                type: self.googlePayComponent.props.type
-                            }
-                        }),
-                         payload = {
+                        const payload = {
                             email: paymentData.email,
                             shippingAddress: this.mapAddress(paymentData.shippingAddress),
                             billingAddress: this.mapAddress(paymentData.paymentMethodData.info.billingAddress),
                             paymentMethod: {
                                 method: 'adyen_hpp',
                                 additional_data: {
                                     brand_code: self.googlePayComponent.props.type,
-                                    stateData
+                                    stateData: JSON.stringify(componentData)
                                 },
                                 extension_attributes: getExtensionAttributes(paymentData)
                             }
@@ -362,7 +375,15 @@ define([
                         }
 
                         createPayment(JSON.stringify(payload), this.isProductView)
-                            .done(redirectToSuccess)
+                            .done( function (orderId) {
+                                if (!!orderId) {
+                                    self.orderId = orderId;
+                                    adyenPaymentService.getOrderPaymentStatus(orderId).
+                                    done(function (responseJSON) {
+                                        self.handleAdyenResult(responseJSON, orderId);
+                                    })
+                                }
+                            })
                             .fail(function (e) {
                                 console.error('Adyen GooglePay Unable to take payment', e);
                             });
@@ -396,6 +417,77 @@ define([
                 return setShippingInformation(payload, this.isProductView);
             },
 
+            handleOnAdditionalDetails: function (result) {
+                const self = this;
+                let request = result.data;
+                adyenPaymentModal.hideModalLabel(this.modalLabel);
+                fullScreenLoader.startLoader();
+                request.orderId = self.orderId;
+                let popupModal = self.showModal();
+
+                adyenPaymentService.paymentDetails(request).
+                done(function(responseJSON) {
+                    fullScreenLoader.stopLoader();
+                    self.handleAdyenResult(responseJSON, self.orderId);
+                }).
+                fail(function(response) {
+                    self.closeModal(popupModal);
+                    errorProcessor.process(response, self.messageContainer);
+                    self.isPlaceOrderActionAllowed(true);
+                    fullScreenLoader.stopLoader();
+                });
+            },
+
+            handleAdyenResult: function (responseJSON, orderId) {
+                var self = this;
+                var response = JSON.parse(responseJSON);
+
+                if (!!response.isFinal) {
+                    // Status is final redirect to the success page
+                    redirectToSuccess()
+                } else {
+                    // Handle action
+                    self.handleAction(response.action, orderId);
+                }
+            },
+
+            handleAction: function(action, orderId) {
+                var self = this;
+                let popupModal;
+
+                fullScreenLoader.stopLoader();
+
+                if (action.type === 'threeDS2' || action.type === 'await') {
+                    popupModal = self.showModal();
+                }
+
+                try {
+                    self.checkoutComponent.createFromAction(action).mount('#' + this.modalLabel);
+                } catch (e) {
+                    console.log(e);
+                    self.closeModal(popupModal);
+                }
+            },
+
+            showModal: function() {
+                let actionModal = adyenPaymentModal.showModal(
+                    adyenPaymentService,
+                    fullScreenLoader,
+                    this.messageContainer,
+                    this.orderId,
+                    this.modalLabel,
+                    this.isPlaceOrderActionAllowed
+                );
+
+                $("." + this.modalLabel + " .action-close").hide();
+
+                return actionModal;
+            },
+
+            closeModal: function(popupModal) {
+                adyenPaymentModal.closeModal(popupModal, this.modalLabel)
+            },
+
             mapAddress: function (address) {
                 const [firstname, ...lastname] = address.name.split(' ');