Custom Stripe checkout button won't work on mobile

Question

I'm currently integrating Stripe into a website and have come across an issue with custom checkout integration.

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

I've got a handler in jQuery which fires when my custom button is clicked, and it runs handler.open({…}), as per 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 lots of playing around I've discovered that it fails to launch in iOS 7 if there's a delay greater than around 1 second to the call.

For example, the following works:

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

And the following does not:

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

In the above examples, stripe_payment() sets up and calls the handler. As mentioned originally, the same affect can be had when calling the handler after an AJAX call (which presumably takes too long). It's also worth noting that even a 5 second delay on desktop browsers works fine.

Answer 1

This is caused because this.frame is undefined. In Stripe's checkout.js, this.frame is actually set just before the error:

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

The problem occurs because window.open fails. This is because of the browser's popup blocker; window.open can only be successfully called from some event handlers (like a button press). If you're calling it from a (sufficiently long) timeout, it may fail.

You need to call handler.open({…}) directly from the button's click event. In case you're calling it from the result of an AJAX request, you'll need to refactor your code so that this isn't required.