wizfamily-hanging

[shrewd lichen]

@prisma vector hello! Can I ask you to provide a bit more context/details?

[prisma vector]

Hi There! @shrewd lichen Sure, I have a javascript click event listener triggering a function that sends a fetch request to the custom backend.

I have copied and pasted the sample code that is provided in this guide: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=checkout
This code triggers a redirect to Stripe's checkout page (UI presented on-screen). When running the sample project, Stripe's checkout page loads. However, the form hangs when implemented in my server.

I have simply copy and pasted the code in my API response handler. As stated, I am receiving the redirect to stripe's hosted form...but it is not loading.

Please let me know if this makes sense. Thanks!

[shrewd lichen]

It makes some sense but not a lot yet

why do you do a fetch() exactly?

Are you redirecting from the server like our example does?

[prisma vector]

This fetch request is being sent from the front end. Yes, I am redirecting from the server like in the example.

var serviceInfo; 
    function reqCheckoutSession(e) {
        let url = "https://[domain]/checkout"
        console.log("address URL: "+url)
        if (url == "" || url == " ") {
            return
        }
        fetch(url, {
          method: 'POST',
          
          body: serviceInfo 
        })
          .then(function (response) {
            
            return response;
          })
          .then(function (data) {
            if (data.redirected == true) {
                window.location.href = data.url;
            }
          });

[shrewd lichen]

you can't redirect server-side, if you do a fetch() client-side

so that's your issue, you likely have a CORS error in your JS console

if you do fetch() your server needs to return the Checkout Session id or the URL to redirect to

if you redirect from the server-side code, you can not use fetch()

[prisma vector]

Yes, my backend does return the url please see the data.url. I did receive a CORS error, but have since then allowed access from my origin.

I no longer have a CORS error, now it just hangs.

[shrewd lichen]

"just hangs" is not really a thing though

like your code is doing "something". Are you receiving the response? Are you properly handling it? Can you log in both .then() explicitly to see if they are called?

[prisma vector]

I see your point. After the stripe url has been assigned then launched by the browser, the form flashes in a loading state. This is not happening on my server so I am not sure what is going on.

I can paste the server side code if that helps

[shrewd lichen]

server-side code is unlikely to help here

I'm fairly sure that URL is just incorrect

Are you returning the url property of the Checkout Session or constructing it yourself?

You really ought to just redirect from the server, it's 100 times easier

[prisma vector]

I am not building the url myself. I am literally assigning the it directly from the response object.

Just checked the server logs, the url is different. hmm...one sec please

Looks like the url returned from the server redirect is not the same as the one sent by the server

the url in the browser's console: url: "https://checkout.stripe.com/pay/cs_test_b12qSDRMHtMPIRFDMN8FL7USHy8GPVr2rC35yjICrioawfmrBFLCEeeIvH"

The url sent from the server's redirect:
https://checkout.stripe.com/pay/cs_test_b1yvSzMmhGIY22FPiQ3gOcWgI4ZAgwjsDNDW1OTo2RlTnELoqRS9F4QPKl#fidkdWxOYHwnPyd1blpxYHZxWjA0TmE3NkpNTXc8dTIyXTIzYHdAaHxtN0pVSzxrYFNAZmhqMDEzUHMzNWQ1X1VMSUFBUlI9YVBNQ29Wf39MY09La1VVYW5WME5hbGs3NlBnMml1VmRPazNINTU2MWJUY0JzfCcpJ2N3amhWYHdzYHcnP3F3cGApJ2lkfGpwcVF8dWAnPydocGlxbFpscWBoJyknYGtkZ2lgVWlkZmBtamlhYHd2Jz9xd3BgeCUl

The server is in-fact redirecting . This is from the browser

This is from the server:

[shrewd lichen]

I'm sorry you're going to fast and mixing things upo

there are 2 exact ways to do this
1/ You do a form submission client-side (no fetch()) and then server-side you redirect to session.url
2/ You do a fetch() client-side, server side you create a Session and you return the Session id cs_test_123 and then client-side you use redirectToCheckout()

[prisma vector]

Ahh, I see

Ok, one sec please

Question: Is there reason that I cannot return the redirect url like what you guys have done in the example. I understand that I am not using a form, but the client/server architecture is still the same. There is no session id being returned to the client in your example. Is this because you guys are using a form?

When I copy/paste the fully qualified url into the browser the Stripe's UI loads. Is there another reason that I am unaware of that I need to return the session id to the client?