How can I modify Stripe Checkout to instead send an AJAX request?

Question

I'm using Stripe and Checkout to create a payment form and I want to be able to use Checkout's awesome javascript library, but I also want to change the form submission from just a normal POST to an AJAX POST.

So I tried adding a handler to the form element you're supposed to have, but my console line was never triggered, so it's not submitting using the given form.

Then I tried looking into the code that's brought up when the overlay is triggered. It's a bit confusing and I'm just wondering if anybody else was able to figure it out, or if it's made difficult because it's a security matter?

// Stripe plugin
<form id="payment_form" method='post' action="{{url_for('process_payment')}}">
        <script
            src="https://checkout.stripe.com/checkout.js" class="stripe-button"
            data-key="test key">
        </script>
</form>

// Form submit handler
$(document).ready(function(){
    $("#payment_form").submit(function(e) {
        console.log("Processing...");
        ajax_payment();
        return false;
    });

});

Answer 1

Stripe triggers the form's submit() function. You can set event handler (not listener!) to it to prevent sending normal POST request.

Example using plain javascript:

var form = document.getElementById('myStripeForm');
form.submit = function() {
    // ... get form data here and send it through ajax

    // Prevent form submit.
    return false;
}

Example using jQuery:

$('#myStripeForm').get(0).submit = function() {
    var data = $(this).serializeArray();
    // process data and send ajax request

    $.ajax(...);

    // Prevent form submit.
    return false;
}

Answer 2

There are two options for Checkout integrations, the first, which you're using, is the 'simple' integration. The second is a custom integration which has a success callback ('token' function). It looks like this:

<script>
  var handler = StripeCheckout.configure({
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
    image: '/square-image.png',
    token: function(token, args) {
      // Use the token to create the charge with a server-side script.
      // You can access the token ID with `token.id`
    }
  });

  document.getElementById('customButton').addEventListener('click', function(e) {
    // Open Checkout with further options
    handler.open({
      name: 'Demo Site',
      description: '2 widgets ($20.00)',
      amount: 2000
    });
    e.preventDefault();
  });
</script>

You would put your ajax_payment function within the token function.