Developer guide: how to make a working credit card form?

[WhiteApfel]

I'm making a form for card details. I haven't found a universal guide on how to make a good form. I want autofill to work for all popular password managers and autofill services.

Here's what I found in MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete):

* The `input` field has an `autocomlpete` attribute
* `cc-number` is used for card number
* `cc-csc` is used for cvc/cvv
* For expiration date `cc-exp` or `cc-exp-month` and `cc-exp-year `

But I ran into a problem, Enpass doesn't target these options for autocomplete.

num: yes, exp: no, csc: no

<form>
  <input type="text" autocomplete="cc-number" x-autocompletetype="cc-number">
  <input type="text" autocomplete="cc-exp" x-autocompletetype="cc-exp">
  <input type="text" autocomplete="cc-csc" x-autocompletetype="cc-csc">
</form>

num: yes, exp: no, csc: no

<form>
  <input type="text" id="cc-num" autocomplete="cc-number" x-autocompletetype="cc-number">
  <input type="text" id="cc-exp" name="cc-exp" autocomplete="cc-exp" x-autocompletetype="cc-exp">
  <input type="text" id="cc-csc" name="cc-csc" autocomplete="cc-csc" x-autocompletetype="cc-csc">
</form>

num: yes, exp-m: no, exp-y: no, csc: no

<form>
  <input type="text" autocomplete="cc-number" x-autocompletetype="cc-number">
  <input type="text" autocomplete="cc-exp-month" x-autocompletetype="cc-exp-month">
  <input type="text" autocomplete="cc-exp-year" x-autocompletetype="cc-exp-year">
  <input type="text" autocomplete="cc-csc" x-autocompletetype="cc-csc">
</form>

num: yes, exp-m: yes, exp-y: yes, csc: no

<form>
  <input type="text" id="cc-num" autocomplete="cc-number" x-autocompletetype="cc-number">
  <input type="text" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month" x-autocompletetype="cc-exp-month">
  <input type="text" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year" x-autocompletetype="cc-exp-year">
  <input type="text" id="cc-csc" name="cc-csc" autocomplete="cc-csc" x-autocompletetype="cc-csc">
</form>

num: yes, exp-m: yes, exp-y: yes, csc: yes

<form>
  <input type="text" id="cc-num" autocomplete="cc-number" x-autocompletetype="cc-number">
  <input type="text" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month" x-autocompletetype="cc-exp-month">
  <input type="text" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year" x-autocompletetype="cc-exp-year">
  <input type="text" id="cc-csc" name="cvv" autocomplete="cc-csc" x-autocompletetype="cc-csc">
</form>

Conclusions:
* It is necessary to specify `cc-*` in `name`
* `cc-exp` does not work, `cc-exp-month` and `cc-exp-year` are needed.
* For secure code you must specify `cvv` or `cvc`

 

I do not agree with these points. This creates an overload. And calling secure code one of the proprietary names (visa cvv or mastercard cvc) is not correct. I would like to get a guide from the Enpass team on how to make it perfect.

[Abhishek Dewan]

Hi @WhiteApfel

I'm discussing this case with our dedicated team and will get back to you soon with an update. Your patience in the meantime is appreciated

#SI-3265