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.
Browser:
Application error: a client-side exception has occurred (see the browser console for more information).
Plugin used: https://medusajs.com/plugins/medusa-payment-stripe/ Log console:
Error: Could not find Elements context; You need to wrap the part of your app that mounts <CardElement> in an <Elements> provider.
at x (7296-8fad8bd6261c0c6e.js:1:18695)
at A (7296-8fad8bd6261c0c6e.js:1:20386)
at P.o (7296-8fad8bd6261c0c6e.js:1:21352)
at rb (fd9d1056-4c9fcf9b676e03d0.js:1:40331)
at iU (fd9d1056-4c9fcf9b676e03d0.js:1:116118)
at o2 (fd9d1056-4c9fcf9b676e03d0.js:1:94371)
at fd9d1056-4c9fcf9b676e03d0.js:1:94193
at o1 (fd9d1056-4c9fcf9b676e03d0.js:1:94200)
at oV (fd9d1056-4c9fcf9b676e03d0.js:1:91687)
at oB (fd9d1056-4c9fcf9b676e03d0.js:1:91112)
I get the above error when I want to checkout from cart. However, it seems to not show the error when running on localhost and only on the live server.
About this issue
- Original URL
- State: closed
- Created 5 months ago
- Comments: 18
Guys, I’ve opened a PR that should solve this issue.
Added in a
StripeContext
provider that returnstrue
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 :
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 ahidden
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.
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 benull
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:
Also it says
paymentSession
on line 20 of (payment-wrapper/index.tsx) is undefinedProbably 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…
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.