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.
// 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.
0 comentarios