在模板化 API v1、v2 或 v3 中实施自定义四位数信用卡字段

概览

如果您使用帮助中心 模板化 API v1、v2 或 v3，并在 支持请求表格中收集信用卡号码，则您使用的是标准信用卡字段。此字段的默认行为是要求用户输入完整的信用卡号，然后在提交表格之前将该卡号标记为密文，即将除最后四位以外的所有数字替换为“X”。此字段行为与将于 2025 年 3 月 31 日生效的新 PCI DSS 要求不兼容。

如果可以的话， 将您的主题升级到模板化 API v4，它使用 new_request_form 助手 ，而不是旧版的 request_form 助手。如果您无法升级到模板化 API v4，可以在 v1、v2 或 v3 主题中编写自定义 JavaScript 代码，以便用新的输入字段替换默认的信用卡字段，后者仅要求您输入额度的后四位数。卡。

您还需要在 管理中心 编辑自定义信用卡字段的 标签或描述 ，以指示用户仅输入其信用卡的最后四位数。

自定义信用卡字段的实施示例

旧版 request_form 助手中呈现的默认信用卡字段包括：

• 隐藏的输入元素，用于将值附加到表格中
• 对用户可见的文本输入元素。当用户模糊元素或提交表格时，输入的值将被标记为密文。已标记为密文的值会反映在隐藏的输入中。

您可以编写自定义 JavaScript 代码，将文本输入元素替换为新的输入元素，该元素：

• 仅询问信用卡号的最后四位数，并且
• 每次隐藏输入值更改时，更新其值，其中包含 9 到 15 个“X”，后跟最后四位数

这样，用户只需输入最后四位数，从而将从 PCI DSS 范围中删除表格。随表格提交的值仍是已标记为密文的信用卡号。

当提交表格后出现错误或创建跟进工单时呈现表格时，输入将包含之前输入的值，并已标记为密文。例如，如果用户在信用卡字段中输入了一个值，并提交了出错的表格，则页面将重新加载，表格将显示默认的信用卡字段，其值例如 XXXXXXXXX1234更新。您的自定义代码必须提取最后四位数，并将其设置为新元素的值。

注意：以下代码是可以添加到帮助中心主题的 script.js 文件中的潜在实施示例。不保证此代码适用于每个自定义主题。由于它是自定义的，Zendesk 仅支持标准的 Copenhagen 主题 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);
    }
  });
});

翻译免责声明：本文章使用自动翻译软件翻译，以便您了解基本内容。 我们已采取合理措施提供准确翻译，但不保证翻译准确性

如对翻译准确性有任何疑问，请以文章的英语版本为准。