Jump to content
Enpass Discussion Forum

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


Recommended Posts

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Privacy Policy