Lesc

[torpid oxide]

I think you're passing the wrong value to confirmPayment. It needs to be the Payment Element instance, not the component itself

You need to declare an elements variable in innerElement that is assigned to useElements()

Then pass elements to confirmPayment

[quasi herald]

Hmm ok.
I just tried that:

const elements = useElements();
const innerElement = <PaymentElement elements={elements} id="payment-element" />

And then I passed it to confirmPayment:

async function handleSubscribe() {
    const { error } = await stripe.confirmPayment({ 
        elements,
        confirmParams: {
            return_url: `${import.meta.env.VITE_SERVER_URL}`, 
        },
    });
}

Now the error is: Invalid value for stripe.confirmPayment(): elements should have a mounted Payment Element or Express Checkout Element.

Does it mean I need to set elements in the outerElement?

[torpid oxide]

Does it mean I need to set elements in the outerElement?
No you can only use the useElements hook in a child of the <Elements> provider.

Sorry it's pretty busy right now. Take a look at the React example here: https://stripe.com/docs/payments/quickstart?client=react

[quasi herald]

Thanks ❤️