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 oflocal: true
depending on your version of Rails) - When using
rails-ujs
, you must intercept theajax:before
event and callevent.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 callevent.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!