How to reload / refresh Stripe Checkout button?

Question

I'm submitting my Stripe Checkout form via AJAX (catching the form submit event) because I have a complex multi-pane HTML form and want to display payment errors from Stripe without having to reload the page and regenerate the form or making the user re-enter a load of info.

This all works fine, except once the Stripe Checkout button is used once it's disabled. After I display the error message on the booking form page, I need the user to be able to click the Stripe button again and try different payment info. How do I reactivate the Stripe button? Do I need to remove the whole Stripe button script from the DOM (I'm using jQuery) and re-insert it (or similar code) fresh?

My standard Checkout button code:

<script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="my_stripe_key"
    data-image="mylogo.png"
    data-name="My Booking Form"
    data-zip-code="true"
    data-locale="auto"
    data-email=""
    data-description="Payment for this booking"
    data-currency="gbp"
    data-amount=""
    data-label="Pay and book!">
</script>   

and if relevant, my AJAX form submit code:

$('#booking-form').get(0).submit = function() {
  var formdata = $(this).serialize();

  $.ajax({
    headers: {
      'X-CSRF-TOKEN': $('#booking-form > input[name="_token"]').val()
    },
    type: 'POST',
    url: 'book',
    dataType: 'json',
    data: formdata,
    success: function(data) {
      if (data.response == 'ok') // Payment went through OK
      {
        // Redirect to booking confirmation page:
        window.location.replace(data.url);
      } else // Payment failed, alert user to try again
      {
        $('#erroralert').text('Sorry, payment failed, please try again').removeClass('nodisplay');
      }
    },
    error: function(data) // Server error
    {
      console.log('Error:', data.responseText);
    }
  });

  // Prevent form submit.
  return false;
}

Answer 1

You have an attribute disabled="true" which is set to the submit button element after the form is submitted. You just need to remove this attribute : $('button[type="submit"]').get(0).removeAttr("disabled"); .

Example that works :

http://jsfiddle.net/5xq8Lhda

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="booking" action="your-server-side-code" method="POST">
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_TYooMQauvdEDq54NiTphI7jx" data-amount="999" data-name="Stripe.com" data-description="Widget" data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto" data-zip-code="true">
  </script>
</form>

<script>
  $('#booking').get(0).submit = function() {
    $('button[type="submit"]').get(0).removeAttr("disabled");
    return false;
  }
</script>

To use your example, you should do something like that :

$('#booking-form').get(0).submit = function() {
  var formdata = $(this).serialize();

  $.ajax({
    headers: {
      'X-CSRF-TOKEN': $('#booking-form > input[name="_token"]').val()
    },
    type: 'POST',
    url: 'book',
    dataType: 'json',
    data: formdata,
    success: function(data) {
      if (data.response == 'ok') // Payment went through OK
      {
        // Redirect to booking confirmation page:
        window.location.replace(data.url);
      } else // Payment failed, alert user to try again
      {
        $('#erroralert').text('Sorry, payment failed, please try again').removeClass('nodisplay');
        $('button[type="submit"]').get(0).removeAttr("disabled");
      }
    },
    error: function(data) // Server error
    {
      console.log('Error:', data.responseText);
    }
  });

  // Prevent form submit.
  return false;
}

Answer 2

If you intend to submit your form by AJAX, or just generally want more control over the checkout experience, I'd recommend using the Custom Checkout integration here.

Simple Checkout was designed around a very straight-forward use case: fill out the form, complete a simple form submit. You can do things like attempt to grab the submit button and remove the disabled attribute, though Stripe could always change things up, it may not act as you intend.

The Custom integration provides a perfect place for your ajax submit or additional js code, in the token callback,

token: function(token) {
   // your form submission or next steps here
}