Le formulaire de paiement constitue souvent la dernière étape avant de finaliser un achat. Pour maximiser les conversions, assurez-vous que votre formulaire de paiement est convivial et sécurisé.
S’assurer que les utilisateurs savent ce qu’ils doivent remplir
Simplifiez au maximum votre formulaire de paiement, n'affichant que les champs obligatoires.
Indiquez le montant du paiement. Le bouton Envoyer est la solution idéale.
<button>Pay $300.00</button>
Utilisez des formulations explicites pour vos éléments <label>.
Par exemple, utilisez "Code de sécurité" au lieu d'un acronyme comme "CVV", qui n'est utilisé que par certaines marques.
Aider les utilisateurs à saisir leurs informations de paiement
Pour maximiser les conversions, assurez-vous que les utilisateurs peuvent remplir votre formulaire de paiement le plus rapidement possible.
Utilisez inputmode="numeric" pour les champs du numéro de carte et du code de sécurité afin d'afficher un clavier à l'écran optimisé pour la saisie de chiffres.
Ajoutez les valeurs autocomplete appropriées pour les commandes du formulaire de paiement afin de vous assurer que les navigateurs proposent la saisie automatique.
Utilisez autocomplete="cc-name" pour le nom, autocomplete="cc-number" pour le numéro de carte et autocomplete="cc-exp" pour la date d'expiration.
Assurez-vous que les utilisateurs saisissent les données au bon format
Utilisez l'attribut required pour chaque <input> afin de vous assurer que les utilisateurs remplissent le formulaire complet.
Les codes de sécurité des cartes de paiement peuvent comporter trois ou quatre chiffres.
Utilisez minlength="3" et maxlength="4" pour n'autoriser que trois ou quatre chiffres.
Assurez-vous que les utilisateurs ne saisissent que des chiffres pour le numéro de carte et le code de sécurité.
Utilisez pattern="[0-9 ]+" pour permettre aux utilisateurs d'inclure des espaces lorsqu'ils saisissent un numéro de carte, car c'est ainsi que les numéros s'affichent sur les cartes physiques.