[WIP]

fix bug placing the order after a refused one won't go through the
3ds2.0 flow
remove store card details from magento and use the component rendered
one

Model/AdyenThreeDS2Process.php

@@ -110,7 +110,7 @@ class AdyenThreeDS2Process implements AdyenThreeDS2ProcessInterface
 
         // Payment can get back to the original flow
         $payment->setAdditionalInformation("paymentsResponse", $result);
-        $payment->setAdditionalInformation('3ds2Active', false);
+        $payment->setAdditionalInformation('placeOrder', true);
         $quote->save();
 
         // 3DS2 flow is done, original place order flow can continue from frontend

Plugin/PaymentInformationManagement.php

@@ -73,7 +73,10 @@ class PaymentInformationManagement
         $payment = $quote->getPayment();
 
         // in case payments response is already there we don't need to perform another payments call
-        if ($payment->getAdditionalInformation('paymentsResponse')) {
+        // we indicate it with the placeOrder additionalInformation
+        if ($payment->getAdditionalInformation('placeOrder')) {
+            $payment->unsAdditionalInformation('placeOrder');
+            $quote->save();
             return true;
         }
 
@@ -137,7 +140,6 @@ class PaymentInformationManagement
         ) {
 
             if ($this->threeDS2ResponseValidator->validate(array("response" => $paymentsResponse, "payment" => $payment))->isValid()) {
-                $payment->setAdditionalInformation('3ds2Active', true);
                 $quote->save();
                 return json_encode(
                     array(
@@ -154,6 +156,8 @@ class PaymentInformationManagement
             $quote->save();
         }
 
+        $payment->setAdditionalInformation('placeOrder', true);
+        $quote->save();
         // Original flow can continue, return to frontend and place the order
         return json_encode(
             array(

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

@@ -77,7 +77,6 @@ define(
                         'securityCode',
                         'expiryMonth',
                         'expiryYear',
-                        'setStoreCc',
                         'installment',
                         'creditCardDetailsValid',
                         'variant',
@@ -95,6 +94,7 @@ define(
              */
             renderSecureFields: function () {
                 var self = this;
+
                 if (!self.getOriginKey()) {
                     return;
                 }
@@ -105,16 +105,23 @@ define(
                 var allInstallments = self.getAllInstallments();
                 var cardNode = document.getElementById('cardContainer');
 
+                var enableStoreDetails = false;
+                if (self.canCreateBillingAgreement() && !self.isVaultEnabled())  {
+                    enableStoreDetails = true;
+                }
+
                 self.cardComponent = self.checkout.create('card', {
                     originKey: self.getOriginKey(),
                     loadingContext: self.getLoadingContext(),
                     type: 'card',
                     hasHolderName: true,
                     holderNameRequired: true,
+                    enableStoreDetails: enableStoreDetails,
                     groupTypes: self.getAvailableCardTypeAltCodes(),
 
                     onChange: function (state, component) {
                         if (!!state.isValid && !component.state.errors.encryptedSecurityCode) {
+                            self.setStoreCc = !!state.data.storeDetails;
                             self.variant(state.brand);
                             self.creditCardNumber(state.data.encryptedCardNumber);
                             self.expiryMonth(state.data.encryptedExpiryMonth);
@@ -190,7 +197,7 @@ define(
             renderThreeDS2Component: function(type, token) {
                 var self = this;
 
-                var cardNode = document.getElementById('cardContainer');
+                var threeDS2Node = document.getElementById('threeDS2Container');
                 
                 if (type == "IdentifyShopper") {
                     self.threeDS2Component = self.checkout
@@ -198,6 +205,7 @@ define(
                             fingerprintToken: token,
                             onComplete: function(result) {
                                 self.processThreeDS2(result.data);
+                                $('#modal_content').modal("closeModal");
                             },
                             onError: function(result) {
                                 // TODO error handling show error message
@@ -205,7 +213,7 @@ define(
                             }
                         });
                 } else if (type == "ChallengeShopper") {
-                    self.cardComponent.unmount(cardNode);
+                    self.threeDS2Component.unmount(threeDS2Node);
                     if (self.threeDS2Component) {
                         self.threeDS2Component.unmount(cardNode);
                     }
@@ -215,6 +223,7 @@ define(
                             challengeToken: token,
                             onComplete: function(result) {
                                 self.processThreeDS2(result.data);
+                                $('#modal_content').modal("closeModal");
                             },
                             onError: function(result) {
                                 // TODO error handling show error message
@@ -223,7 +232,7 @@ define(
                         });
                 }
 
-                self.threeDS2Component.mount(cardNode);
+                self.threeDS2Component.mount(threeDS2Node);
             },
             /**
              *
@@ -232,6 +241,8 @@ define(
             processThreeDS2: function(data) {
                 var self = this;
 
+                fullScreenLoader.startLoader();
+
                 var payload = {
                     "payload": JSON.stringify(data)
                 };
@@ -263,7 +274,7 @@ define(
                         'expiryMonth': this.expiryMonth(),
                         'expiryYear': this.expiryYear(),
                         'holderName': this.creditCardOwner(),
-                        'store_cc': this.setStoreCc(),
+                        'store_cc': this.setStoreCc,
                         'number_of_installments': this.installment(),
                         'java_enabled': navigator.javaEnabled().toString(),
                         'screen_color_depth': screen.colorDepth,
@@ -327,8 +338,17 @@ define(
                 var response = JSON.parse(responseJSON);
 
                 if (!!response.threeDS2) {
+
+                    $('#modal_content').modal({
+                        // disable user to hide popup
+                        clickableOverlay: false,
+                        // empty buttons, we don't need that
+                        buttons: []
+                    });
+
+                    $('#modal_content').modal("openModal");
+
                     // render component
-                    self.cardComponent.unmount();
                     self.renderThreeDS2Component(response.type, response.token);
                 } else {
                     self.getPlaceOrderDeferredObject()

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

@@ -77,6 +77,10 @@
                     <div afterRender="renderSecureFields()" data-bind="attr: { id: 'cardContainer'}"></div>
                 </div>
 
+                <div id="modal_content">
+                    <div id="threeDS2Container"></div>
+                </div>
+
                 <!-- ko if: (hasInstallments())-->
 
                 <div class="field required"
@@ -116,23 +120,6 @@
                 </div>
                 <!-- /ko -->
 
-
-                <!-- ko if: (canCreateBillingAgreement() && !isVaultEnabled())-->
-
-                <div class="field choice">
-                    <input type="checkbox"
-                           name="payment[store_cc]"
-                           autocomplete="off"
-                           class="checkbox"
-                           data-bind="attr: {title: $t('Remember Me')}, checked: setStoreCc"
-                    />
-                    <label data-bind="attr: {for: getCode() + '_remember_details'}" class="label">
-                        <span><!-- ko text: $t('Remember these details')--><!-- /ko --></span>
-                    </label>
-                </div>
-
-                <!-- /ko -->
-
             </fieldset>
         </form>