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

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

2 个答案: