Search code examples
next.jsstripe-paymentsreact-context

react context lost after stripe returns to success page


My app uses NextJs 13 using pages I am using react context holding basket info. After I make a call to Stripe checkout, I get a redirect from Stripe to my payment success page. In the success page my context information is now empty. How get the context information back.

I call stripe with

const checkoutSession: Stripe.Checkout.Session =
            await stripe.checkout.sessions.create(params);

My context covers the whole app.

<UserProvider>
            <LayoutProvider>
                <BasketProvider>
                    <Layout>
                        <Component {...pageProps} />
                    </Layout>
                </BasketProvider>
            </LayoutProvider>
        </UserProvider>

How do I retrieve the BasketProvider data in the stripe success page?


Solution

  • Thanks for the suggestion. The approach I took was:

    1. Save the context values to DB and save the ID as metadata item in the stripe call;
    2. In the pages/api directory listen for webhook event checkout.session.completed and then get the context id from DB so I can recreate the context object.