15

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

enter image description here

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

Mike Marshall
  • 7,788
  • 4
  • 39
  • 63

3 Answers3

22

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)
ncubica
  • 8,169
  • 9
  • 54
  • 72
  • since you are using jquery, you might want to use $('.stripe_checkout_app').is(":visible") stripe was not removing the dom from the page for us – artfulhacker Feb 27 '15 at 20:16
  • Cool thats another way in my case they were removing the dom – ncubica Feb 27 '15 at 22:00
  • Just a question do yo put a timer or how do you assign is:visible to an event? – ncubica Feb 27 '15 at 22:01
  • we put it in a timer, just interval until the dom no longer existed or was not visible. that way it supported both cases. – artfulhacker Feb 27 '15 at 22:16
  • Cool i will update my answer with your suggestion if you allow me – ncubica Feb 27 '15 at 22:43
  • 1
    Both of these methods are broken. On mobile the stripe dialogue is a new tab so $('.stripe_checkout_app').is(":visible") will always return false. I'm still searching for a working solution. – Rich Aug 27 '15 at 11:25
  • @Rich you can detect if the user close the tab as well, when a new tab is create it should have be register in the parent window. So you could expand and adapt the same concept for that as well. Just an idea but should work. http://stackoverflow.com/questions/6340160/how-to-get-the-references-of-all-already-opened-child-windows – ncubica Aug 27 '15 at 21:20
  • 11
    The only method I have found that works reliably on desktop and mobile is to register both a 'token' callback and a 'closed' callback. If 'token' had not previously been called when 'closed' is called, then the user closed the window without generating a 'token (I.e. without making a payment) – Rich Aug 28 '15 at 00:44
  • This solved my issue. Definitely a +1 for the creativity. – Rich Davis Nov 10 '18 at 00:12
15

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.

ncubica
  • 8,169
  • 9
  • 54
  • 72
Kris White
  • 651
  • 11
  • 20
11

(I work on Stripe Checkout)

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

user3250670
  • 1,172
  • 8
  • 5
  • Thanks, I saw the comments in the docs but was hoping there was a quick hook for simple mode. – Mike Marshall Jan 29 '14 at 21:00
  • 7
    Closed is called whenever the form is submitted though, even if successful. How can I detect if Stripe is opened, then closed, without data being submitted, aka cancelled? Right now I have `handler.open({closed : function(){/*this calls no matter what*/}})` – bafromca Sep 09 '14 at 22:33
  • Have you got any solution? Actually i got stuck. when i use handler.open({closed : function(){}}) loader get closed either user close the popup window or payment done before redirect to successful page. Any help would be appreciated @bafromca – khurshed alam Jan 16 '19 at 12:15