The last 5 years, I worked for a payment company with some of the biggest french online shops, to help them integrate the payment form into their website.
I saw good and terrible things, and I would like to share my experience by giving some recommendations.
- 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 "sandbox environment" payment form: no actual bank movements will occur.
However, I cannot guarantee the confidentiality of the banking data entered on a Codepen interface, so DO NOT use real bank card data, please use instead one of these test cards:
- VISA: 4111 1111 1111 1111
- MasterCard: 5111 1111 1111 1118
With any expiry date, and any 3 digits cryptogram.
See the Pen Be2bill hosted-fields demo (NF) by Alexis Riche (@alexisr) on CodePen.