Skip to main content

Turbolinks Not Playing Nicely With Cocoon and Stripe

Rails • Asked by Steve Polito

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 turbolinks from application.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 /new and /edit routes in question, that DID NOT solve the issue. My guess is that I need to disable turbolinks on another route or action in the app, but just not sure what that would be.

+1 for this. Your Stripe Elements v3 tutorial leaves your application in this state.

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.


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 24,647+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.