Encountered an unhandled runtime error during the checkout process when using Stripe a

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="20

Should be fixed in <a class="issue-link js-issue-link" data-error-text="Failed to load

Runtime Error in Checkout: Missing Elements Context for Stripe about nextjs-starter-medusa HOT 5 CLOSED

bqst commented on June 15, 2024

Runtime Error in Checkout: Missing Elements Context for Stripe

from nextjs-starter-medusa.

Comments (5)

bqst commented on June 15, 2024 3

@luluhoc Thank you for your fix, but it doesn't solve my problem. My issue is that when selecting the PaymentOption 'stripe', the Wrapper loads without a paymentSession, initiated by the Payment component here:

  // src/modules/checkout/components/payment/index.tsx#119
  ...
  useEffect(() => {
    let timeout: NodeJS.Timeout | null = null

    if (cart?.shipping_address && cart?.payment_sessions) {
      timeout = setTimeout(() => {
        initPayment()
      }, 5000)
    }

    return () => {
      if (timeout) {
        clearTimeout(timeout)
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cart])
  ...

The paymentSession is undefined until initPayment responds, and so the Wrapper does not mount StripeWrapper, which causes the problem with Stripe Elements.

from nextjs-starter-medusa.

luluhoc commented on June 15, 2024 1

@bqst here is my fix

#206

from nextjs-starter-medusa.

wadinggg commented on June 15, 2024 1

#211

from nextjs-starter-medusa.

luluhoc commented on June 15, 2024

steps to reproduce>

add to card choose address choose shipping choose stripe and then refresh the page

Unhandled Runtime Error
Error: Could not find Elements context; You need to wrap the part of your app that calls useStripe() in an <Elements> provider.

Source
src/modules/checkout/components/payment-button/index.tsx (76:26) @ useStripe

  74 | const { onPaymentCompleted } = useCheckout()
  75 |
> 76 | const stripe = useStripe()
     |                        ^
  77 | const elements = useElements()
  78 | const card = elements?.getElement("cardNumber")
  79 |

from nextjs-starter-medusa.