diff --git a/hosting/static/hosting/js/payment.js b/hosting/static/hosting/js/payment.js index fa89f218..12d64cf9 100644 --- a/hosting/static/hosting/js/payment.js +++ b/hosting/static/hosting/js/payment.js @@ -178,8 +178,8 @@ $(document).ready(function () { } var $form_new = $('#payment-form-new'); - $form_new.submit(payWithStripe_new); - function payWithStripe_new(e) { + $form_new.submit(payWithStripe); + function payWithStripe(e) { e.preventDefault(); function stripeTokenHandler(token) { @@ -199,12 +199,80 @@ $(document).ready(function () { if (typeof window.processing_text !== 'undefined') { process_text = window.processing_text } +lear $form_new.find('[type=submit]').html(process_text + ' '); // Send the token to your server stripeTokenHandler(result.token); } }); + + stripe.createPaymentMethod({ + type: 'card', + card: cardNumberElement + }).then(function(result) { + if (result.error) { + showError(result.error.message); + } else { + // Send paymentMethod.id to server + fetch('/ajax/confirm_payment', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + payment_method_id: result.paymentMethod.id + }) + }).then(function(result) { + // Handle server response (see Step 3) + result.json().then(function(json) { + handleServerResponse(json); + }); + }); + } + }); + + function showError(msg) { + var errorElement = document.getElementById('card-errors'); + errorElement.textContent = msg; + } + + function handleServerResponse(response) { + if (response.error) { + // Show error from server on payment form + showError(response.error.message); + } else if (response.requires_action) { + // Use Stripe.js to handle required card action + handleAction(response); + } else { + // Show success message + } + } + + function handleAction(response) { + stripe.handleCardAction( + response.payment_intent_client_secret + ).then(function(result) { + if (result.error) { + // Show error in payment form + } else { + // The card action has been handled + // The PaymentIntent can be confirmed again on the server + fetch('/ajax/confirm_payment', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + payment_intent_id: result.paymentIntent.id + }) + }).then(function(confirmResult) { + return confirmResult.json(); + }).then(handleServerResponse); + } + }); + } + } /* Form validation */