yen6305

[silk eagle]

This is my code:

Doesn't PaymentElement automatically handles the submission of payment data to Stripe? Not sure why I should call elements.submit() before stripe.confirmPayment()

[full spire]

If you're using react, then I would recommend following this guide very closely: https://stripe.com/docs/payments/quickstart?client=react

I believe you still have to submit the actual form with the information the customer typed into the form before you attempt to confirm the payment, otherwise the confirmation step will have no payment data to attempt confirmation with.

[silk eagle]

But even in this guide it does nothing with the actual form with the customer information before the stripe.confirmPayment:

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    setIsLoading(true);

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        // Make sure to change this to your payment completion page
        return_url: "http://localhost:3000",
      },
    });` 

Is that correct? I am a tad confused

[primal cliff]

elements.submit() is required if you're using the deferred intent flow

Based on that error message, it seems like you are

This guide isn't react, but still applies: https://stripe.com/docs/payments/accept-a-payment-deferred

The deferred intent flow simply means you initialize elements without a client secret and wait to create the payment intent until after collecting payment details