Attempt 3ds on payment intents

hosting/static/hosting/js/payment.js

@@ -186,6 +186,7 @@ $(document).ready(function () {
     $form_new.submit(payWithPaymentIntent);
     window.result = "";
     window.card = "";
+/*
     function payWithPaymentIntent(e) {
         e.preventDefault();
 
@@ -212,6 +213,81 @@ $(document).ready(function () {
           });
         window.card = cardNumberElement;
     }
+*/
+
+    function payWithPaymentIntent(e) {
+        e.preventDefault();
+    
+        function stripePMHandler(paymentMethod) {
+            // Insert the token ID into the form so it gets submitted to the server
+            console.log(paymentMethod);
+            $('#id_payment_method').val(paymentMethod.id);
+            submitBillingForm(paymentMethod.id);
+        }
+    
+        stripe.createPaymentMethod({
+            type: 'card',
+            card: cardNumberElement,
+        }).then(function(result) {
+            if (result.error) {
+                var errorElement = document.getElementById('card-errors');
+                errorElement.textContent = result.error.message;
+            } else {
+                console.log("created paymentMethod " + result.paymentMethod.id);
+    
+                // Check if 3D Secure authentication is required
+                if (result.paymentMethod.threeDSecure === 'required' || result.paymentMethod.threeDSecure === 'recommended') {
+                    // 3D Secure authentication is recommended or required, handle it
+                    display3DSecureModal(result.paymentMethod);
+                } else {
+                    // No 3D Secure authentication required, proceed with handling the payment method
+                    stripePMHandler(result.paymentMethod);
+                }
+            }
+        });
+        window.card = cardNumberElement;
+    }
+    
+    function display3DSecureModal(paymentMethod) {
+        // Code to display a modal or redirect user for 3D Secure authentication
+        console.log('3D Secure authentication is required or recommended for payment method:', paymentMethod);
+    
+    }
+
+    function display3DSecureModal(paymentMethod) {
+        var iframe = document.createElement('iframe');
+        iframe.setAttribute('style', 'border: 0; width: 100%; height: 100%;');
+        iframe.src = paymentMethod.threeDSecure.redirect.url;
+        document.body.appendChild(iframe);
+    
+        window.addEventListener('message', function(event) {
+            if (event.origin === 'https://hooks.stripe.com') {
+                var data = JSON.parse(event.data);
+                if (data.type === 'stripe-3ds-complete') {
+                    if (data.payload.error) {
+                        // Handle 3D Secure authentication failure
+                        console.error('3D Secure authentication failed:', data.payload.error);
+                        handle3DSecureFailure(data.payload.error); // Call a function to handle the failure
+                    } else {
+                        var paymentMethodId = data.payload.paymentMethod.id;
+                        stripePMHandler({ id: paymentMethodId });
+                    }
+                    document.body.removeChild(iframe);
+                }
+            }
+        });
+    }
+    
+    function handle3DSecureFailure(error) {
+        // Handle 3D Secure authentication failure based on the error received
+        // For example, display an error message to the user or take appropriate action
+        console.error('3D Secure authentication failed:', error.message);
+    
+        // Display an error message to the user
+        var errorMessageElement = document.getElementById('3ds-error-message');
+        errorMessageElement.textContent = '3D Secure authentication failed: ' + error.message;
+    }
+
     function payWithStripe_new(e) {
         e.preventDefault();
 

hosting/templates/hosting/includes/_card_input.html

@@ -40,6 +40,9 @@
             {% endif %}
         {% endfor %}
     </div>
+    <div id="error-section">
+        <p id="3ds-error-message" style="color: red;"></p>
+    </div>
     <div class="text-right">
         <button class="btn btn-vm-contact btn-wide" type="submit" name="payment-form">{%trans "SUBMIT" %}</button>
     </div>