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 concernant l'interface 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 Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.

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>. Dans la suite de cet atelier de programmation, vous découvrirez les fonctionnalités du navigateur auxquelles vous pouvez accéder en utilisant ces éléments.

Remarque : Les éléments <input> ne comportent pas de balises de fermeture. En effet, ces éléments sont vides: ils n'ont pas de contenu en soi. 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. Il ne semble pas non plus très bon.

Vous devez vous assurer que vos formulaires fonctionnent correctement sur une gamme d'appareils en ajustant la marge intérieure, les marges et la taille des polices.

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 et que display: block; est utilisé pour les libellés. Ils se trouvent donc seuls sur une ligne et les entrées peuvent être en pleine 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 conçu en priorité pour les mobiles:

• 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.

Chaque fois que vous créez une application pour le Web, vous devez la tester sur différents appareils et différentes tailles de fenêtre 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 effectuer vos tests sur plusieurs 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 pour afficher les modes de paiement enregistrés pour le navigateur, comme celui présenté ci-dessous.

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 remplit 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 pourra peut-être remplir automatiquement le formulaire avec les données de carte de paiement enregistrées, mais aucun paiement ne pourra être effectué ni 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. En effet, vous avez utilisé inputmode="numeric". Pour les champs numériques, il est plus facile de saisir des chiffres et impossible de saisir des caractères non numériques, et pousse les utilisateurs à 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 la saisie automatique dans les formulaires de paiement ne fonctionne pas correctement, les utilisateurs peuvent également décider de conserver une trace des informations de la carte de paiement sur leur téléphone ou leur ordinateur, ce qui n'est pas très 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 est dû au fait 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 d'autres contraintes de validation. Aucun 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 va pas. Existe-t-il des problèmes courants ou des bonnes pratiques à suivre ?

Étape 4: Désactiver 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 : Sur certains sites, les boutons d'envoi de formulaire sont désactivés tant que l'utilisateur n'a pas rempli correctement tous les champs du formulaire. Il est préférable de ne pas le faire. En effet, les utilisateurs peuvent accidentellement omettre une valeur obligatoire ou utiliser une valeur non valide, puis appuyer ou cliquer sur le bouton "Envoyer" désactivé et supposer que votre site ne fonctionne pas. Même si vous marquez des valeurs de formulaire comme non valides ou manquantes, l'utilisateur peut ne pas voir 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 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, ainsi qu'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 ?

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.