Stripe.js - Stripe 3D Secure shows and disappears after few seconds

Question

I'm integrating Stripe into my project and all is working fine. Except for one weird error with the 3D-secure modal.

When I use the test card that requires 3DS, the modal pops up and works fine. But when I use the normal card 4242 4242 4242 4242 using if:amount_in_usd: > 100.00 Authentication rules Authentication rules Image

The modal shows for a few seconds and then disappears then goes to the redirect_url without authenticating & do the payment with success.

My Payment Intent status is "requires_payment_method"

 stripe = await loadStripe(this.stripekey);
                const amountAsCents = this.amount * 100;
                const response = await fetch("/api/payments/create-payment-intent", {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ fname: this.customer_details.firstName, lname: this.customer_details.lastName, email: this.customer_details.email, amountAsCents: amountAsCents, collectionId: this.collection_id, contributionamount: this.amount, message: this.message, servicefee: this.service_fee }),
                }).catch((err) => {
                    console.log(JSON.stringify(err))
                    alert("Something went wrong - reloading the page")
                    window.location.reload();
                });

                const { ClientSecret } = await response.json();
                this.clientS = ClientSecret;
                const appearance = {
                    theme: 'stripe'
                };
                console.log(ClientSecret);
                elements = stripe.elements({ appearance, clientSecret: ClientSecret });
                const paymentElement = elements.create("payment");
                paymentElement.mount("#payment-element");
                this.showaddressDiv = true;



Url = `${window.top.location.origin}/payment-confirmed`;
                    const { error } = await stripe.confirmPayment({
                        elements,
                        confirmParams: {
                            return_url: Url,
                            payment_method_data: {
                                billing_details: {
                                    name: `${this.customer_details.firstName} ${this.customer_details.lastName}`,
                                    email: this.customer_details.email,
                                    address: {
                                        line1: `${this.customer_details.address.line1}`,
                                        city: `${this.customer_details.address.city}`,
                                        state: `${this.customer_details.address.state}`,
                                    }
                                }
                            },
                        },
                    });

                    if (error.type === "card_error" || error.type === "validation_error") {
                        console.log(error.message);
                        this.$emit('hideLoadScreen');
                    }

I want to do 3D secure authentication only if amount is more then $100.

Answer 1

The Stripe 4242 test card is not enrolled for 3DS. Therefore when calling confirmPayment , then authentication flow is skipped as the payment is exempt from SCA regulations.