#iclarkie99

1 messages · Page 1 of 1 (latest)

dry barnBOT
lime plover
#

What happens when you try to redirect?

#

Do you get an error of some kind?

#

Not in the backend, that returns the link that I can use. The frontend has an 'uncaught' error, but the page refreshes and console refreshes, so I can't dig into the uncaught error.
@pine heron putting your followup here (let's keep further discussion in this thread)

#

Gotcha, I think there might be a way to keep the developer console from clearing its messages on a page refresh

#

But otherwise, instead of a redirect, the page just reloads?

pine heron
#

Yes, the page goes blank and then returns to the original page with the checkout button.

lime plover
#

In Chrome there is a "preserve log" checkbox that you can check from the developer console's settings menu

image.png
#

If you are using Safari or Firefox I can look in to what the equivalent is if you are having trouble finding it

pine heron
#

I'm using Chrome and have that setting on. The redirect is wiping everything

#

I recorded the console on my phone. I'm getting anerror 'Uncaught ReferenceError: session is not defined'

lime plover
#

Interesting. It seems to work for me on chrone

#

Thank you for recording it

#

Can you try stepping through with the debugger to see if there is a session object that should be defined somewhere?

pine heron
#

I did try to debug and the stripe apis just stay 'running'. see screen grab

image.png
#

debug doesn't allow me to step through, buttons disabled.

lime plover
#

Interesting. So the last line of code your js runs is posting to createCheckout and then you get an error client side about session not existing, but your code isn't handling a session object?

pine heron
#

right. And the backing runs createCheckout, retrieves the pricing from Stripe apis and gets the session url successfully.

lime plover
#

Can you make a quick test page that just makes a post like this and tries to redirect, see if that page still has this issue?

pine heron
#

Do you mean in a brand new CRA?

lime plover
#

Not sure what a CRA means here? I just am curious if you can have a test page that recreates this with as little code as possible

pine heron
#

I did try in a separate page within my app, testing to see if there was an issue running this code within a component.

#

Sorry, Create React App, so create a complete new frontend.

#

I did think about that, but if that works I'm not sure where I go from there. The frontend is calling createCheckout and Stripe is returning with the url for the correct subscription, it's just the redirect/render that is failing.

#

Testing the new page, still getting the same results with no checkout being displayed

lime plover
#

Interesting. So just a post and redirect shows the same issue. That would seem to imply the issue is on the server though like you said you checked session.url just before sending it back off

#

Can you actually double check that that is still working properly?

#

If you check your browser's networking logs, does the 303 come back with the right URL?

pine heron
#

Just checked the link created in the backend console log, checkout is working.

#

I don't know what this means....

image.png
#

403 error

image.png
lime plover
#

Do you see an entry about your post request to the createCheckout endpoint (I think it would have zig360/1pi/createCheckout as part the URL in the name column)?

#

That should have info on exactly what gets sent back

#

Trying to make a quick example now to show what it would look like

pine heron
#

Response has the URL from Stripe

image.png
lime plover
#

That is good to know at least. Can you try navigating to that URL manually? See if you also get that error?

#

Also as a heads up, I have to step out but my colleague @lone solar can help look further from here.

pine heron
#

Thanks for helping so far.

#

copy & paste the url from the network logs is working

#

I'm no expert in this, but could it be a CORS issue? I don't have cors installed on the backend.

lone solar
#

👋 just catching up on this thread!

#

Could you share your Stripe account ID? It should look like acct_...

pine heron
#

acct_1LypDyJkdFYMn4er

lone solar
#

Thanks! I can see the request (and successful response) for the Checkout Session creation call

#

the url that's returned by that call is much longer than the URL in your screenshot above (the one that returns the 403 error)

#

It looks like everything after a # character is being truncated?

#

for example, in the screenshot above, the URL that returned a 403 ends in jrd9. you can see in the response url from Stripe that there's a # character followed by many more characters.

#

You mentioned you added some logging to your code. Did you log out session.url ?

pine heron
lone solar
#

in your Chrome developer view, can you select the 403 line and click on the Response tab?

pine heron
#

I've just added cors to my backend and applied against all routes. That 403 has gone

#

The createCheckout is showing an error

image.png
lone solar
#

okay, let's take a step back.

#

are you using XMLHttpRequest or fetch() to redirect to Checkout server-side? This is not the recommended way to handle the redirect

pine heron
#

This is my backend code. console.log('Prices :', prices)
const session = await stripe.checkout.sessions.create({
billing_address_collection: 'auto',
line_items: [
{
price: 'price_1M4w4tJkdFYMn4ernD3ymHUf', //prices.data[0].id,
// For metered billing, do not pass quantity
quantity: 1,
},
],
mode: 'subscription',
success_url: ${YOUR_DOMAIN}/subscription?success=true&session_id={CHECKOUT_SESSION_ID},
cancel_url: ${YOUR_DOMAIN}?canceled=true,
})
console.log('sessionURL redirect:', session.url)
// Send back the Stripe product used for subscriptions
res.redirect(303, session.url)
// res.json(session.url)
})

#

I've hardcoded the pricing, as I thought the error was related to retrieving prices, but not the case. I will go back and fix that once this error is resolved. The consol.log for pricing returns the object and session.url shows a valid url.

lone solar
#

If you get your integration back to the state where it's returning 403 errors for the redirect, can you show me what the Response tab in your browser looks like for that request?

pine heron
#

I'm not getting that 403 now, even turning off cors on the Node server. I'm getting the error on the checkout service, but nothing in the response tab. (valid URL still showing in the backend console)

lone solar
#

🤔 are you sure you're still getting a session in your backend code? i don't see any recent requests from your account to create Checkout sessions

pine heron
#

ok, now I can replicate the 403 now

image.png
#

nothing in the response tab

#

I am still getting the session URLs. I just tried again and completed a subscription using the link, which was successful

elder grotto
#

👋 stepping in and catching up

pine heron
#

Hi bismarck

elder grotto
#

Sounds like you are hitting a CORS error due to an ajax request, correct?

#

You need to use a form/button submit instead, otherwise the preflight request is going to cause the issue here.

pine heron
#

Not sure. I did add CORS to Node, which seems to stop the 403 error, but didn't resolve the issue.

elder grotto
#

Yeah axios doesn't permit you to redirect server-side.

#

So you are going to want to either change to a form submit or you could send the URL back to your client and redirect from there.

pine heron
#

I thought it was going to be something like that. I'll try to use the example in the stackoverflow you provided (thanks), otherwise, I'll refactor and remove the axios request.

#

Thanks for the link and help. WE can close this for now and I'll see how I get on.