[Fixed] Error with automatic payment methods (using Payment Element) Stripe – Reactjs

The Solutions:

Solution: 1. Check the Payment Intent Configuration

To resolve the error, ensure that the PaymentIntent you create on your backend has automatic_payment_methods[enabled]: true set. This configuration enables the PaymentIntent to accept payment methods collected through Stripe Elements using automatic payment methods. Here’s the corrected code for creating the PaymentIntent:
“`
const paymentIntent = await stripe.paymentIntents.create({
amount: esimPrice,
currency: ‘usd’,
customer: stripeCustomerId,
automatic_payment_methods: {
enabled: true,
},
metadata: {
firebaseUID: auth.uid,
},
});
“`
Adding this configuration will allow your code to successfully confirm the payment using the payment methods collected through Stripe Elements.

Solution 2: Ensure the mode option matches the payment type

In the provided CheckoutFormStripe component, the options object used with Stripe Elements includes a mode property set to "payment". However, the error message suggests that the payment intent is configured with automatic payment methods.

When using automatic payment methods, the mode property in the options object should match the payment type of the payment intent. In this case, the payment intent is configured with automatic payment methods, so the mode property in the options object should be set to "setup" instead of "payment".

By updating the mode property to "setup", the CheckoutFormStripe component should work correctly with the provided payment intent configuration.

Video Explanation:

The following video, titled "Set up Subscription ( Recurring ) Stripe Payment with React and ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

Its very hard to read please make sure you increae the font size in your next video. 30:02. Go to channel ...