条带结帐模式的事件或方法 [英] Event or Methods for the Stripe Checkout Modal

问题描述

Stripe Checkout模式关闭时是否有任何方法可以触发事件？

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

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

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.

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

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.

任何其他想法？

我的代码如下，改编自 https：// stripe .com / docs / checkout 。

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

推荐答案

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

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

这篇关于条带结帐模式的事件或方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！