Stripe integration with react and commerce.js giving error with 3DS

Question

so i am using the stripe payment api for my ecommerce store that I built with commerce.js and react.

The stripe documentation says that the card 4242-4242-4242-4242 doesn't require authentication. ->

https://stripe.com/docs/payments/accept-a-payment-synchronously?platform=web#web-handle-next-actions

However when I am trying to pay with it on the test-mode it doesn't work and gives me the below error

Below is my code in react

export const Payment = ({checkoutToken,firstName,lastName,address,email,addressLine2,city,state,zip, onCaptureCheckout}) => {
  const stripePromise = loadStripe("pk_stripe_xxxyyy");

  
  const handleSubmit = async(event, elements, stripe) => {
       
        event.preventDefault()

        if(!stripe || !elements) return

        const cardElement = elements.getElement(CardElement)

        const {error, paymentMethod} = await stripe.createPaymentMethod({type: 'card', card: cardElement })

        if(error){
            console.log(error)
        } else{
            const orderData = {
                line_items: checkoutToken.line_items,
                customer: {firstname: firstName, lastname: lastName, email: email},
                shipping: { name: 'Primary', 
                            street: address, 
                            town_city: city,
                            county_state: 'NY',
                            postal_zip_code: zip,
                            country: 'US',  },
                fulfillment: {shipping_method: 'ship_gnZO5kn0mo7MNq'},
                payment: {
                    gateway: 'stripe',
                    stripe: {
                        payment_method_id: paymentMethod.id
                    }
                }
            }
           
            onCaptureCheckout(checkoutToken.id, orderData)
        }

       

  }

  return (
    <div className="pb-10">
      <h2 className="text-lg font-medium text-gray-900">Payment</h2>

     
      <Elements stripe={stripePromise}>
        <ElementsConsumer>
          {({ elements, stripe }) => (
            <form onSubmit={(e) => handleSubmit (e,elements,stripe)}>
              <CardElement className="py-8" />
              <button
                type="submit"
                className="w-2/3 block mx-auto bg-indigo-600 border border-transparent rounded-md shadow-sm py-3 px-4 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 focus:ring-indigo-500"
                disabled ={!stripe}
              >
                Pay
              </button>
            </form>
          )}
          
        </ElementsConsumer>
      </Elements>
    </div>
  );
};
export default Payment;

Also below is a detailed view of the incomplete txn

I am quite sure 4242 card does not need authentication as i saw in a lot of youtube videos. Is it some thing with my setup? Please help

Answer 1

You should use an India-issued test card (e.g., 4000003560000008) to continue your integration. Using an International test card will trigger 3DS and not all test cards support 3DS.

Answer 2

4242 is a card that normally doesn't require 3DS, but for some countries, ie. India, it will still be forced to complete 3DS in order to make a transaction. It's a country specific behavior.

In your case, it looks like your created PaymentIntent on the backend somehow landed in a state that requires 3DS, and your client wasn't able to perform 3DS to complete the Payment. This shouldn't happen in the first place. Maybe you accidentally passed confirm = true on the backend? You'll need to make sure only to create the PaymentIntent on the backend, and let the frontend handle the confirmation call.

You are also seems to use the legacy Card Element. I would recommend taking a step back and follow the newer Payment Element guide: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements