Error when trying to check out

[nikhil-1911]

Getting this error in /checkout page. I have configured test stripe public key as well as secret in medusa admin.
Can you please look into this? Thanks!

[kasperkristensen]

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?

[felipemullen]

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>
    );
};