Atelier de programmation sur les bonnes pratiques concernant les formulaires de paiement

Sam Dutton

Pour suivre cet atelier de programmation, ouvrez ce Glitch dans un deuxième onglet.

Cet atelier de programmation vous explique comment créer un formulaire de paiement sécurisé, accessible et facile à utiliser.

Attention : Cet article présente les bonnes pratiques de front-end pour les formulaires de paiement. Il n'explique pas comment implémenter des transactions sur votre site. Pour en savoir plus sur l'ajout de fonctionnalités de paiement à votre site Web, consultez Paiements Web.

Étape 1: Utilisez le code HTML comme prévu

Utilisez des éléments conçus pour la tâche:

• <form>
• <section>
• <label>
• <input>, <select>, <textarea>
• <button>

Comme vous le verrez, ces éléments permettent d'activer les fonctionnalités intégrées du navigateur, d'améliorer l'accessibilité et d'ajouter du sens à votre balisage.

• Cliquez sur Remixer pour modifier pour rendre le projet modifiable.

Examinez le code HTML de votre formulaire dans index.html.

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Il existe des éléments <input> pour le numéro de carte, le nom sur la carte, la date d'expiration et le code de sécurité. Ils sont tous encapsulés dans des éléments <section> et chacun possède une étiquette. Le bouton Finaliser le paiement est un élément HTML <button>. Plus tard dans cet atelier de programmation, vous découvrirez les fonctionnalités du navigateur auxquelles vous pouvez accéder à l'aide de ces éléments.

Remarque : Les éléments <input> ne comportent pas de balises de fermeture. En effet, il s'agit d'éléments sans contenu (vides) : ils ne contiennent aucun contenu en eux-mêmes. Le caractère "/" à la fin d'un élément vide est facultatif: <input> ou <input /> est acceptable.

Cliquez sur Afficher l'application pour prévisualiser votre formulaire de paiement.

• Le formulaire fonctionne-t-il suffisamment bien tel quel ?
• Y a-t-il quelque chose que vous changeriez pour améliorer son fonctionnement ?
• Et sur mobile ?

Cliquez sur Afficher le code source pour revenir à votre code source.

Étape 2: Concevoir pour mobile et ordinateur

Le code HTML que vous avez ajouté est valide, mais le style du navigateur par défaut rend le formulaire difficile à utiliser, en particulier sur mobile. Cela ne semble pas non plus très bon.

Vous devez vous assurer que vos formulaires fonctionnent bien sur différents appareils en ajustant les marges intérieures, les marges extérieures et les tailles de police.

Copiez tout le code CSS ci-dessous et collez-le dans votre propre fichier css/main.css.

C'est beaucoup de CSS ! Les principales modifications à prendre en compte concernent les tailles:

• padding et margin sont ajoutés aux entrées.
• font-size et d'autres valeurs sont différentes pour différentes tailles de fenêtre d'affichage.

Lorsque vous êtes prêt, cliquez sur Afficher l'application pour voir le formulaire stylisé. Vous remarquerez également que les bordures ont été ajustées, que display: block; est utilisé pour les libellés afin qu'ils s'affichent sur une ligne à eux seuls, et que les entrées peuvent occuper toute la largeur. Bonnes pratiques concernant les formulaires de connexion explique plus en détail les avantages de cette approche.

Le sélecteur :invalid permet d'indiquer quand une valeur d'entrée n'est pas valide. (Vous l'utiliserez plus tard dans l'atelier de programmation.)

Le CSS est mobile first:

• Le CSS par défaut est destiné aux fenêtres d'affichage de moins de 400px de large.
• Les requêtes multimédias permettent de remplacer la valeur par défaut pour les vues d'affichage d'au moins 400px de large, puis à nouveau pour les vues d'affichage d'au moins 500px de large. Cela devrait fonctionner correctement pour les téléphones plus petits, les appareils mobiles avec des écrans plus grands et sur ordinateur.

Lorsque vous créez une application pour le Web, vous devez la tester sur différents appareils et différentes tailles de fenêtres d'affichage. Cela est particulièrement vrai pour les formulaires, car un petit problème peut les rendre inutilisables. Vous devez toujours ajuster les points de rupture CSS pour vous assurer qu'ils fonctionnent correctement avec votre contenu et vos appareils cibles.

• L'intégralité du formulaire est-elle visible ?
• Les champs de saisie du formulaire sont-ils suffisamment grands ?
• Tout le texte est-il lisible ?
• Avez-vous remarqué des différences entre l'utilisation d'un véritable appareil mobile et l'affichage du formulaire en mode Appareil dans les outils pour les développeurs Chrome ?
• Avez-vous dû ajuster les points d'arrêt ?

Il existe plusieurs façons de tester votre formulaire sur différents appareils:

• Utilisez le mode Appareil des outils pour les développeurs Chrome pour simuler des appareils mobiles.
• Envoyez l'URL depuis votre ordinateur vers votre téléphone.
• Utilisez un service tel que BrowserStack pour tester sur différents appareils et navigateurs.

Étape 3: Ajoutez des attributs pour aider les utilisateurs à saisir des données

Autorisez le navigateur à stocker et à renseigner automatiquement les valeurs de saisie, et à accéder aux fonctionnalités de validation et de paiement intégrées sécurisées.

Ajoutez des attributs au formulaire dans votre fichier index.html pour qu'il se présente comme suit:

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Ouvrez à nouveau votre application, puis appuyez ou cliquez dans le champ Numéro de carte. Selon l'appareil et la plate-forme, un sélecteur peut s'afficher, comme celui ci-dessous, pour présenter les modes de paiement enregistrés pour le navigateur.

Sélecteur de mode de paiement et saisie automatique intégrés au navigateur.

Une fois que vous avez sélectionné un mode de paiement et saisi votre code de sécurité, le navigateur renseigne automatiquement le formulaire à l'aide des valeurs autocomplete de la carte de paiement que vous avez ajoutées au formulaire:

• cc-number
• cc-name
• cc-exp
• cc-csc

De nombreux navigateurs vérifient et confirment également la validité des numéros de carte de crédit et des codes de sécurité.

Remarque : Ne vous inquiétez pas. Votre navigateur peut être en mesure de remplir automatiquement le formulaire avec les données de carte de paiement enregistrées, mais aucun paiement ne peut être effectué, et aucune donnée n'est transférée ni enregistrée.

Sur un appareil mobile, vous remarquerez également qu'un clavier numérique s'affiche dès que vous appuyez sur le champ Numéro de carte. C'est parce que vous avez utilisé inputmode="numeric". Pour les champs numériques, cela permet de saisir plus facilement des chiffres et d'empêcher les utilisateurs de saisir des caractères non numériques. Cela les incite également à se souvenir du type de données qu'ils saisissent.

Il est extrêmement important d'ajouter correctement toutes les valeurs autocomplete disponibles aux formulaires de paiement. Il est assez courant que les sites ne spécifient pas la valeur autocomplete pour la date d'expiration de la carte et d'autres champs. Si une seule valeur autofill est incorrecte ou manquante, les utilisateurs devront récupérer leur carte réelle pour saisir manuellement les données de la carte, et vous risquez de perdre une vente. Si le remplissage automatique des formulaires de paiement ne fonctionne pas correctement, les utilisateurs peuvent également décider de conserver les informations de leur carte de paiement sur leur téléphone ou leur ordinateur, ce qui est très peu sécurisé.

Remarque : Des recherches montrent qu'il peut être préférable d'utiliser des éléments de sélection distincts pour le mois et l'année plutôt qu'une seule entrée. C'est à vous de choisir celle qui vous convient le mieux. Testez-le en remixant et en modifiant le code HTML de notre démo de formulaire de paiement complète, qui inclut le code des deux types de champs de date d'expiration.

Essayez d'envoyer le formulaire de paiement avec un champ vide. Le navigateur invite à compléter les données manquantes. Ajoutez maintenant une lettre à la valeur du champ Numéro de carte, puis essayez d'envoyer le formulaire. Le navigateur avertit que la valeur n'est pas valide. Cela se produit parce que vous avez utilisé l'attribut pattern pour spécifier des valeurs valides pour un champ. Il en va de même pour maxlength et les autres contraintes de validation. Aucun code JavaScript n'est requis.

Votre formulaire de paiement devrait maintenant se présenter comme suit:

• Essayez de supprimer les valeurs autocomplete et de remplir le formulaire de paiement. Quelles difficultés rencontrez-vous ?
• Essayez les formulaires de paiement sur les boutiques en ligne. Réfléchissez à ce qui fonctionne bien et à ce qui ne fonctionne pas. Existe-t-il des problèmes courants ou des bonnes pratiques à suivre ?

Étape 4: Désactivez le bouton de paiement une fois le formulaire envoyé

Vous devez envisager de désactiver un bouton d'envoi une fois que l'utilisateur a appuyé dessus ou cliqué dessus, en particulier lorsqu'il effectue un paiement. De nombreux utilisateurs appuient ou cliquent de manière répétée sur des boutons, même s'ils fonctionnent correctement. Cela peut entraîner des problèmes de traitement des paiements et augmenter la charge du serveur.

Ajoutez le code JavaScript suivant à votre fichier js/main.js:

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

Essayez d'envoyer le formulaire de paiement et voyez ce qu'il se passe.

Attention : Certains sites laissent les boutons de soumission de formulaire désactivés jusqu'à ce que l'utilisateur ait correctement rempli tous les champs du formulaire. Nous vous déconseillons de le faire, car les utilisateurs peuvent oublier une valeur obligatoire ou utiliser une valeur non valide, puis appuyer ou cliquer sur le bouton d'envoi désactivé et supposer que votre site est défectueux. Même si vous marquez les valeurs du formulaire comme non valides ou manquantes, il est possible que l'utilisateur ne voie pas les avertissements (en particulier pour les formulaires plus longs et sur mobile). Il est préférable de procéder à la validation en ligne lorsque l'utilisateur saisit des données, et lorsqu'il tente d'envoyer le formulaire.

Voici à quoi doit ressembler votre code à ce stade, avec l'ajout de commentaires et d'une fonction validate():

• Vous remarquerez que le code JavaScript inclut du code commenté pour la validation des données. Ce code utilise l'API Constraint Validation (qui est largement compatible) pour ajouter une validation personnalisée, en accédant à l'interface utilisateur du navigateur intégrée pour définir la sélection et afficher des invites. Décommentez le code et testez-le. Vous devez définir des valeurs appropriées pour someregex et message, et une valeur pour someField.

• Quelles données d'analyse et de surveillance des utilisateurs réels surveilleriez-vous pour identifier des moyens d'améliorer vos formulaires ?

Votre formulaire de paiement complet devrait maintenant se présenter comme suit:

• Essayez votre formulaire sur différents appareils. Quels appareils et navigateurs ciblez-vous ? Comment améliorer le formulaire ?

Pour aller plus loin

Voici les fonctionnalités de formulaire essentielles qui ne sont pas abordées dans cet atelier de programmation:

• Lien vers vos conditions d'utilisation et vos règles de confidentialité: indiquez clairement aux utilisateurs comment vous protégez leurs données.

• Style et branding: assurez-vous qu'ils correspondent au reste de votre site. Lorsque les utilisateurs saisissent des noms et des adresses, et effectuent un paiement, ils doivent se sentir à l'aise et avoir confiance en leur choix.

• Analyse et surveillance des utilisateurs réels : permet de tester et de surveiller les performances et l'usabilité de la conception de votre formulaire pour des utilisateurs réels.