- Do add a TLS certificate on your online shop, and add safety indicators to make your customers feel safe. (For valid reasons)
- Do use the standard fields' names to trigger the web browser's autocompletion : https://html.spec.whatwg.org/multipage/forms.html#autofill-field
-
Do NOT split the card number entry field.
Even if it's well intentioned, just don't.
Because:- Your cardholders may use the autocomplete payment method manager of their web browsers / mobile devices, but a splitted card number entry field could interfer with this feature.
-
You simply cannot anticipate the card format that your cardholders will use. For example MasterCard delivers Maestro cards, the length of which is between 12 and 19 digits, Visa cards number length is 13, 16 or 19-digits, etc.
(https://en.wikipedia.org/wiki/Payment_card_number ― https://baymard.com/checkout-usability/credit-card-patterns)
However, you can visually format the card number depending on the BIN (See the Stripe jQuery.payment : https://github.com/stripe/jquery.payment).
- Do NOT use a dropdown /
<select>menu for the card expiry.
Keep in mind that not all cards expire after only 3 years, I've seen some of them valid for over 35 years, and you don't want to lose transactions by preventing cardholders to enter their card data. - Do use
<input type="tel">for the card number and card CVV entry fields, which will cause the numeric keyboard to be displayed on mobile devices. I should add :<input type="numeric">is NOT suited for this purpose. - Do provide that new cards may use longer numbers, or longer CVV, then do not limit on a knife edge the maximum length of the fields concerned.
- Do try the Stripe jQuery.payment : https://github.com/stripe/jquery.payment to validate the fields of your payment form.
Warning
This is a preprod environment payment form, no actual bank movements will occur.
However, I cannot guarantee the confidentiality of banking information submitted on Codepen, therefore DO NOT use real bank card data, use instead one of these:
- VISA: 4111 1111 1111 1111
- MasterCard: 5111 1111 1111 1118
- American Express: 3444 444444 44447
- Bancontact: 67777777777777775
Any expiry date and any 3 digits cryptogram will be accepted.
See the Pen Be2bill hosted-fields demo (NF) by Alexis Riche (@alexisr) on CodePen.