Merge pull request #486 from Adyen/bug/3ds2-optimizations

Fix issues with popup in live

Helper/Data.php

@@ -467,18 +467,6 @@ class Data extends AbstractHelper
         return $this->getConfigData($field, 'adyen_cc_vault', $storeId, true);
     }
 
-    /**
-     * Gives back adyen_cc_threeds2 configuration values as flag
-     *
-     * @param $field
-     * @param null $storeId
-     * @return mixed
-     */
-    public function getAdyenCcThreeDS2ConfigDataFlag($field, $storeId = null)
-    {
-        return $this->getConfigData($field, 'adyen_cc_threeds2', $storeId, true);
-    }
-
     /**
      * Gives back adyen_hpp configuration values
      *
@@ -1739,7 +1727,7 @@ class Data extends AbstractHelper
      */
     public function isCreditCardThreeDS2Enabled($storeId = null)
     {
-        return $this->getAdyenCcThreeDS2ConfigDataFlag('active', $storeId);
+        return $this->getAdyenCcConfigDataFlag('threeds2_enabled', $storeId);
     }
 
 	/**

etc/adminhtml/system/adyen_cc.xml

@@ -63,7 +63,7 @@
                showInStore="1">
             <label>3DS2.0 Enabled</label>
             <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
-            <config_path>payment/adyen_cc_threeds2/active</config_path>
+            <config_path>payment/adyen_cc/threeds2_enabled</config_path>
         </field>
 
         <group id="adyen_cc_advanced_settings" translate="label" showInDefault="1" showInWebsite="1" showInStore="1"

etc/config.xml

@@ -62,6 +62,7 @@
                 <can_cancel>1</can_cancel>
                 <can_authorize_vault>1</can_authorize_vault>
                 <can_capture_vault>1</can_capture_vault>
+                <threeds2_enabled>1</threeds2_enabled>
                 <group>adyen</group>
             </adyen_cc>
             <adyen_cc_vault>

view/frontend/web/css/styles.css

@@ -1221,3 +1221,12 @@
 .threeDS2Modal .action-close {display:none; }
 
 
+
+.threeDS2Modal #threeDS2Container {
+    height: 100vh;
+}
+
+.adyen-checkout__threeds2, .adyen-checkout__threeds2__challenge {
+    height:100%;
+}
+

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

@@ -246,24 +246,40 @@ define(
                     self.threeDS2ChallengeComponent = self.checkout
                         .create('threeDS2Challenge', {
                             challengeToken: token,
+                            size: '05',
                             onComplete: function (result) {
-                                popupModal.modal("closeModal");
+                                self.closeModal(popupModal);
+
                                 fullScreenLoader.startLoader();
                                 threeds2.processThreeDS2(result.data).done(function (responseJSON) {
                                     self.validateThreeDS2OrPlaceOrder(responseJSON);
                                 }).error(function () {
-                                    popupModal.modal("closeModal");
                                     self.isPlaceOrderActionAllowed(true);
                                     fullScreenLoader.stopLoader();
                                 });
                             },
                             onError: function (error) {
+                                self.closeModal(popupModal);
                                 console.log(JSON.stringify(error));
                             }
                         });
                     self.threeDS2ChallengeComponent.mount(threeDS2Node);
                 }
             },
+            /**
+             * This method is a workaround to close the modal in the right way and reconstruct the threeDS2Modal.
+             * This will solve issues when you cancel the 3DS2 challenge and retry the payment
+             */
+            closeModal: function (popupModal) {
+                popupModal.modal("closeModal");
+                $('.threeDS2Modal').remove();
+                $('.modals-overlay').remove();
+
+                // reconstruct the threeDS2Modal container again otherwise component can not find the threeDS2Modal
+                $('#threeDS2Wrapper').append("<div id=\"threeDS2Modal\">" +
+                    "<div id=\"threeDS2Container\"></div>" +
+                    "</div>");
+            },
             /**
              * Builds the payment details part of the payment information reqeust
              *
@@ -369,7 +385,9 @@ define(
 
                             if (self.redirectAfterPlaceOrder) {
                                 // use custom redirect Link for supporting 3D secure
-                                window.location.replace(url.build(window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl));
+                                window.location.replace(url.build(
+                                    window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl)
+                                );
                             }
                         }
                     );

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

@@ -77,10 +77,13 @@
                     <div afterRender="renderSecureFields()" data-bind="attr: { id: 'cardContainer'}"></div>
                 </div>
 
-                <div id="threeDS2Modal">
-                    <div id="threeDS2Container"></div>
+                <div id="threeDS2Wrapper">
+                    <div id="threeDS2Modal">
+                        <div id="threeDS2Container"></div>
+                    </div>
                 </div>
 
+
                 <!-- ko if: (hasInstallments())-->
 
                 <div class="field required"