Rails 7 Turbo using this gem (stripe-rails) produces `Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://js.stripe.com') does not match the recipient window's origin`

[jasonfb]

Rails 7 with Turbo enabled interactions

if this gem is install and the Stripe JS is loaded at all, then all page navigations produce this JS error in the console:

(index):1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://js.stripe.com') does not match the recipient window's origin

(the error doesn't actually block anything)

also reported here
stripe/react-stripe-js#188

[jasonfb]

a fix has been documented here:

hotwired/turbo#270 (comment)

// persist initial stripe iFrame DOM Object across turbo AJAX page requests
let stripeIFrameQuery = 'iframe[src^="https://js.stripe.com"]';
document.addEventListener('turbo:before-render', function (event) {
  const stripeIFrame = document.querySelector(stripeIFrameQuery);
  const newStripeIFrame = event.detail.newBody.querySelector(stripeIFrameQuery);
  if (stripeIFrame && !newStripeIFrame){
    event.detail.newBody.appendChild(stripeIFrame)
  }
});

I'd recommend either this fix be added directly to this gem or that there be some kind of 3rd gem that glues Turbo and stripe-rails together using the code above.