Le formulaire de paiement est souvent la dernière étape précédant un achat. Pour maximiser les conversions, assurez-vous que votre formulaire de paiement est convivial et sécurisé.
S’assurer que les utilisateurs savent quoi remplir
Optez pour un formulaire de paiement aussi simple que possible, affichant uniquement les champs obligatoires.
Indiquez le montant du paiement. Pour ce faire, utilisez le bouton Envoyer.
<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é
pour afficher un clavier à l'écran optimisé pour la saisie de chiffres.
Ajoutez les valeurs autocomplete appropriées pour les commandes de votre 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.
S'assurer que les utilisateurs saisissent des 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 et quatre chiffres.
Assurez-vous que les utilisateurs ne saisissent que des chiffres pour le numéro de la carte et le code de sécurité.
Utilisez pattern="[0-9 ]+" pour autoriser les utilisateurs à inclure des espaces lorsqu'ils saisissent un numéro de carte.
car c'est ainsi que les chiffres sont affichés sur les cartes physiques.