À ne pas faire

• Ne divisez pas le champ de saisie du numéro de carte en plusieurs<input>.
  Même si c'est bien intentionné, abstenez-vous absolument, parce que :
  • Vos porteurs de carte sont susceptibles d'utiliser l'autocomplétion du gestionnaire de moyens de paiement de leur navigateur / appareil, or un champ de numéro de carte fractionné va interférer avec cette fonctionnalité.
  • Vous ne pouvez tout simplement pas anticiper le format de la carte utilisée par vos porteurs avant qu'ils n'aient saisi les premiers chiffres. Par exemple, MasterCard émet des cartes Maestro dont la longueur varie entre 12 et 19 chiffres ; les numéros de cartes Visa comptent 13, 16 ou 19 chiffres, etc.
  • En revanche, vous pouvez formater visuellement le numéro de carte en fonction du BIN – Voir le plugin Stripe jQuery.payment : https://github.com/stripe/jquery.payment
• N'utilisez pas un menu déroulant / <select> mais un champ de texte plus permissif <input type="text"> pour indiquer la date d'expiration de la carte.
  Gardez à l'esprit que toutes les cartes n'expirent peut-être pas après seulement 4 ou 5 ans, et vous ne voudriez pas perdre de belles transactions en empêchant des porteurs de saisir les données authentiques de leurs cartes.

Anecdote

À mon arrivée dans l'entreprise, on m'avait mentionné un paiement effectué avec une carte dont la date de validité s'étendait à 35 ans.
Toutefois, n'en ayant jamais observé moi-même et considérant les contraintes de sécurité et d'usure d'une carte bancaire, je classe cette information dans les mythes industriels.

À faire

• Ajoutez un certificat TLS sur votre boutique en ligne, et faites-en la promotion avec des textes de rassurance.
• Utilisez les noms de champs standards pour déclencher l'autocomplétion du navigateur Web : https://html.spec.whatwg.org/multipage/forms.html#autofill-field
• Utilisez des <input type="tel"> pour les champs de saisie du numéro de carte et du cryptogramme (CVV), ce qui aura pour effet d'afficher le clavier numérique sur les appareils mobiles, facilitant ainsi la saisie. ( <input type="number"> n'est PAS adapté à cet usage)
• Mise à jour 2021 de la précédente recommandation : Utilisez <input type="number"> pour les champs de saisie du numéro de carte et du cryptogramme (CVV), désormais pleinement compatible avec les smartphones et plus approprié.
• Essayez le plugin Stripe jQuery.payment pour valider les champs de votre formulaire de paiement.

See the Pen Be2bill hosted-fields demo (NF) by Alexis Riche (@alexisr) on CodePen.

Commentaires