CORS issue with Stripe

[NetOpWibby]

Does anyone have advice on how to best integrate Stripe with SvelteKit? I'm getting CORS issues.

Blocked a frame with origin "https://js.stripe.com/" from accessing a cross-origin frame.

(Also get this message with https://m.stripe.network)

[antony]

This isn't a SvelteKit issue per-se, it's a cross-origin issue. There's plenty on stack overflow about it, and you can read more here https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

[NetOpWibby]

I know what CORS is, my question is how do I fix it? I've seen people talk about adding a proxy to a SvelteKit app but no examples.

[antony]

This part of the documentation might be useful to you https://kit.svelte.dev/docs#hooks-externalfetch

[NetOpWibby]

externalFetch seems to assume integration with your own API.

[nhe23]

Have you seen this repo: https://github.com/srmullen/sveltekit-stripe? I tried it out myself and it worked pretty well

[NetOpWibby]

I tried integrating into my own project but then decided to just run that repo vanilla. Same result.

[CaptainCodeman]

Normally you just include a normal script tag in the HTML page, e.g. <script src="https://js.stripe.com/v3/"></script>

If you are trying to load it via fetch or import it from your own script, that isn't going to work.

They do also provide a separate module if you want to incorporate it into your own app script instead of loading it separately.

See: https://stripe.com/docs/js/including

[NetOpWibby]

Not sure where the disconnect is on my system then. I've even cloned another project but am still seeing the same issue.

[antony]

I will look at that project when I get a minute and see if I get the issue. I load stripe in this way for Beyonk and it works without issue.