概览
如果您使用帮助中心 模板化 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);
}
});
});
翻译免责声明:本文章使用自动翻译软件翻译,以便您了解基本内容。 我们已采取合理措施提供准确翻译,但不保证翻译准确性
如对翻译准确性有任何疑问,请以文章的英语版本为准。
0 条评论