diff --git a/hosting/static/hosting/js/payment.js b/hosting/static/hosting/js/payment.js index 3c4d67da..2cac9e82 100644 --- a/hosting/static/hosting/js/payment.js +++ b/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(); diff --git a/hosting/templates/hosting/includes/_card_input.html b/hosting/templates/hosting/includes/_card_input.html index 8cf2d55b..4e61a367 100644 --- a/hosting/templates/hosting/includes/_card_input.html +++ b/hosting/templates/hosting/includes/_card_input.html @@ -40,6 +40,9 @@ {% endif %} {% endfor %} +