Lately I’ve been working on a checkout form that wasn’t getting autocompleted with LastPass. Curious, I went exploring. After looking at the DOM of BandCamp’s checkout form, which integrates nicely with LastPass, the solution became clear. LastPass needs some identifier to know that a given field pertains to a given aspect of a credit card. All you have to do is give an input or select element a sensible class name and then LastPass will do its magic.1 These are the classnames I’ve found that work:

  • Credit card: cc-number
  • Expiration month: exp-month
  • Expiration year: exp-year
  • CVC: card-verification

That’s all there is to it.

  1. It’s bizarre that I can’t find any documentation from LastPass about how this works, but upon reflection I think I know the reason. LastPass is used to every input element having a name attribute, and any reasonable developer would be giving these input elements a name that binds to a backend model with a standard naming convention for checkout. For example, an input for expiration month would have to have a name attribute that made it clear that this is what it was. The problem with having a name attribute is that this means your server has to be PCI compliant because you’re sending that information to the backend. Many modern libraries, including Stripe and Adyen, have a JavaScript SDK that takes this credit card information, passes it to their own server, and their server returns a token which you then send to your server. This keeps you from having to worry about security issues as much and it’s great, but it does mean that unless you’re deliberate about adding class names to all of your inputs, things like LastPass won’t work out of the box. ↩︎