Visão geral
Se você estiver usando a API de modelos da Central de Ajuda v1, v2 ou v3 e coletando um número de cartão de crédito como parte de seu formulário de solicitação de suporte, estará usando um campo de cartão de crédito padrão. O comportamento padrão desse campo solicita que o usuário insira o número completo do cartão de crédito e, em seguida, suprime o número antes de enviar o formulário, substituindo todos os dígitos, exceto os quatro últimos, por um "X". O comportamento desse campo não é compatível com os novos requisitos do PCI DSS , que entrarão em vigor em 31 de março de 2025.
Se você puder, atualize seu tema para a API de modelos v4, que usa o auxiliar new_request_form em vez do auxiliar legado request_form. Se você não conseguir atualizar para a API de modelos v4, poderá escrever um código JavaScript personalizado em seu tema v1, v2 ou v3 para substituir o campo de cartão de crédito padrão por um novo campo de entrada, que solicita apenas os quatro últimos dígitos do crédito .
Você também precisará editar o rótulo ou a descrição do seu campo personalizado de cartão de crédito na Central de administração para instruir os usuários a inserirem apenas os quatro últimos dígitos do cartão.
Exemplo de implementação do campo personalizado de cartão de crédito
O campo de cartão de crédito padrão renderizado no auxiliar request_formlegado consiste em:
- Um elemento de entrada oculto que anexa o valor ao formulário
- Um elemento de entrada de texto visível para o usuário. Quando o usuário desfoca o elemento ou envia o formulário, o valor inserido é suprimido. O valor suprimido reflete na entrada oculta.
Você pode escrever um código JavaScript personalizado para substituir o elemento de entrada de texto por um novo elemento de entrada que:
- Solicita apenas os quatro últimos dígitos do número do cartão de crédito e
- Atualiza a entrada oculta com 9 a 15 “X” seguidos pelos últimos quatro dígitos sempre que seu valor for alterado
Dessa maneira, o usuário insere apenas os quatro últimos dígitos, o que remove o formulário do escopo do PCI DSS. O valor enviado com o formulário ainda é um número de cartão de crédito suprimido.
Quando o formulário é renderizado após um envio com erros ou quando um ticket de acompanhamento é criado, as entradas contêm o valor inserido anteriormente, já suprimido. Por exemplo, se o usuário inserir um valor no campo de cartão de crédito e enviar o formulário com erros, a página será recarregada e o formulário exibirá o campo de cartão de crédito padrão com um valor como XXXXXXXXX1234
. Seu código personalizado deve extrair os quatro últimos dígitos e defini-los como o valor do novo elemento.
// 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);
}
});
});
Aviso sobre a tradução: este artigo foi traduzido por um software de tradução automática para oferecer a você uma compreensão básica do conteúdo. Medidas razoáveis foram tomadas para fornecer uma tradução precisa, no entanto, a Zendesk não garante a precisão da tradução.
Em caso de dúvidas relacionadas à precisão das informações contidas no artigo traduzido, consulte a versão oficial do artigo em inglês.
0 comentários