I have been trying to integrate stripe elements on my sapper framework.
I am using this library svelte-strip-js, all steps work fine but I have started to see these issues continuously on my console
Access to XMLHttpRequest at 'https://r.stripe.com/0' from
origin 'https://js.stripe.com' has been blocked by
CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
POST https://r.stripe.com/0 net::ERR_FAILED 400
Uncaught (in promise) NetworkError: https://r.stripe.com/0
at XMLHttpRequest.r.a.g.onreadystatechange
My guess is this has something to do with the content security policy. I followed the stripe docs and have created a CSP that suits my use case after verifying from this evaluator
<meta http-equiv="Content-Security-Policy"
content="
connect-src * https://api.stripe.com;
frame-src https://js.stripe.com https://hooks.stripe.com;
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://js.stripe.com;
object-src 'none';
"
/>
It appears that this was a known configuration issue on Stripe’s end and a fix was deployed. You shouldn’t be seeing these errors anymore. From what I can tell from Stripe’s discord server threads regarding these errors, r.stripe.com is just for tracking metrics so it should not have any impact on the ability to make payments.