Credit card number and expiration date autofill are validated separately in Chrome mobile and Safari mobile

[ricardo]

Describe the bug

Context: p1671725666503479-slack-C7U3Y3VMY

When auto-filling a saved credit card (not using payment request button) from Chrome mobile, the browser will validate the CVC before filling in the credit card number and the expiration date in two separate entries. It will ask for the validation twice where it should auto-fill the credit card form with only one validation. See the screenshot below.

It appears that on WCPay, both the CC number and expiration date are filled at once, so there might be some inconsistency in how the credit card form is rendered in Stripe, which prevents Chrome/Safari from recognizing it as the same form.

Note: We need to check how classic checkout, blocks and UPE behaves on both Stripe and WCPay.

To Reproduce

1. Make sure you have a saved CC in your browser.
2. Go to the Stripe checkout on a store using a public-facing URL.
3. Try the autofill and notice the number and expiration dates are filled separately.

Screenshots

Environment (please complete the following information):

• Chrome mobile or Safari mobile.

[wjrosa]

From my initial tests here, the autofill works as expected when the browser asks for the CVC to confirm it, but it does not fill the CVC when you use your fingerprint to do it 🤔 .

[ricardo]

the autofill works as expected when the browser asks for the CVC to confirm it, but it does not fill the CVC when you use your fingerprint to do it

@wjrosa I usually notice the same behavior, but the issue is that the autofill doesn't work for both the CC number and the expiration date. That way it requires the CVC validation twice before the complete autofill of CC details.

I changed the issue title to make this clearer.

[wjrosa]

@ricardo oh, are you still able to reproduce this? I tested multiple cases (and react-stripe-js versions, 1.5.0 to 1.10.0) and for me it is always the same: everything is filled at once, except for the CVC.

Also, I tried with 2 other credit cards here and everything worked as expected. What if the issue is how the credit card is stored? (just putting more info here as I test it)

[ricardo]

Tested again on iOS 16.6.1 and Google Chrome 120.0.6099.119. It works on UPE only:

[wjrosa]

We are still waiting for a response from the Stripe team about this issue. I have shared my environment so they can test it.