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 d'une fonctionnalité de paiement à votre site Web, consultez la page relative aux paiements Web.

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

Utilisez des éléments conçus pour le travail:

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

Comme vous le verrez, ces éléments permettent d'intégrer une fonctionnalité de navigateur, d'améliorer l'accessibilité donner 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 y a 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 sont encapsulés dans des éléments <section> et chacun est associé à un libellé. Le bouton Effectuer le paiement est un fichier 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> n'ont pas de balises de fermeture. En effet, ces éléments sont vides: ils n'ont pas de contenu en soi. Un "/" à la fin d'un élément vide est facultatif: <input> ou <input /> sont acceptés.

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

• Le formulaire fonctionne-t-il correctement tel quel ?
• Y a-t-il quelque chose que vous changeriez pour l'améliorer ?
• Et sur mobile ?

Cliquez sur Afficher la source pour revenir au code source.

Étape 2: Concevez votre application 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, surtout sur les mobiles. Ce n'est pas très beau non plus.

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

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

Cela fait beaucoup de CSS ! Voici les principaux points à retenir concernant les modifications apportées aux tailles:

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

Lorsque vous êtes prêt, cliquez sur Afficher l'application pour afficher le formulaire stylisé. Vous remarquerez également que les bordures ont a été ajusté, et display: block; est utilisé pour les libellés afin qu'ils s'alignent eux-mêmes sur une ligne, et 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 lorsqu'une entrée comporte une valeur non valide. (Vous utiliserez dans la suite de cet 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 dont la largeur est inférieure à 400px.
• Les requêtes média sont utilisé pour remplacer la valeur par défaut pour les fenêtres d'affichage dont la largeur est supérieure ou égale à 400px, puis une seconde fois pour les des fenêtres d'affichage d'une largeur d'au moins 500px. Cela devrait fonctionner bien pour les petits téléphones, les appareils mobiles sur des écrans plus grands et sur les ordinateurs de bureau.

Chaque fois que vous créez des applications pour le Web, vous devez effectuer des tests sur différents appareils et tailles de fenêtres d'affichage. C'est surtout vrai pour les formulaires, car un petit glitch peut les rendre inutilisables. Vous devez toujours ajuster Des points d'arrêt CSS pour s'assurer qu'ils fonctionnent bien avec et vos appareils cibles.

• L'intégralité du formulaire est-elle visible ?
• Les entrées du formulaire sont-elles suffisamment grandes ?
• Le texte est-il lisible ?
• Avez-vous remarqué les différences entre l'utilisation d'un véritable appareil mobile et l'affichage du formulaire dans 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:

• Utiliser 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 un test sur une plage d'appareils et de navigateurs.

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

Permettez au navigateur de stocker et de saisir automatiquement les valeurs saisies, et de donner accès à des applications sécurisées intégrées de paiement et de validation.

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 votre application, puis appuyez ou cliquez sur le champ Numéro de carte. En fonction de l’appareil et plate-forme, un sélecteur peut s'afficher pour afficher les modes de paiement enregistrés pour le navigateur, comme dans l'exemple ci-dessous.

<ph type="x-smartling-placeholder">

</ph>

Sélecteur de paiement et saisie automatique intégrés dans le 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 en utilisant les 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 é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 l'icône 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 encourage les utilisateurs à de 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 Il est assez fréquent que les sites n'atteignent pas la valeur autocomplete correspondant à la date d'expiration de la carte et à d'autres . Si une seule valeur autofill est incorrecte ou manquante, les utilisateurs devront récupérer leur valeur réelle pour saisir manuellement les données de la carte, vous risquez de passer à côté d'une vente. Si la saisie automatique dans les formulaires de paiement ne fonctionne pas correctement, l'utilisateur peut également décider de conserver une trace des informations relatives à sa carte de paiement sur son téléphone ou un ordinateur, qui n'est pas sécurisé.

Remarque : Des études montrent qu'il peut être préférable d'utiliser des éléments sélectionnés distincts pour le mois et l'année plutôt qu'une seule entrée. C'est à vous de décider ce qui vous convient le mieux. Pour le tester, modifiez et modifiez le code HTML issu de notre démo complète sur le formulaire de paiement, qui inclut le code pour les deux types de champ de date d'expiration.

Essayez d'envoyer le formulaire de paiement sans renseigner le champ. Le navigateur vous invite à terminer données. Ajoutez maintenant une lettre à la valeur du champ Numéro de carte, puis essayez d'envoyer le formulaire. La le navigateur vous avertit que la valeur n'est pas valide. Cela est dû au fait que vous avez utilisé l'attribut pattern pour et spécifier des valeurs valides pour un champ. Il en va de même pour maxlength et les autres Contraintes de validation JavaScript n'est pas nécessaire.

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 ? rencontrer ?
• 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 meilleures pratiques que vous devriez suivre ?

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

Nous vous recommandons de désactiver le bouton "Envoyer" une fois que l'utilisateur a appuyé ou cliqué dessus, en particulier si l'utilisateur effectue le paiement. De nombreux utilisateurs appuient ou cliquent sur des boutons à plusieurs reprises, même s'ils fonctionnent bien. 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 qui 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 d'effectuer une validation intégrée 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 accepté) pour ajouter et l'accès à l'UI intégrée du navigateur pour définir le focus et afficher les invites. Annulez la mise en commentaire du code, puis essayez-le. Vous devez définir des valeurs appropriées pour someregex et message, ainsi qu'une valeur pour someField

• Quelles sont les données d'analyse et de Real User Monitoring ? surveilleriez-vous afin de trouver des moyens d'améliorer vos formulaires ?

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

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

Aller plus loin

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

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

• Style et branding: assurez-vous qu'ils correspondent au reste de votre site. Lorsque vous saisissez des noms et des adresses et à effectuer un paiement, les utilisateurs doivent se sentir à l'aise et avoir l'assurance qu'ils sont toujours au bon endroit.

• Analyse et surveillance des utilisateurs réels: permettre aux utilisateurs réels de tester et de surveiller les performances et la facilité d'utilisation de la conception de votre formulaire.