Panoramica
Se stai usando i modelli API v1, v2 o v3 del Centro assistenza e raccogli un numero di carta di credito come parte del modulo di richiesta di assistenza, stai usando un campo di carta di credito standard. Il comportamento predefinito per questo campo richiede all’utente di inserire il numero completo della carta di credito, quindi rimuove il numero prima di inviare il modulo, sostituendo tutte le cifre tranne le ultime quattro con una “X”. Questo comportamento dei campi non è compatibile con i nuovi requisiti PCI DSS , che entreranno in vigore il 31 marzo 2025.
Se puoi, aggiorna il tema all’API di creazione modelli v4, che usa l’ helper new_request_form anziché l’helper request_form legacy. Se non riesci a passare all’API di creazione modelli v4, puoi scrivere un codice JavaScript personalizzato nel tema v1, v2 o v3 per sostituire il campo carta di credito predefinito con un nuovo campo di immissione, che richiede solo le ultime quattro cifre del credito carta.
Dovrai anche modificare l’ etichetta o la descrizione del campo della carta di credito personalizzata nel Centro amministrativo per chiedere agli utenti di inserire solo le ultime quattro cifre della carta.
Esempio di implementazione di un campo carta di credito personalizzato
Il campo carta di credito predefinito visualizzato nell’helper legacy request_formè composto da:
- Elemento di input nascosto che aggiunge il valore al modulo
- Un elemento di immissione di testo visibile all’utente. Quando l’utente sfoca l’elemento o invia il modulo, il valore inserito viene mascherato. Il valore rimosso si riflette nell’input nascosto.
Puoi scrivere codice JavaScript personalizzato per sostituire l’elemento di input di testo con un nuovo elemento di input che:
- Richiede solo le ultime quattro cifre del numero di carta di credito e
- Aggiorna l’input nascosto con da 9 a 15 “X” seguite dalle ultime quattro cifre ogni volta che il suo valore viene modificato
In questo modo, l’utente inserisce solo le ultime quattro cifre, rimuovendo il modulo dall’ambito PCI DSS. Il valore inviato con il modulo è ancora un numero di carta di credito mascherato.
Quando il modulo viene visualizzato dopo un invio con errori o quando viene creato un ticket di follow-up, gli input contengono il valore inserito in precedenza, già rimosso. Ad esempio, se l’utente inserisce un valore nel campo della carta di credito e invia il modulo con errori, la pagina si ricarica e il modulo visualizza il campo carta di credito predefinito con un valore come XXXXXXXXX1234. Il codice personalizzato deve estrarre le ultime quattro cifre e impostarle come valore del nuovo 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);
}
});
});
Avvertenza sulla traduzione: questo articolo è stato tradotto usando un software di traduzione automatizzata per fornire una comprensione di base del contenuto. È stato fatto tutto il possibile per fornire una traduzione accurata, tuttavia Zendesk non garantisce l'accuratezza della traduzione.
Per qualsiasi dubbio sull'accuratezza delle informazioni contenute nell'articolo tradotto, fai riferimento alla versione inglese dell'articolo come versione ufficiale.
0 commenti
Accedi per lasciare un commento.