Turbolinks Not Playing Nicely With Cocoon and Stripe
Problem
I am getting the following console error on a form using cocoon. However, on page refresh the error is gone and the form works.
js.stripe.com/:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided
('https://js.stripe.com') does not match the recipient window's origin ('http://localhost:3000')
I am loading stripe in the head <%= javascript_include_tag 'application', 'https://js.stripe.com/v3/', 'data-turbolinks-track': 'reload' %>.
Things I Tried
- When I removed
//= require turbolinksfromapplication.js, that solved issue. - When I added
<body data-turbolinks="false">to the body, that solved issue. - However, when I conditionally added
<body data-turbolinks="false">to the/newand/editroutes in question, that DID NOT solve the issue. My guess is that I need to disableturbolinkson another route or action in the app, but just not sure what that would be.
Are you using jQuery? I ask because I was having this same issue when wrapping the stripe js in
document.addEventListener("turbolinks:load", function () { ...
changing to
$(document).on("turbolinks:load", function() { ...
made it work. I don't understand why this should be different, and YMMV, but it for what it's worth that worked for me and stripe and turbolinks lived happily ever after.