Okay, so let’s start by explaining why I wrapped the word “complaint” in double quotes. The reason is simple – I couldn’t really find any documentation on it. So it’s a bit difficult to comply with a standard that doesn’t formally exist!
However, a few people out there have experimented with it enough that there seems to be a few unwritten rules when it comes to making your payment forms work with the card scan feature.
It basically boils down to helping the card scan feature recognize which fields are dedicated to providing certain payment details.
If you’ve dealt with auto-fill fields before (especially with Chrome), you might be expecting that the name attribute of your form fields needs to contain certain keywords to help identify the field. Not the case.
It boils down to four simple tricks:
- The credit card number id attribute must be cc_number
Optionally, you can set the name attribute to cardnumber - The credit card expiration month id attribute must be cardExpirationMonth
- The credit card expiration year id attribute must be cardExpirationYear
- For the card name, it must have a label with a for attribute that references the field. That label must contain the text: Name on card
Naturally, if you used class names to style your fields in your CSS, this won’t disrupt your code. You can simply add the id attributes and hide the label with CSS.