Implementieren Sie ein angepasstes vierstelliges Kreditkartenfeld in der Vorlagen-API v1, v2 oder v3

Übersicht

Wenn Sie die Help-Center-Vorlagen- API v1, v2 oder v3 verwenden und als Teil des Supportanfrageformularseine Kreditkartennummer erfassen, verwenden Sie ein Standard-Kreditkartenfeld. Das Standardverhalten für dieses Feld bewirkt, dass der Benutzer zur Eingabe der vollständigen Kreditkartennummer aufgefordert wird, die Nummer dann vor dem Einreichen des Formulars geschwärzt und alle Ziffern bis auf die letzten vier durch ein „X“ ersetzt werden. Dieses Feldverhalten ist nicht mit den neuen PCI -Datensicherheitsanforderungen kompatibel, die am 31. März 2025 in Kraft treten.

Wenn möglich, sollten Sie Ihr Design auf die Vorlagen- API v4 aktualisieren, die anstelle des Legacy-Helper request_form den new_request_form-Helper verwendet. Wenn Sie nicht auf die Vorlagen-API v4 upgraden können, können Sie angepassten JavaScript-Code in Ihr Design v1, v2 oder v3 schreiben, um das Standard-Kreditkartenfeld durch ein neues Eingabefeld zu ersetzen, in dem nur die letzten vier Ziffern abgefragt werden können Karte.

Außerdem müssen Sie die Bezeichnung oder Beschreibung Ihres angepassten Kreditkartenfelds im Admin Center bearbeiten, damit die Benutzer nur die letzten vier Ziffern ihrer Karte eingeben müssen.

Beispiel für die Implementierung eines angepassten Kreditkartenfelds

Das im Legacy -Helper request_formdargestellte Standard-Kreditkartenfeld besteht aus folgenden Komponenten:

• Ein ausgeblendetes Eingabeelement, das den Wert an das Formular anfügt
• Ein Texteingabeelement, das für den Benutzer sichtbar ist. Wenn der Benutzer das Element unkenntlich macht oder das Formular absendet, wird der eingegebene Wert geschwärzt. Der geschwärzte Wert wird in der ausgeblendeten Eingabe dargestellt.

Sie können angepassten JavaScript-Code schreiben, der das Eingabeelement „Text“ durch ein neues Eingabeelement ersetzt:

• Fragt nur nach den letzten vier Ziffern der Kreditkartennummer und
• Aktualisiert die ausgeblendete Eingabe mit 9 bis 15 „X“ gefolgt von den letzten vier Ziffern, wenn der Wert geändert wird

Der Benutzer gibt nur die letzten vier Ziffern ein, wodurch das Formular aus dem PCI-Datensicherheitsbereich entfernt wird. Der mit dem Formular übermittelte Wert ist weiterhin eine geschwärzte Kreditkartennummer.

Wenn das Formular nach dem Senden mit Fehlern dargestellt wird oder wenn ein Folgeticket erstellt wird, enthalten die Eingaben den zuvor eingegebenen Wert bereits geschwärzt. Wenn der Benutzer beispielsweise einen Wert in das Kreditkartenfeld eingibt und das Formular mit Fehlern absendet, wird die Seite neu geladen, und das Formular zeigt das Standard-Kreditkartenfeld mit einem Wert wie an XXXXXXXXX1234. Ihr angepasster Code muss die letzten vier Ziffern extrahieren und als Wert des neuen Elements festlegen.

Hinweis: Der folgende Code dient als Beispiel für eine mögliche Implementierung, die Sie zur Datei script.js Ihres Help-Center-Designs hinzufügen können. Es kann nicht garantiert werden, dass dieser Code in jedem angepassten Design funktioniert. Da es angepasst wird, bietet Zendesk keinen Support dafür, da Zendesk nur das Standarddesign Copenhagen v4 unterstützt.

// 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);
    }
  });
});

Hinweis zur Übersetzung: Dieser Beitrag wurde mit automatischer Übersetzungssoftware übersetzt, um dem Leser ein grundlegendes Verständnis des Inhalts zu vermitteln. Trotz angemessener Bemühungen, eine akkurate Übersetzung bereitzustellen, kann Zendesk keine Garantie für die Genauigkeit übernehmen.

Sollten in Bezug auf die Genauigkeit der Informationen im übersetzten Beitrag Fragen auftreten, beziehen Sie sich bitte auf die englische Version des Beitrags, die als offizielle Version gilt.