[WIP]

Add json response builder processing 3DS2
Don't send the card details 2 times from the frontend
Show popup only for challenge shopper and not for identify shopper

Helper/Data.php

@@ -1767,4 +1767,30 @@ class Data extends AbstractHelper
 		$timeStamp = new \DateTime($date);
 		return $timeStamp->format($format);
 	}
+
+    /**
+     * @param string|null $type
+     * @param string|null $token
+     * @return string
+     */
+    public function buildThreeDS2ProcessResponseJson($type = null, $token = null)
+    {
+        $response = json_encode(
+            array(
+                'threeDS2' => false
+            )
+        );
+
+        if ($type && $token) {
+            $response = json_encode(
+                array(
+                    "threeDS2" => true,
+                    "type" => $type,
+                    "token" => $token
+                )
+            );
+        }
+
+        return $response;
+    }
 }

Model/AdyenThreeDS2Process.php

@@ -107,13 +107,7 @@ class AdyenThreeDS2Process implements AdyenThreeDS2ProcessInterface
             $result['resultCode'] === 'ChallengeShopper' &&
             !empty($result['authentication']['threeds2.challengeToken'])
         ) {
-            return json_encode(
-                array(
-                    'threeDS2' => true,
-                    'type' => $result['resultCode'],
-                    'token' => $result['authentication']['threeds2.challengeToken']
-                )
-            );
+            return $this->adyenHelper->buildThreeDS2ProcessResponseJson($result['resultCode'], $result['authentication']['threeds2.challengeToken']);
         }
 
         // Payment can get back to the original flow
@@ -129,10 +123,6 @@ class AdyenThreeDS2Process implements AdyenThreeDS2ProcessInterface
         $quote->save();
 
         // 3DS2 flow is done, original place order flow can continue from frontend
-        return json_encode(
-            array(
-                'threeDS2' => false
-            )
-        );
+        return $this->adyenHelper->buildThreeDS2ProcessResponseJson();
     }
 }

Plugin/PaymentInformationManagement.php

@@ -90,8 +90,7 @@ class PaymentInformationManagement
         \Adyen\Payment\Gateway\Http\Client\TransactionPayment $transactionPayment,
         \Adyen\Payment\Gateway\Validator\CheckoutResponseValidator $checkoutResponseValidator,
         \Adyen\Payment\Gateway\Validator\ThreeDS2ResponseValidator $threeDS2ResponseValidator
-    )
-    {
+    ) {
         $this->checkoutSession = $checkoutSession;
         $this->adyenHelper = $adyenHelper;
         $this->adyenRequestHelper = $adyenRequestHelper;
@@ -109,8 +108,7 @@ class PaymentInformationManagement
     public function afterSavePaymentInformation(
         \Magento\Checkout\Model\PaymentInformationManagement $subject,
         $response
-    )
-    {
+    ) {
         // Get payment and cart information from session
         $quote = $this->checkoutSession->getQuote();
         $payment = $quote->getPayment();
@@ -121,11 +119,7 @@ class PaymentInformationManagement
             $payment->unsAdditionalInformation('placeOrder');
             $quote->save();
 
-            return json_encode(
-                array(
-                    'threeDS2' => false
-                )
-            );
+            return $this->adyenHelper->buildThreeDS2ProcessResponseJson();
         }
 
         // Init request array
@@ -181,21 +175,17 @@ class PaymentInformationManagement
         // Check if 3DS2.0 validation is needed or not
         // In case 3DS2.0 validation is necessary send the type and token back to the frontend
         if (!empty($paymentsResponse['resultCode']) &&
-            (
-                $paymentsResponse['resultCode'] == 'IdentifyShopper' ||
-                $paymentsResponse['resultCode'] == 'ChallengeShopper'
-            )
+            ($paymentsResponse['resultCode'] == 'IdentifyShopper' ||
+                $paymentsResponse['resultCode'] == 'ChallengeShopper')
         ) {
 
-            if ($this->threeDS2ResponseValidator->validate(array("response" => $paymentsResponse, "payment" => $payment))->isValid()) {
+            if ($this->threeDS2ResponseValidator->validate(array(
+                "response" => $paymentsResponse,
+                "payment" => $payment
+            ))->isValid()) {
                 $quote->save();
-                return json_encode(
-                    array(
-                        "threeDS2" => true,
-                        "type" => $payment->getAdditionalInformation('threeDS2Type'),
-                        "token" => $payment->getAdditionalInformation('threeDS2Token')
-                    )
-                );
+                return $this->adyenHelper->buildThreeDS2ProcessResponseJson($payment->getAdditionalInformation('threeDS2Type'),
+                    $payment->getAdditionalInformation('threeDS2Token'));
             }
         }
 
@@ -210,10 +200,6 @@ class PaymentInformationManagement
         $quote->save();
 
         // Original flow can continue, return to frontend and place the order
-        return json_encode(
-            array(
-                'threeDS2' => false
-            )
-        );
+        return $this->adyenHelper->buildThreeDS2ProcessResponseJson();
     }
 }

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

@@ -206,23 +206,24 @@ define(
                 var threeDS2Node = document.getElementById('threeDS2Container');
                 
                 if (type == "IdentifyShopper") {
+                    fullScreenLoader.startLoader();
                     self.threeDS2Component = self.checkout
                         .create('threeDS2DeviceFingerprint', {
                             fingerprintToken: token,
                             onComplete: function(result) {
+                                fullScreenLoader.stopLoader();
                                 self.processThreeDS2(result.data);
-                                $('#threeDS2Modal').modal("closeModal");
-                            },
-                            onError: function(result) {
-                                // TODO error handling show error message
-                                console.log(result);
                             }
                         });
                 } else if (type == "ChallengeShopper") {
-                    self.threeDS2Component.unmount(threeDS2Node);
-                    if (self.threeDS2Component) {
-                        self.threeDS2Component.unmount(cardNode);
-                    }
+                    $('#threeDS2Modal').modal({
+                        // disable user to hide popup
+                        clickableOverlay: false,
+                        // empty buttons, we don't need that
+                        buttons: []
+                    });
+
+                    $('#threeDS2Modal').modal("openModal");
 
                     self.threeDS2Component = self.checkout
                         .create('threeDS2Challenge', {
@@ -230,10 +231,6 @@ define(
                             onComplete: function(result) {
                                 self.processThreeDS2(result.data);
                                 $('#threeDS2Modal').modal("closeModal");
-                            },
-                            onError: function(result) {
-                                // TODO error handling show error message
-                                console.log(result);
                             }
                         });
                 }
@@ -269,9 +266,9 @@ define(
             /**
              * Builds the payment details part of the payment information reqeust
              *
-             * @returns {{method: *, additional_data: {cc_type: *, number: *, cvc, expiryMonth: *, expiryYear: *, holderName: *, store_cc: *, number_of_installments: *}}}
+             * @returns {{method: *, additional_data: {card_brand: *, cc_type: *, number: *, cvc: *, expiryMonth: *, expiryYear: *, holderName: *, store_cc: (boolean|*), number_of_installments: *, java_enabled: boolean, screen_color_depth: number, screen_width, screen_height, timezone_offset: *}}}
              */
-            getData: function () {
+            getCcData: function () {
                 var browserInfo = threeDS2Utils.getBrowserInfo();
 
                 var data = {
@@ -296,6 +293,16 @@ define(
                 this.vaultEnabler.visitAdditionalData(data);
                 return data;
             },
+            /**
+             * Get data for place order
+             * @returns {{method: *}}
+             */
+            getData: function() {
+                var data = {
+                    'method': this.item.method
+                };
+                return data;
+            },
             /**
              * Returns state of place order button
              * @returns {boolean}
@@ -324,12 +331,7 @@ define(
                     self.isPlaceOrderActionAllowed(false);
 
                     //update payment method information if additional data was changed
-                    selectPaymentMethodAction(this.getData());
-
-                    // here I can remove all the data collected from the card component
-                    // OR I should create a new getData function which just retrieves the data necessary for the 3ds2 flow
-
-
+                    selectPaymentMethodAction(this.getCcData());
                     setPaymentMethodAction(this.messageContainer).done(
                         function (responseJSON) {
                             fullScreenLoader.stopLoader();
@@ -351,16 +353,6 @@ define(
                 var response = JSON.parse(responseJSON);
 
                 if (!!response.threeDS2) {
-
-                    $('#threeDS2Modal').modal({
-                        // disable user to hide popup
-                        clickableOverlay: false,
-                        // empty buttons, we don't need that
-                        buttons: []
-                    });
-
-                    $('#threeDS2Modal').modal("openModal");
-
                     // render component
                     self.renderThreeDS2Component(response.type, response.token);
                 } else {