Don'ts
- Do not split the card number entry field into multiple
<input>.
Even if it's well intentionned, just don't, because:- Your cardholders are likely to use their browser's / device's payment method manager autocomplete, and a split card number field will interfere with this feature.
- You simply cannot anticipate the card format your cardholders will use before they enter the first few digits. For example, MasterCard issues Maestro cards whose length ranges from 12 to 19 digits; Visa card numbers are 13, 16 or 19 digits long, etc.
- However, you can visually format the card number based on the BIN – see the Stripe jQuery.payment plugin: https://github.com/stripe/jquery.payment
- Do not use a dropdown /
<select>but a more flexible text input field<input type="text">menu to indicate the card expiry date.
Keep in mind that not all cards expire after just 3 years — I've seen a payment go through with a card valid for 35 years — and you don't want to lose transactions by preventing cardholders from entering their authentic card data.
Trivia
When I joined the company, I was told about a payment made with a card whose validity extended to 35 years.
However, having never observed one myself, and considering the security constraints and wear of a bank card, I'm filing this piece of information under industrial myths.
Dos
- Add a TLS certificate to your online shop, and advertise it with reassuring copy.
- Use standard field names to trigger the web browser's autocomplete: https://html.spec.whatwg.org/multipage/forms.html#autofill-field
Use<input type="tel">for the card number and card CVV entry fields, which will display the numeric keyboard on mobile devices, making input easier. (<input type="number">is NOT suited for this purpose)- 2021 update to the previous recommendation: use
<input type="number">for the card number and card CVV entry fields, now fully compatible with smartphones and more appropriate. - Try the Stripe jQuery.payment plugin to validate the fields of your payment form.
Warning
The following payment form demo is hosted on a preproduction environment; no actual bank movements will occur.
However, as I'm not familiar with the privacy policy for banking information submitted on Codepen, I strongly advise against using real bank card data; use one of these instead:
- VISA: 4111 1111 1111 1111
- MasterCard: 5111 1111 1111 1118
- American Express: 3444 444444 44447
- Bancontact: 67777777777777775
Any expiry date and any 3-digit cryptogram will be accepted.
See the Pen Be2bill hosted-fields demo (NF) by Alexis Riche (@alexisr) on CodePen.