Event or Methods for the Stripe Checkout Modal

Question

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.com/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;
});

Answer 1

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*/}})

Answer 2

Per comment 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;
});