带有加载屏幕的 Stripe Checkout API 上的模糊关闭回调

Question

在 Stripe Checkout 关闭回调中是否有任何方法可以确定它是如何触发的？

例如，我有以下代码，当有人点击结帐按钮时会触发该代码：

        // fade in our loading screen
        $("#loading-screen").stop(true,true).fadeIn(200);

        var handler = StripeCheckout.configure({
            key: STRIPE_PUBLISHABLE_KEY,
            image: STRIPE_ICON,
            closed: function () {
                // if user clicks close button, also hide the loading screen
                $("#loading-screen").stop(true,true).fadeOut(200);
            },
            token: function(token) {
                // post payment info back to the server via ajax
                var data = {
                    action : 'checkout',
                    paymentToken: token.id
                };
                $.post(
                    ajaxurl,
                    data,
                    function (response) {
                        // after response from server, fade out loading screen and update page or trigger error
                        $("#loading-screen").stop(true,true).fadeOut(200);
                        if (response.success) {
                            $("#checkout-form").html(response.output);
                        } else {
                            alert("unknown error. try again later.");
                        }
                    },
                    "json"
                );

            }

这里的想法是，当我单击付款上的关闭按钮时 window，或者一旦我从服务器获得某种响应，加载屏幕就会消失。

但是，似乎 closed 回调不仅在有人点击关闭按钮时触发，而且在 Stripe 端成功完成付款后触发，但在我的 ajax 调用完成。

因此，加载屏幕在操作完成之前被删除，这让用户感到困惑。显然可以做一些事情来优化服务器端的慢速命令，但我也想尝试在客户端修复这个问题。

所以基本上，我需要找到一种方法来区分通过取消按钮关闭和通过成功付款关闭，不幸的是 Stripe Checkout Documentation 没有提供有关该过程的大量详细信息。

有什么建议吗？

更新：

我想我可能找到了一种方法，但这取决于令牌回调总是发生在关闭回调之前。

基本上我只是设置了一个标志，指示令牌回调是否被触发。

        var token_triggered = false;

        // fade in our loading screen
        $("#loading-screen").stop(true,true).fadeIn(200);

        var handler = StripeCheckout.configure({
            key: STRIPE_PUBLISHABLE_KEY,
            image: STRIPE_ICON,
            closed: function () {
                // if user clicks close button, also hide the loading screen
                if (!token_triggered) {
                    $("#loading-screen").stop(true,true).fadeOut(200);
                }
            },
            token: function(token) {
                token_triggered = true;
                // post payment info back to the server via ajax
                var data = {
                    action : 'checkout',
                    paymentToken: token.id
                };
                $.post(
                    ajaxurl,
                    data,
                    function (response) {
                        // after response from server, fade out loading screen and update page or trigger error
                        $("#loading-screen").stop(true,true).fadeOut(200);
                        if (response.success) {
                            $("#checkout-form").html(response.output);
                        } else {
                            alert("unknown error. try again later.");
                        }
                    },
                    "json"
                );

            }

在我做过的几次测试中，它似乎工作正常，但是有人知道是否有任何保证令牌在关闭前总是会触发吗？

更新#2：

在 freenode 上的#stripe 频道询问后，我被告知 as of April 6, it appears Stripe has ensured that token always will fire prior to closed.

所以我相信这解决了我的问题并让我能够区分这两个事件。

Answer 1

正如我在上面的更新中指出的那样，自 2015 年 4 月 6 日起，令牌回调应始终在关闭回调之前触发。这意味着我们可以设置一个标志来指示令牌回调是否曾经被触发，从而使我们能够区分事件。

var token_triggered = false;
var handler = StripeCheckout.configure({
     ...
     closed: function() {
          if (!token_triggered) {
              // close button click behavior goes here
          } else {
              // payment completion behavior goes here
          }
     },
     token: function(token) {
          token_triggered = true;
     }
     ...
});

带有加载屏幕的 Stripe Checkout API 上的模糊关闭回调

Ambiguous close callback on Stripe Checkout API with loading screen

javascript

jquery

stripe-payments