All threads / Turbolinks Not Playing Nicely With Cocoon and Stripe

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Turbolinks Not Playing Nicely With Cocoon and Stripe

Steve Polito asked in Rails

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.

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 34,885+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.