'Stripe - ERROR: elements should be an Elements group. You specified: object

I have a problem while creating a setup for card payment.

  const result = await stripe.confirmPayment({
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

But receiving an error when submitting:

IntegrationError: Invalid value for stripe.confirmPayment(): elements should be an 
Elements group. You specified: object.

I dont know why does it happen because I follow the tutorial steps: https://stripe.com/docs/payments/save-and-reuse?platform=web&html-or-react=react#web-submit-payment-details

Playground with the problem: https://codesandbox.io/s/react-stripe-js-forked-wwydkc?file=/src/components/demos/CardForm.js:1073-1245

How to reproduce? Just type in the card input: 4242 4242 4242 4244 and some random valid date and click PAY.



Solution 1:[1]

The stripe.confirmPayment() is for Payment Element. Since you are using Card Element, you should call stripe.confirmCardPayment() instead.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 qichuan