条带结帐模式的事件或方法

Question

Stripe Checkout模式关闭时有没有办法触发事件？

在Stripe的模态关闭和响应传递之间有大约0.5-1秒的延迟.在那个时候,用户可能会点击页面等.为了解决这个问题,我们可以做一些事情,比如禁用所有链接或在页面上放置一个叠加层("全部覆盖"),只有当Stripe完成处理时才会删除.

问题是,如果此人决定关闭条纹模式(而不是尝试处理付款),则无法关闭该叠加层.由于相同的原始策略,您无法定位模态(例如$('.stripe-app')).

还有其他想法吗？

我的代码如下,改编自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

处理此问题的最佳方法可能是在处理时显示微调器或其他内容.

Closed是Stripe for Custom Integration提供的选项.只要通过单击X按钮提交或关闭表单,就会调用它.希望这可能有用.
eg: handler.open({closed : function(){/* some function here*/}})

Answer 2

根据 @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;
});