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

            }

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

但是,看起来封闭的回调不仅会在有人点击关闭按钮时触发,而且在Stripe结束时付款成功完成后,但在我的ajax调用完成之前触发.

结果,在操作完成之前移除了加载屏幕,这使用户感到困惑.显然可以做一些事情来优化服务器端的慢速命令,但我想尝试在客户端修复它.

所以基本上,我需要找到一种方法来区分通过取消按钮关闭和通过成功支付关闭,不幸的是,Stripe Checkout文档没有提供关于该过程的大量细节.

有什么建议？

---

更新:

我想我可能已经找到了一种方法,但它取决于在关闭的回调之前总是发生的令牌回调.

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

        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频道询问时,我被告知截至4月6日,看来Stripe确保令牌始终在关闭之前触发.

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

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