10

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;
});
4

2 回答 2

8

处理此问题的最佳方法可能是在处理时显示微调器或其他东西。

关闭是 Stripe 为自定义集成提供的一个选项。每当通过单击 X 按钮提交或关闭表单时都会调用它。希望这会很有用。
eg: handler.open({closed : function(){/* some function here*/}})

于 2014-12-24T10:53:33.507 回答
3

根据@brian 的评论，已确认延迟发生在返回 Stripe 令牌之后和提交表单之前。要解决原始问题，请在返回令牌后根据需要添加覆盖和/或禁用元素。

// 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;
});
于 2013-06-14T16:14:42.350 回答