javascript 条纹“简单”结帐 - 检测是否单击了关闭按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21441814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 20:55:16  来源:igfitidea点击:

Stripe "Simple" Checkout - detect if close button is clicked

javascriptstripe-payments

提问by Mike Marshall

I've integrated Stripe Checkoutinto my site and everything works great except for one aspect. I use the 'Simple' checkout mode where Stripe renders my checkout button for me. But I see no way in the docs to detect if the user clicks the close button (effectively cancelling the transaction - see image).

我已经将Stripe Checkout集成到我的网站中,除了一个方面之外,一切都很好。我使用“简单”结帐模式,其中 Stripe 为我呈现我的结帐按钮。但是我在文档中看不到检测用户是否单击关闭按钮的方法(有效地取消了交易 - 参见图片)。

enter image description here

在此处输入图片说明

Is there a way to detect this in 'Simple' mode (as opposed to Custom)?

有没有办法在“简单”模式下(而不是自定义)检测到这一点?

采纳答案by user3250670

(I work on Stripe Checkout)

(我在 Stripe Checkout 工作)

The 'closed' callback is only available in the custom integration.

“关闭”回调仅在自定义集成中可用。

回答by ncubica

Well you cannot have a callback, but what about if you create your own callback when stripe remove the iframe from your DOM.

好吧,您不能有回调,但是如果在条带从 DOM 中删除 iframe 时创建自己的回调呢?

$(document).on("DOMNodeRemoved",".stripe_checkout_app", close);

function close(){
  alert("close stripe");
}

so while its true that the 'closed'callback its not available this little hack can help you.

因此,虽然“关闭”回调确实不可用,但这个小技巧可以帮助您。

//this example its with JQuery.

//这个例子是用JQuery的。

--- EDIT ---

- - 编辑 - -

As @artfulhacker commented another way to do it would be to use the a setInterval timer and check if the class .stripe_checkout_appis visibleor not, could be something like:

正如@artfulhacker 评论的另一种方法是使用 setInterval 计时器并检查类.stripe_checkout_app是否visible存在,可能是这样的:

setInterval(function(){
    if(!$('.stripe_checkout_app').is(":visible")){
       alert("Stripe modal is hidden");
    }
},1000)

回答by Kris White

Simplest way that I have found is just to set a submit variable that's tested.

我发现的最简单的方法就是设置一个经过测试的提交变量。

    var submittedForm = false;

    var handler = StripeCheckout.configure({
        key: '{{ stripe.public_key }}',
        allowRememberMe: false,
        token: function(response, extradata) {
            var token = response.id;
            var card = response.card.id;
            submittedForm = true;
            $('#submit-text').html('Processing, stand by');
         //etc functionality to submit back to your own form
            }
    });



    //when actually triggering checkout.js
    handler.open({
                name: 'myCompanyName',
                amount: 1999,
     closed: function () {
                    if(submittedForm == false)
                        $('#submit-text').html('Start your Trial');
                }
           }
    });

This example changes the Submit button text when bringing up checkout.js. If it actually processes, so we get a token back, set submitted to true. The closed tests this. If it's false, it means they clicked X without submit, so we set the submit text back. If true, ignore so "Processing" remains while our own ajax post or whatever finishes.

此示例在打开 checkout.js 时更改提交按钮文本。如果它确实在处理,那么我们会取回一个令牌,将提交设置为 true。封闭式对此进行了测试。如果为 false,则表示他们在没有提交的情况下单击了 X,因此我们将提交文本设置回原位。如果为真,则忽略“处理”,而我们自己的 ajax 帖子或其他内容完成。