Failed to execute 'postMessage' on 'DOMWindow' using Stripe Payment Module

Question

I have integrated Stripe payment module in my angular app. When I run the app it shows me below error.

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

Is there any solution for this?

Answer 1

The result was the placeholders for entering the card number, CVC and expiry did not appear on our web app. Although the call to https://js.stripe.com returned a 200 the network query showed it was pending. (Interestingly and perhaps related, API calls to Intercom will also returning a 200 tho pending)

Browsers: The issue only happened on Chrome 67 (Firefox 60 and Safari 11 - all on Mac High Safari - worked fine)

• Turned off all Chrome extensions - cc placeholders still didn't appear
• Shutdown and restarted Chrome - they appeared. Hoorah!
• Restarted extensions - browserstack, react, redux - cc goodies still appeared
• Shutdown and restarted Chrome - cc goodies still visible.

Given that I've been using Chrome with the above extensions for ages without this being an issue, it seems more likely that restarting Chrome resolved it. Time will tell.