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

Sam Dutton

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

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

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

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

Comme vous le verrez, ces éléments activent des fonctionnalités intégrées au navigateur, améliorent l'accessibilité et ajoutent du sens à votre balisage.

• Cliquez sur Remix to Edit (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>

Le numéro, le nom, la date d'expiration et le code de sécurité de la carte comportent <input> éléments. Ils sont tous encapsulés dans des éléments <section> et sont associés à un libellé. Le bouton Complete Payment (Terminer le paiement) est de type <button> HTML. Plus tard dans cet atelier de programmation, vous découvrirez les fonctionnalités du navigateur auxquelles vous pouvez accéder en utilisant ces éléments.

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

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

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

Étape 2: Concevoir pour les mobiles et les ordinateurs

Le code HTML que vous avez ajouté est valide, mais le style par défaut du navigateur rend le formulaire difficile à utiliser, en particulier sur mobile. Ça n'a pas l'air très bien non plus.

Vous devez vous assurer que vos formulaires fonctionnent correctement sur divers appareils en ajustant les marges intérieures, les marges et les tailles de police.

Copiez l'intégralité du code CSS ci-dessous et collez-le dans votre propre fichier css/main.css.

Cela fait beaucoup de code CSS ! Les principaux points à connaître sont les modifications apportées aux tailles:

• padding et margin sont ajoutés aux entrées.
• font-size et d'autres valeurs diffèrent selon les tailles de fenêtres d'affichage.

Lorsque vous êtes prêt, cliquez sur Afficher l'application pour afficher le style du formulaire. Vous remarquerez également que les bordures ont été ajustées et que display: block; est utilisé pour les libellés. Ils occupent donc toute une ligne et les entrées peuvent être en pleine largeur. Les bonnes pratiques concernant les formulaires de connexion expliquent plus en détail les avantages de cette approche.

Le sélecteur :invalid permet d'indiquer lorsqu'une entrée comporte une valeur non valide. (Vous en aurez besoin plus tard dans l'atelier de programmation.)

Le CSS est axé sur les mobiles:

• Le CSS par défaut s'applique aux fenêtres d'affichage de moins de 400px de large.
• Les requêtes média permettent de remplacer la valeur par défaut pour les fenêtres d'affichage d'au moins 400px de large, puis de nouveau pour les fenêtres d'affichage d'une largeur d'au moins 500px. Cela devrait fonctionner sur les téléphones plus petits, les appareils mobiles dotés d'un écran plus grand et les ordinateurs de bureau.

Lorsque vous créez des applications pour le Web, vous devez effectuer des tests sur différentes tailles d'appareils et de fenêtres d'affichage. C'est particulièrement vrai pour les formulaires, car un petit glitch peut les rendre inutilisables. Vous devez toujours ajuster les points d'arrêt CSS pour vous assurer qu'ils fonctionnent bien avec votre contenu et vos appareils cibles.

• L'intégralité du formulaire est-elle visible ?
• Les entrées du formulaire sont-elles suffisamment grandes ?
• L'ensemble du 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 de votre ordinateur vers votre téléphone.
• Utilisez un service tel que BrowserStack pour effectuer des tests sur différents appareils et navigateurs.

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

Autorisez le navigateur à stocker et à saisir automatiquement les valeurs saisies, et à donner accès à des fonctionnalités intégrées de paiement et de validation 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>

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

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

Sur un appareil mobile, vous remarquerez également qu'un clavier numérique s'affiche dès que vous appuyez dans le champ Numéro de carte. C'est parce que 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 encourage 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 passent à côté de 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 associées. Vous risquez de ne pas profiter d'une promotion. Si la saisie automatique sur les formulaires de paiement ne fonctionne pas correctement, les utilisateurs peuvent également décider de conserver les informations de la carte de paiement sur leur téléphone ou leur ordinateur, ce qui n'est pas sécurisé.

Essayez d'envoyer le formulaire de paiement avec un champ vide. Le navigateur vous invite à renseigner les données manquantes. Ajoutez maintenant une lettre à la valeur du champ Numéro de carte, puis essayez d'envoyer le formulaire. Le navigateur vous avertit que la valeur n'est pas valide. En effet, 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.

Voici à quoi doit ressembler votre formulaire de paiement:

• Essayez de supprimer des 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. Y a-t-il des problèmes courants ou des bonnes pratiques que vous devriez 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 cliquent ou appuient de manière répétée sur des boutons, même s'ils fonctionnent correctement. Cela peut causer 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 qui se passe.

Voici à quoi doit ressembler votre code à ce stade, avec l'ajout de quelques 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 intégrée du navigateur pour définir le focus et afficher les invites. Supprimez la mise en commentaire du code et essayez-le. Vous devez définir des valeurs appropriées pour someregex et message, et définir une valeur pour someField.

• Quelles données analytiques et Real User Monitoring devez-vous surveiller afin d'identifier des moyens d'améliorer vos formulaires ?

Une fois terminé, votre formulaire de paiement doit se présenter comme suit:

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

Pour aller plus loin

Voici quelques fonctionnalités essentielles des formulaires qui ne sont pas abordées dans cet atelier de programmation:

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

• Style et branding: assurez-vous qu'ils correspondent au reste de votre site. Lorsqu'ils saisissent leur nom et leur adresse et effectuent un paiement, les utilisateurs doivent se sentir à l'aise et avoir la certitude d'être au bon endroit.

• Analyse et surveillance des utilisateurs réels : testez les performances et la facilité d'utilisation de la conception de votre formulaire pour des utilisateurs réels.