How to send a response back to client [ReactJS] from a server after a Stripe payment is successful?

Question

I'm having a tough time understanding stripe documentation so please...

After a stripe purchase completes like this:

const authorizePurchase = async (req, res, next) => {

    const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        mode: 'payment',
        line_items: [
            {
                price_data: {
                    currency: 'usd',
                    product_data: {
                        name: "Hello World"
                    },
                    unit_amount: 1000
                },
                quantity: 10,
            }
        ],
        success_url: "http://localhost:5173",
        cancel_url: "http://localhost:5173",
    })

    res.json({ url: session.url });
    return;
    // next();
}

I get redirected to the homepage, but I also want to send some data to the client after the payment was successful/cancelled. The user is anonymous, so I don't have their data stored on frontend.

I've thought one way of doing this by maintaining user session on the server and I'm confused how can I do that but still how would the client listen to the successful payment.

---

Everybody uses webhook to perform errands after payments, but the client still does not know that their payment completed.

---

Adding data in params of URL is not good. Also, after redirection, all the context data of my react app is lost. I want it to be lost when user refreshes the page, but when they come back after making a payment, data should be there.

Answer 1

You can customize the success page from the success_url parameter. From there you can use the Checkout Session Id to query any information you need on backend, then display them on client. See the Doc link for examples.