Failed to execute 'postMessage' on 'DOMWindow' using Stripe on rails 7 - ruby-on-rails

Question

I have integrated Stripe payment in my rails 7 app and the stripe form does not show.
when i check inspect element in browser, this error shows:
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').
purchases/show.html.erb
<h1>Purchase <%= #product.name %></h1>
<%= form_with url: product_purchase_path(#product), local: true, id: "payment-form", data: { payment_intent_id: #payment_intent.client_secret} do |form| %>
<div class="form-group">
<label for="card-element">Credit or debit card</label>
</div>
<div id="card-element" class: "form-control">
</div>
<div id="card-errors" role="alert"></div>
</div>
<div class="form-group">
<label>Name on Card</label>
<%= form.text_field :name_on_card, placeholder: "Full Name", class: "form-control" %>
</div>
<div class="form-group">
<%= form.hidden_field :payment_intent_id, value: #payment_intent.id %>
<button class="btn btn-primary">Submit Payment</button>
</div>
<% end %>
Application.js
document.addEventListener("turbo:load", () => {
const public_key = document.querySelector("meta[name= 'stripe-key']").getAttribute("content")
const stripe = Stripe(public_key)
const elements = stripe.elements()
const card = elements.create('card')
card.amount('#card-element')
card.addEventListener("change", (event) => {
var displayError = document.getElementById('card-errors')
if (event.error) {
displayError.textContent = event.error.message
} else {
displayError.textContent = ''
}
})
})
This there any solution for this?

Answer 1

That's because Stripe only allows https connections for security reasons. To resolve this issue you either serve your app over https or you can use a Tool such as ngrok
Download and install ngrok from the official website (https://ngrok.com/)
Start your rails app rails serve
Start ngrok by running the following command in a seperate window
ngrok http 3000
This will start a secure public url (e.g. https://your-unique-subdomain.ngrok.io ) that you can use to access your local development environment. Use this URL in your Stripe form and try accessing the page again.