Implémentez un champ de carte de crédit à quatre chiffres personnalisé dans l’API de création de modèles v1, v2 ou v3.

Aperçu

Si vous utilisez l’ API de création de modèles du centre d’aide v1, v2 ou v3 et recueillez un numéro de carte de crédit dans votre formulaire de demande d’assistance, vous utilisez un champ de carte de crédit standard. Le comportement par défaut pour ce champ demande à l’utilisateur de saisir le numéro de carte de crédit complet, puis le supprime avant d’envoyer le formulaire, en remplaçant tous les chiffres sauf les quatre derniers par un X. Le comportement de ce champ n’est pas compatible avec les nouvelles exigences PCI DSS , qui entreront en vigueur le 31 mars 2025.

Si c’est votre cas, mettez votre thème à niveau en passant à l’API de création de modèles v4, qui utilise le bot new_request_form au lieu de l’ancien bot request_form. Si vous ne parvenez pas à mettre à niveau à l'API de création de modèles v4, vous pouvez rédiger du code JavaScript personnalisé dans votre thème v1, v2 ou v3 pour remplacer le champ de carte de crédit par défaut par un nouveau champ de saisie, qui ne demande que les quatre derniers chiffres du crédit. .

Vous devrez aussi modifier le libellé ou la description de votre champ de carte de crédit personnalisé dans le Centre d’administration pour demander aux utilisateurs de saisir uniquement les quatre derniers chiffres de leur numéro de carte.

Exemple d’implémentation du champ de carte de crédit personnalisé

Le champ de carte de crédit par défaut rendu dans l’ancien assistant request_formcomprend :

• Un élément de saisie masqué qui ajoute la valeur au formulaire
• Un élément de saisie de texte visible par l’utilisateur. Lorsque l’utilisateur rend l’élément flou ou envoie le formulaire, la valeur saisie est supprimée. La valeur supprimée est reflétée dans l’entrée masquée.

Vous pouvez rédiger du code JavaScript personnalisé pour remplacer le texte par un nouvel élément qui :

• Ne demande que les quatre derniers chiffres du numéro de carte de crédit, et
• Il met à jour l’entrée masquée avec 9 à 15 X, suivis des quatre derniers chiffres, chaque fois que sa valeur est modifiée.

Ainsi, l’utilisateur ne saisit que les quatre derniers chiffres, ce qui supprime le formulaire de la portée des normes PCI DSS. La valeur envoyée avec le formulaire est encore un numéro de carte de crédit supprimé.

Lors du rendu du formulaire après un envoi avec des erreurs ou lors de la création d’un ticket de suivi, les entrées contiennent la valeur saisie précédemment, déjà supprimée. Par exemple, si l’utilisateur saisit une valeur dans le champ de carte de crédit et envoie le formulaire avec des erreurs, la page se recharge et le formulaire affiche le champ de carte de crédit par défaut avec une valeur comme XXXXXXXXX1234. Votre code personnalisé doit extraire les quatre derniers chiffres et les définir comme valeurs du nouvel élément.

Remarque : Le code ci-dessous est un exemple d’implémentation que vous pouvez ajouter au fichier script.js du thème de votre centre d’aide. Il n’est pas garanti que ce code fonctionne dans chaque thème personnalisé. Comme il sera personnalisé, Zendesk ne fournira pas d’assistance car Zendesk prend uniquement en charge le thème Copenhagen standard v4.

// 4 digits credit card field
document.addEventListener("DOMContentLoaded", function () {
  // Select all text inputs with the class 'partialcreditcardinputfield'
  const inputFields = 
document.querySelectorAll(".partialcreditcardinputfield");

  inputFields.forEach((originalInput) => {
    // Locate the adjacent hidden input
    const parentElement = originalInput.parentElement;
    const hiddenInput = parentElement.querySelector(
      ".partialcreditcardhiddenfield"
    );

    if (hiddenInput) {
      // Get the relevant attributes from the original input
      const id = originalInput.id;
      const className = originalInput.className;
      const ariaRequired = originalInput.getAttribute("aria-required");
      const ariaLabelledby = originalInput.getAttribute("aria-labelledby");

      // Create the new input element
      const newInput = document.createElement("input");
      newInput.type = "text";
      newInput.id = id;
      newInput.className = className;
      newInput.setAttribute("aria-required", ariaRequired);
      newInput.setAttribute("aria-labelledby", ariaLabelledby);
      newInput.setAttribute("maxlength", "4");
      newInput.value = originalInput.value
        ? originalInput.value.replaceAll("X", "")
        : "";

      // Add the input event listener to update the hidden input
      newInput.addEventListener("input", function (event) {
        const value = event.target.value;
        hiddenInput.value = `XXXXXXXXX${value}`;
      });

      // Replace the original input with the new one
      parentElement.replaceChild(newInput, originalInput);
    }
  });
});

Traduction - exonération : cet article a été traduit par un logiciel de traduction automatisée pour permettre une compréhension élémentaire de son contenu. Des efforts raisonnables ont été faits pour fournir une traduction correcte, mais Zendesk ne garantit pas l’exactitude de la traduction.

Si vous avez des questions quant à l’exactitude des informations contenues dans l’article traduit, consultez la version anglaise de l’article, qui représente la version officielle.