10

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

2 に答える 2

8

これに対処する最善の方法は、処理中にスピナーまたは何かを表示することです。

Closed は、カスタム統合のために 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 に答える