[SOLVED] Stripe JS 3D Secure 2 test cards work but 3D Secure test cards do not work

Stripe JS 3D Secure 2 test cards work but 3D Secure test cards do not work

I am implementing a checkout page using Laravel and Vue.js. Test cards that don't require 3D Secure work well (e.g. 4242 4242 4242 4242). Test cards that require the customer to complete 3D Secure 2 authentication (e.g. 4000000000003220) also work(The pop up shows up after I call the confirmCardSetup method).

However, test cards that require the customer to complete 3D Secure (not 3D Secure 2) authentication (e.g. 4000000000003063) don't bring the pop up after calling the confirmCardSetup method. They are then subsequently declined on my backend with error

Your card was declined. This transaction requires authentication.

Here is my confirmCardSetup method which is supposed to bring up the pop up.

const result = await this.stripe.confirmCardSetup(
  this.intentToken.client_secret,
  {
    payment_method: {
      card: this.cardElement,
      billing_details: {
        name: this.frontUser.name,
      },
    }
  }
);

I have tried adding off_session to false. I have also tried setting request_three_d_secure to 'any' with no luck.

Solution

To anyone who might come across this.

As long as card 4000000000003220 and card 4242424242424242 work in the test environment. The 3ds pop up will show up in live mode.