Stripe iframe for 3d secure authentication doesn’t show up on android chrome browser

by

I am refactoring an e-commerce web application, I am using react (with Nextjs). My implementation is pretty simple and similar to what I have previously but I have a big problem with the fact that payments which need 3d secure authentication do not trigger the iframe ONLY on mobile and ONLY on some browsers (chrome, brave, ecosia but OK on firefox) on after calling the confirmCardPayment function :

        res = await stripe.confirmCardPayment(clientSecret, {
          receipt_email: customerData.email,
          payment_method: {
            card,
            billing_details: billingDetails,
          },
        });

I can go through the 3d secure auth process + payment without any problem on computer or on firefox on mobile : my payment intent status is “requires_action” in all cases, the only difference is that on computer the iframe / pop-up show up, but not in the problematic cases.

So my guess is that it is browser specific, I tried to remove the custom style that I put on cardElement without any success, changed stripe and react-stripe versions to previous ones.

Does someone have any clue to address this issue ?

Have a nice day!

Leave a Comment