Implement a custom four-digit credit card field in Templating API v1, v2, or v3

Overview

If you're using Help Center templating API v1, v2, or v3 and collecting a credit card number as part of your support request form, you're using a standard credit card field. The default behavior for this field asks the user to input the complete credit card number, then redacts the number before submitting the form, replacing all digits except the last four with an "X". This field behavior is not compatible with new PCI DSS requirements, which take effect March 31, 2025.

If you are able to, upgrade your theme to templating API v4, which uses the new_request_form helper instead of the legacy request_form helper. If you are unable to upgrade to templating API v4, you can write custom JavaScript code in your v1, v2, or v3 theme to replace the default credit card field with a new input field, which asks only for the last four digits of the credit card.

You will also need to edit the label or description of your custom credit card field in Admin Center to instruct the users to enter only the last four digits of their card.

Example implementation of custom credit card field

The default credit card field rendered in the legacy request_form helper consists of:

• A hidden input element that appends the value to the form
• A text input element visible to the user. When the user blurs the element or submits the form, the entered value is redacted. The redacted value reflects in the hidden input.

You can write custom JavaScript code to replace the text input element with a new input element which:

• Asks only for the last four digits of the credit card number, and
• Updates the hidden input with 9 to 15 “X”s followed by the last four digits every time its value is changed

In this way, the user enters only the last four digits, which removes the form from PCI DSS scope. The value submitted with the form is still a redacted credit card number.

When the form renders after a submission with errors or when a follow-up ticket is created, the inputs contain the previously entered value, already redacted. For example, if the user enters a value in the credit card field and submits the form with errors, the page reloads, and the form displays the default credit card field with a value such as XXXXXXXXX1234. Your custom code must extract the last four digits and set them as the value of the new element.

Note: The code below serves as an example of a potential implementation that you can add to the script.js file of your help center theme. This code is not guaranteed to work in every custom theme. Since it will be customized, Zendesk will not offer support for it, as Zendesk only supports the standard Copenhagen theme 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);
    }
  });
});