javascript - 带有加载屏幕的 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"
                );

            }

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

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

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

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

有什么建议吗？

---

更新:

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

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

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

            }

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

---

更新 #2:

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

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

Answer 1

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

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