Stripe Elements and Turbolinks 5

I was having a hell of a time getting Stripe Elements to work with Turbolinks 5, specifically the Turbolinks iOS wrapper. Hopefully others who see the same issues can benefit from what I learned.

The symptoms were:

• Stripe Elements worked in the desktop browser, in mobile safari, but not in the Turbolinks-enabled iOS app

What I learned:

• For Turbolinks-enabled iOS apps, all forms must be sent via AJAX w/ remote: true (or the absence of local: true depending on your version of Rails)
• When using rails-ujs, you must intercept the ajax:before event and call event.preventDefault until the Stripe JS library has had a chance to retrieve the token
• Once the token has been retrieved and added to the form, you must call Rails.fire(form, 'submit')
• In your interception of ajax:before this time, you must not call event.preventDefault() since you now have the token

For reference, here’s my javascript:

• https://gist.github.com/dpaola2/1f59fbc0c5cc1dce52583448d0ac71a9

At least I learned a lot about how rails-ujs, turbolinks, and Stripe Elements work under the hood!