Error when trying to check out about nextjs-starter-medusa HOT 2 OPEN

I came across this issue as well. From my understanding it happens when the stripe component is remounted incorrectly, caused by the implementation of the stripe react package.

I ended up fixing it by adding the key prop to the Elements component inside StripeWrapper in storefront/src/modules/checkout/components/payment-wrapper/index.tsx:

const StripeWrapper: React.FC<WrapperProps> = ({ paymentSession, children }) => {
    const clientSecret = paymentSession!.data.client_secret as string | undefined;
    const options: StripeElementsOptions = {
        clientSecret
    };

    return (
        <Elements stripe={stripePromise} options={options} key={clientSecret}>
            {children}
        </Elements>
    );
};

from nextjs-starter-medusa.

Hi @nikhil-1911,

Can't replicate the issue when testing on the latest version of the main branch. Have you made any customizations to the storefront?

from nextjs-starter-medusa.