23

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?

sohil vaghasiya
  • 533
  • 1
  • 5
  • 13

3 Answers3

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.

Tharindu Lakshan
  • 3,995
  • 6
  • 24
  • 44
0

Might be you guys compress or aggregate your site javascript files for performance. Try remove the compress or the aggregate and test again.

mana
  • 1,075
  • 1
  • 24
  • 43
-1

My last test proved to be valuable. It seems you either need to do a masked redirect, proxy route, url rewrite, or nested iframe to solve this issue.

  • 1
    You really need to explain how to perform each of those 4 solutions in much more detail than merely mentioning them by name. I am a reviewer. StackOverflow requested a review of this answer. Your answer is appreciated and (if explained more) helpful. This comment is intended to help you make a good-enough answer to be either good or excellent. – Andreas ZUERCHER Apr 28 '21 at 16:22