How to enable 'scan new card' option for Google chrome in android?

Question

Google chrome has this functionality for scanning credit card to populate the fields during payment which works in Android Chrome ( not for all versions and devices of android ).

I have attached the screenshot.

It shows on other websites, but not in my website. Do we have any references to what should be the content of html dom for it to work?

Answer 1

Based on this article the payment fields are completely wonky. In order to build a cross browser autofill form with credit card scan feature (if browser supports it) you need:

1. Add autocomplete attributes
2. Use common values for input name attributes
3. Add name and/or label values that match the list Safari is looking for
4. Use HTTPS with valid certificate

Here is the final form to test.