Custom Stripe checkout button will not work on mobile devices

Question

I am currently integrating Stripe into a website and am encountering a problem with custom integration check.

I followed custom integration instructions on the Stripe website and it works great on the desktop, but unfortunately does nothing on the mobile device.

I have a jQuery handler that starts when my user button is clicked and it starts handler.open({…}) according to the docs, but the following JavaScript error is logged:

 TypeError: 'undefined' is not an object (evaluating '(s=this.frame).focus') - checkout.js:2:21656 

Any ideas?

Edit: After playing it multiple times, I found that it does not start in iOS 7 if the delay exceeds 1 second for a call.

For example, the following works:

 setTimeout(function(){stripe_payment();}, 1000); 

And the following:

 setTimeout(function(){stripe_payment();}, 2000); 

In the above examples, stripe_payment() sets and calls the handler. As mentioned earlier, the same effect can be caused when the handler is called after the AJAX call (which presumably takes too much time). It's also worth noting that even a 5 second delay on desktop browsers works great.

Answer 1

This is because this.frame is undefined. In Stripe checkout.js, this.frame actually set immediately before the error:

 this.frame = window.open(this.fullPath(), "stripe_checkout_tabview") 

The problem occurs due to the window.open error. This is due to browser pop-up blocking; window.open can only be successfully called from some event handlers (for example, clicking a button). If you call it from a (long enough) timeout, it may fail.

You need to call handler.open({…}) directly from the button click event. If you call it from the result of an AJAX request, you will need to reorganize your code so that it is not required.