Implementar um campo de cartão de crédito personalizado de quatro dígitos na Templating API v1, v2 ou v3

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.

Observação: O código abaixo é um exemplo de uma possível implementação que você pode adicionar ao arquivo script.js do tema da sua central de ajuda. Não é garantido que esse código funcione em todos os temas personalizados. Como ele será personalizado, o Zendesk não oferecerá suporte a ele, pois o Zendesk oferece suporte apenas ao tema 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);
    }
  });
});

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.