Implementar un campo de tarjeta de crédito personalizado de cuatro dígitos en la API de creación de plantillas v1, v2 o v3

Información general

Si está usando la API de creación de plantillas del Centro de ayuda v1, v2 o v3 y recopila un número de tarjeta de crédito como parte de su formulario de solicitud de soporte, está usando un campo de tarjeta de crédito estándar. El comportamiento predeterminado para este campo le pide al usuario que ingrese el número completo de la tarjeta de crédito, luego suprime el número antes de enviar el formulario, reemplazando todos los dígitos excepto los últimos cuatro con una "X". El comportamiento de este campo no es compatible con los nuevos requisitos de las PCI DSS , que entrarán en vigencia el 31 de marzo de 2025.

Si puede, actualice el tema a la API de creación de plantillas v4, que usa el helper new_request_form en lugar del helper heredado request_form. Si no puede actualizar a la API de creación de plantillas v4, puede escribir código JavaScript personalizado en su tema v1, v2 o v3 para reemplazar el campo de tarjeta de crédito predeterminado con un nuevo campo de entrada, que solicita solo los últimos cuatro dígitos del crédito tarjeta.

También tendrá que editar el rótulo o la descripción del campo de tarjeta de crédito personalizado en el Centro de administración para indicar a los usuarios que ingresen solo los últimos cuatro dígitos de su tarjeta.

Ejemplo de implementación del campo de tarjeta de crédito personalizado

El campo de tarjeta de crédito predeterminado representado en el helper request_formheredado consta de:

• Un elemento de entrada oculto que agrega el valor al formulario
• Un elemento de entrada de texto visible para el usuario. Cuando el usuario desenfoca el elemento o envía el formulario, el valor ingresado se suprime. El valor suprimido se refleja en la entrada oculta.

Puede escribir código JavaScript personalizado para reemplazar el elemento de entrada de texto con un nuevo elemento de entrada que:

• Solicita solo los últimos cuatro dígitos del número de la tarjeta de crédito, y
• Actualiza la entrada oculta con 9 a 15 “X” seguidas de los últimos cuatro dígitos cada vez que se cambia su valor

De esta manera, el usuario ingresa solo los últimos cuatro dígitos, lo que elimina el formulario del alcance de las PCI DSS. El valor enviado con el formulario sigue siendo un número de tarjeta de crédito suprimido.

Cuando el formulario se procesa después de un envío con errores o cuando se crea un ticket de seguimiento, las entradas contienen el valor ingresado anteriormente, ya suprimido. Por ejemplo, si el usuario ingresa un valor en el campo de tarjeta de crédito y envía el formulario con errores, la página se vuelve a cargar y el formulario muestra el campo de tarjeta de crédito predeterminado con un valor como XXXXXXXXX1234. El código personalizado debe extraer los últimos cuatro dígitos y establecerlos como el valor del nuevo elemento.

Nota: El código a continuación sirve como ejemplo de una posible implementación que se puede agregar al archivo script.js del tema del centro de ayuda. No se garantiza que este código funcione en todos los temas personalizados. Dado que será personalizado, Zendesk no ofrecerá soporte para él, ya que Zendesk solo admite el tema estándar 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);
    }
  });
});

Descargo de responsabilidad de la traducción: Este artículo ha sido traducido usando software de traducción automática para proporcionar una idea básica del contenido. Se han realizado esfuerzos razonables para proporcionar una traducción exacta, sin embargo, Zendesk no garantiza la exactitud de la traducción.

Si surge alguna pregunta relacionada con la exactitud de la información incluida en el artículo traducido, consulte la versión en inglés del artículo, que es la versión oficial.