Stripe checkout - how to bind submit event?

Question

I'm using the Stripe checkout JS library in my webpage. I'd need to show a blocking "I'm processing your request" message as soon as the token is being submitted to my server

I need it because my serverside processing may require more than 5 seconds and I don't want the user to leave the page (or anything else that could invalidate the checkout process).

I have tried to bind a submit event on the stripe form in order to show a modal (for example!), but it turns out that Checkout.js is unbinding any submit event and there seems to be no way to detect the actual form submit.

Here's my code:

<form class="stripe-form" action="..." method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="..."
    data-email="..."
    data-label="Pay with Stripe"
    data-panel-label="Pay {{amount}}"
    data-amount="... " 
    data-currency="USD"
    data-name="..."
    data-description="..."
    data-image="...">
  </script>
</form>

<script type="text/javascript">
$(function(){

    stripeForm = $('.stripe-form');

    stripeForm.submit(function(e){
        console.log('going to submit'); //this is never called!
    });

});
</script>

As the comments says, the submit event is never triggered and I haven't find any workaround to detect it. Any ideas?

Note: I'm not including the more general Stripe library, only StripeCheckout is available.

Thank you all

score 0 · Answer 1 · answered May 01 '16 at 00:17

I'm having the same issue. It looks to me like checkout.js inserts an iframe so there isn't a way to bind to the submit event that I know of.

The only thing I've thought to do is show a loading message when you click on the Pay with Stripe button.

$( ".stripe-button-el" ).click(function() {
    $( "#loadingMessage" ).show();
});

But then you need to make the #loadingMessage hide if the user closes out of the Stripe payment modal.

score 0 · Answer 2 · edited Mar 13 '17 at 16:55

If you use the https://stripe.com/docs/checkout#integration-custom, you can use something like the following to create an overlay before you submit your form.

var form = document.querySelector('form');      
var handler = StripeCheckout.configure({
    key: 'STRIPE_PUBLIC_KEY',
    image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
    locale: 'auto',
    token: function(response) 
    {

        var overlay = document.createElement('div');
        overlay.className = 'my-overlay  my-overlay--visible';

        document.body.appendChild(overlay);

        form.submit();  
    }
});

Stripe checkout - how to bind submit event?

2 Answers2