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:

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