Unable to resolve 403 issue when using payment element.

[ryanspice]

Ive taken the example and had it working on 127 and on localhost, however putting it on my apache server I keep getting 403 forbidden when I try to use the same page.

I've tried everything, I know my keys are correct.

I have no idea what to do next. Spent all day on it,

https://www.reddit.com/r/sveltejs/comments/10l8en4/svelte_stripe_works_on_local_host_but/

[joshnuss]

Hi Ryan,

What's the request path that is responding with a 403?

[joshnuss]

Can you add some logging to the backend route?
I'm not sure if the backend is being called or is it something in-between that's blocking the request (you mentioned using apache on reddit).

[ryanspice]

fetch("https://.ca/payment-element/payment-intent?total=2160", {
"headers": {
"accept": "/",
"accept-language": "en-CA,en-US;q=0.9,en;q=0.8,pl;q=0.7",
"cache-control": "no-cache",
"content-type": "application/json",
"pragma": "no-cache",
"sec-ch-ua": ""Not_A Brand";v="99", "Microsoft Edge";v="109", "Chromium";v="109"",
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": ""Windows"",
"sec-fetch-dest": "empty",
"sec-fetch-mode": "cors",
"sec-fetch-site": "same-origin"
},
"referrer": "https://.ca/payment-element",
"referrerPolicy": "strict-origin-when-cross-origin",
"body": "{}",
"method": "POST",
"mode": "cors",
"credentials": "include"
});

"body": "{}",
"method": "POST",
"mode": "cors",
"credentials": "include"
});

doing a fetch I get:

   POST https://*.ca/payment-element/payment-intent?total=2160 404 (Not Found)

doing a fetch I get:

   POST https://*.ca/payment-element/payment-intent?total=2160 404 (Not Found)

It is using apache, looks like this might be the root of the cause? putting in a folder and an empty index file i was able get payment intent to not be 404. I feel like im missing something simple or am ignorant to some apache configurations or something like that.

Is there something I need to do, or a set of things I need to do to get the /payment-element/payment-intent not to be empty on the server and thus actually do something? Because what it looks like from what I'm seeing is that its getting a 404 there because apacahe is returning nothing.

Looking at my apache logs i see No matching DirectoryIndex for /payment-element/ .

[joshnuss]

So it appears the issue is with your Apache setup.
I think you should investigate how to setup Apache for a node-js app. For example Configuring Apache for NodeJS

I'm not too knowledgeable about Apache, but I don't think Apache should be resolving paths using directories, node-js should be handling it (probably using Apache's ProxyPass config option)

[ryanspice]

From what I understand the pages should be generated by sveltekit, I have no Node on the server, just PHP. I can see how it might be getting confused, I suppose I am just not as familiar with how things need to be setup..

I think I need to have the proper +pages in the right spots when I build the app so that when it posts to the page.

Or do I NEED nodejs on the server?

[ryanspice]

Perhaps I cannot setup sveltekit in the way the example is setup because of that?

Perhaps I need this? https://stripe.com/docs/payments/accept-a-payment?ui=elements

[joshnuss]

Let me explain a bit about SvelteKit deployment

SvelteKit can be deployed in 2 different ways:

1. As a static site (aka SSG), in this style your app is converted into html,JS, CSS and can be deployed as a directory. This would work well with a standard apache setup.

2. As a node server. In this style, your app runs inside a Node process. This can work with Apache too, but Apache must delegate requests to NodeJS.

Note that option 1 (SSG) won't work for this use case, because you have code that must run server side. The creation of a payment intent means calling the Stripe API and must be done at runtime.

[ryanspice]

I kinda had a bit of an inkling that I was going about it the wrong way, but having not worked with Sveltekit or any API's like Stripe very much idk.

Reading the docs more closely I've setup Stripe's PHP library and have had success! (I had to manually install some things since I don't have a complicated setup).

Thanks for the help! I definitely wont forget the naivety of this experience lol