Stripe “Simple” Checkout - detect if close button is clicked

Question

I've integrated Stripe Checkout into 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).

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

Answer 1

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

$(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.

--- EDIT ---

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

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

Answer 2

(I work on Stripe Checkout)

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

Answer 3

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.