nextjs-starter-medusa: Clicking on checkout btn on cart page -> Error: Could not find Elements context; You need to wrap the part of your app that mounts in an provider.

Guys, I’ve opened a PR that should solve this issue.

Added in a StripeContext provider that returns true when the Elements context is ready. You can hook into this context to conditionally render Stripe elements in your checkout form.

This way, no Stripe element component should ever render before the Elements context is ready.

Tested and confirmed working locally. Could anyone give this a spin and confirm if it solves the issue?

You’re right, I was conditionally rendering like :

{isOpen ? ( <CardElement /> ) : (<>{paymentInfoMap[cart?.payment_session?.provider_id || '']?.title}</>)

That’s where the problem was coming from, my bad ! Thank you for the quick answer !

@bqst I tried with the versions you mention, but I can’t replicate this issue. I’m able to finish a test order using Stripe just fine. The component containing <CardElement> shouldn’t unmount, but get a hidden class when it’s not active.

Did you make any changes to the render conditions in the src/modules/checkout/components/payment/index.tsx component?

Thanks @VariableVic. This has solved it for me.

I’m annoyed by this issue awkwardly while there is only one payment method (stripe) in my portal. Is there any sophisticated way to solve it elegantly at the side of storefront? There is a similar issue at #218, but the corresponding codes were marked as outdated. In fact, the issue seems to happen again in the latest version.

If there’s only one provider enabled, Medusa will select it by default, resulting in cart.payment_session being populated when you enter the checkout - even though Stripe context might not be fully loaded yet. I suspect this is causing the issue.

Confirmed. After adding a second payment provider, the issue disappears.

This is happening when you enter the checkout from the cart page right? Is Stripe the only enabled payment provider when this issue occurs?

Because if there’s multiple payment providers enabled, cart.payment_session should be null until a provider is selected in the checkout flow.

If there’s only one provider enabled, Medusa will select it by default, resulting in cart.payment_session being populated when you enter the checkout - even though Stripe context might not be fully loaded yet. I suspect this is causing the issue.

I am facing the same issue. Checkout throws the same error on first load. After a few refreshes - loads correctly. With this error in the server logs:

....
data: {
      code: 'invalid_request_error',
      type: 'duplicate_error',
      message: 'Payment_session with cart_id, provider_id cart_xxx, stripe already exists.'
   }
....

Also it says paymentSession on line 20 of (payment-wrapper/index.tsx) is undefined

Probably this is some nonsense related to next.js rendering “use client” files on the server… So I butchered it and used useEffect to set provider id and it seems to have fixe the issue…

const Wrapper: React.FC<WrapperProps> = ({ cart, children }) => {
  const [providerId, setProviderId] = useState<string | null>(null)
  const isStripe = providerId?.includes("stripe")

  useEffect(() => {
    const paymentSession = cart.payment_session as PaymentSession

    setProviderId(paymentSession?.provider_id)
  }, [])

  if (!providerId) return null

  if (isStripe && providerId && stripePromise) {
    return (
      <StripeWrapper
        paymentSession={cart.payment_session!}
        stripeKey={stripeKey}
        stripePromise={stripePromise}
      >
        {children}
      </StripeWrapper>
    )
  }

  if (providerId === "paypal" && paypalClientId !== undefined && cart) {
    return (
      <PayPalScriptProvider
        options={{
          "client-id": "test",
          currency: cart?.region.currency_code.toUpperCase(),
          intent: "authorize",
          components: "buttons",
        }}
      >
        {children}
      </PayPalScriptProvider>
    )
  }

  return <div>{children}</div>
}

But it would great for some one to come up with a legit solution.

Oddly, when i refresh the page when i get the error, I was able to get into the checkout page.