Stripe Checkout 模式的事件或方法答案

【问题标题】：Event or Methods for the Stripe Checkout ModalStripe Checkout 模式的事件或方法
【发布时间】：2013-06-09 04:51:12
【问题描述】：

有什么方法可以在 Stripe Checkout 模式关闭时触发事件？

在 Stripe 的模态关闭和响应交付之间大约有 0.5-1 秒的延迟。在那个时候，用户可能会点击离开页面等。为了解决这个问题，我们可以做一些事情，比如禁用所有链接或在页面上放置一个覆盖（“覆盖所有”），只有在 Stripe 完成处理后才会删除.

问题在于，如果该人决定关闭 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;
});

【问题讨论】：

那里不应该有延迟。我们在模式关闭之前调用您的令牌回调。您可以在收到此回调后禁用您的提交按钮。您确定延迟不在于您提交表单吗？
我们看到了同样的问题，但没有看到上面 Brian 提到的行为 - 对我们来说，在 Stripe 模态完成关闭后调用令牌函数，这大约需要 1 秒，所以我们'没有很好的方法来禁用按钮。也许我们设置错了？

标签： javascript jquery stripe-payments

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：