Is there any way to trigger an event when the Stripe Checkout modal is closed?

There is about 0.5-1 second delay between the time that Stripe's modal closes and their response is delivered. In that time, a user might click away from the page etc. To address the issue, we can do something like disable all links or put an overlay ("cover-all") over the page that is removed only when Stripe is done processing.

The problem is that there is no way to close that overlay if the person decides to close the Stripe modal (instead of trying to process a payment). You can't target the modal (e.g. $('.stripe-app')) because of the same origin policy.

Any alternative ideas?

My code is below, adapted from .

// custom Stripe checkout button with custom overlay to avoid UI confusion during payment processing
$('.btn-stripe').click(function(){

  var token = function(res){
    var $input = $('<input type=hidden name=stripeToken />').val(res.id);
    $('.form-stripe').append($input).submit();
  };

  StripeCheckout.open({
    key:         STRIPE_KEY,
    address:     false,
    amount:      STRIPE_AMT,
    currency:    'usd',
    name:        'Purchase',
    description: STRIPE_DESC,
    panelLabel:  'Checkout',
    token:       token
  });

    $('.cover-all').show();

  return false;
});

Is there any way to trigger an event when the Stripe Checkout modal is closed?

There is about 0.5-1 second delay between the time that Stripe's modal closes and their response is delivered. In that time, a user might click away from the page etc. To address the issue, we can do something like disable all links or put an overlay ("cover-all") over the page that is removed only when Stripe is done processing.

The problem is that there is no way to close that overlay if the person decides to close the Stripe modal (instead of trying to process a payment). You can't target the modal (e.g. $('.stripe-app')) because of the same origin policy.

Any alternative ideas?

My code is below, adapted from https://stripe./docs/checkout.

// custom Stripe checkout button with custom overlay to avoid UI confusion during payment processing
$('.btn-stripe').click(function(){

  var token = function(res){
    var $input = $('<input type=hidden name=stripeToken />').val(res.id);
    $('.form-stripe').append($input).submit();
  };

  StripeCheckout.open({
    key:         STRIPE_KEY,
    address:     false,
    amount:      STRIPE_AMT,
    currency:    'usd',
    name:        'Purchase',
    description: STRIPE_DESC,
    panelLabel:  'Checkout',
    token:       token
  });

    $('.cover-all').show();

  return false;
});

• javascript
• jquery
• stripe-payments

• There shouldn't be a delay there. We call your token callback before the modal is closed. You could disable your submit button after receiving this callback. Are you sure the delay isn't in you submitting your form? – brian Commented Jun 13, 2013 at 10:52
• We are seeing the same issue, but are not seeing the behavior noted by Brian above - for us, the token function is called after the Stripe modal is done closing, which takes about 1 second, so we're stuck with no good way to disable the buttons. Perhaps we have something set wrong? – bprotas Commented Jun 11, 2014 at 19:45

2 Answers 2

Best way to deal this may be to show a spinner or something while it is processing.

Closed is a option provided by Stripe for Custom Integration. It is called whenever the form is submitted or closed by clicking on the X button. Hopefully, this can be useful.
eg: handler.open({closed : function(){/* some function here*/}})

Per ment from @brian, it was confirmed that the delay occured after the Stripe token is returned and before the form is submitted. To address the original problem, add overlay and/or disable elements as needed once the token is returned.

// custom Stripe checkout button with disabling of links/buttons until form is submitted
$('.btn-stripe').click(function(){

  var token = function(res){
    var $input = $('<input type=hidden name=stripeToken />').val(res.id);

    // show processing message, disable links and buttons until form is submitted and reloads
    $('a').bind("click", function() { return false; });
    $('button').addClass('disabled');
    $('.overlay-container').show();

    // submit form
    $('.form-stripe').append($input).submit();
  };

  StripeCheckout.open({
    key:         'key',
    address:     false,
    amount:      1000,
    currency:    'usd',
    name:        'Purchase',
    description: 'Description',
    panelLabel:  'Checkout',
    token:       token
  });

  return false;
});