I moduli di pagamento sono la parte più critica della procedura di pagamento. Un design scadente del modulo di pagamento è una causa comune di abbandono del carrello degli acquisti.
Crea un modulo che consenta agli utenti di inserire i dati di pagamento nel modo più semplice possibile su computer e dispositivi mobili. Assicurati che il modulo sfrutti al meglio le funzionalità integrate del browser per la compilazione automatica, la convalida e i vincoli di inserimento dei dati.
Come implementare
Di seguito sono riportate le linee guida più importanti per creare moduli di pagamento efficaci.
Utilizza codice HTML valido e significativo
Sfrutta al meglio gli elementi e gli attributi creati per la creazione di moduli:
<form>,<input>,<label>e<button>type,autocompleteeinputmode
Questi attributi attivano la funzionalità integrata del browser, migliorano l'accessibilità e aggiungono significato al markup.
Utilizza l'elemento <label> per etichettare i campi del modulo per l'inserimento dei dati
Per etichettare un elemento <input>, <select> o <textarea>, utilizza un elemento <label>. Associa un'etichetta a un input assegnando all'attributo for dell'etichetta lo stesso valore dell'attributo id dell'input.
Sfrutta al massimo gli attributi HTML
Semplifica l'inserimento dei dati da parte degli utenti utilizzando l'attributo <type> dell'elemento <input> appropriato per fornire la tastiera corretta sui dispositivi mobili e attivare la convalida di base integrata nel browser.
Utilizza sempre type="email" per gli indirizzi email e type="tel" per i numeri di telefono.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Ogni elemento <input>, <select> e <textarea> DOVREBBE avere un attributo autocomplete appropriato per migliorare l'accessibilità e aiutare gli utenti a evitare di reinserire i dati.
Crea pulsanti utili
Utilizza <button> per i pulsanti. Puoi anche utilizzare <input type="submit">, ma non utilizzare div o un altro elemento casuale che funge da pulsante. Gli elementi dei pulsanti forniscono un comportamento accessibile, una funzionalità di invio dei moduli integrata e possono essere facilmente personalizzati.
Assegna a ogni pulsante di invio del modulo un valore che ne descriva la funzione. Per ogni passaggio verso il pagamento, utilizza un invito all'azione descrittivo che mostri l'avanzamento e renda evidente il passaggio successivo. Ad esempio, etichetta il pulsante di invio nel modulo dell'indirizzo di consegna con Procedi al pagamento anziché con Continua o Salva.
Se possibile, utilizza un unico campo per il nome
Consenti agli utenti di inserire il proprio nome utilizzando un unico campo di immissione, a meno che tu non abbia un buon motivo per memorizzare separatamente nomi, cognomi, titoli onorifici o altre parti del nome. L'utilizzo di un unico campo per il nome rende i moduli meno complessi, consente il taglia e incolla e semplifica la compilazione automatica.
Consenti nomi internazionali. Per la convalida, evita di utilizzare espressioni regolari che corrispondono solo ai caratteri latini. Solo caratteri latini esclude gli utenti con nomi o indirizzi che includono caratteri non presenti nell'alfabeto latino. Consenti invece la corrispondenza delle lettere Unicode e assicurati che il tuo backend supporti Unicode in modo sicuro sia come input che come output. Unicode nelle espressioni regolari è ben supportato dai browser moderni.
Consenti una varietà di formati di indirizzo
Quando aggiungi i campi del modulo per un indirizzo in un modulo di pagamento, tieni presente la varietà di formati degli indirizzi, anche all'interno di un singolo paese. Non fare supposizioni sugli indirizzi "normali".
Se possibile, in base ai requisiti dei dati, ti consigliamo di utilizzare un singolo elemento <textarea> per l'indirizzo. Questa è l'opzione più flessibile per una varietà di formati di indirizzi locali e internazionali.
Utilizza il completamento automatico per l'indirizzo di fatturazione
Per impostazione predefinita, l'indirizzo di fatturazione corrisponde all'indirizzo di consegna. Riduci il disordine visivo fornendo un link per modificare l'indirizzo di fatturazione (o utilizza gli elementi summary e details) anziché visualizzare l'indirizzo di fatturazione in un modulo.
Utilizza valori di completamento automatico appropriati per l'indirizzo di fatturazione, proprio come fai per l'indirizzo di spedizione, in modo che l'utente non debba inserire i dati più di una volta. Aggiungi una parola di prefisso agli attributi di completamento automatico se hai valori diversi per gli input con lo stesso nome in sezioni diverse. Ad esempio:
<!-- Prefix with shipping or billing; note that the valid token is address-line1 (no hyphen before the digit) -->
<input autocomplete="shipping address-line1" ...>
...
<input autocomplete="billing address-line1" ...>
Mostra l'avanzamento del pagamento
Per ogni passaggio verso il pagamento, utilizza intestazioni di pagina e valori dei pulsanti descrittivi che chiariscano cosa deve essere fatto ora e qual è il passaggio successivo del pagamento.
Utilizza l'attributo enterkeyhint sugli input dei moduli per impostare l'etichetta del tasto Invio della tastiera mobile. Ad esempio, utilizza enterkeyhint="previous" e enterkeyhint="next" all'interno di un modulo di più pagine, enterkeyhint="done" per l'input finale nel modulo e enterkeyhint="search" per un input di ricerca.
Aiuta gli utenti a evitare di reinserire i dati di pagamento
Assicurati di aggiungere i valori autocomplete appropriati nei moduli delle carte di pagamento. Senza la compilazione automatica, gli utenti potrebbero conservare un registro fisico dei dati delle carte di pagamento o memorizzarli in modo non sicuro.
<!-- cc-number tells autofill this is a card number, not a generic number field -->
<!-- inputmode="numeric" gives a numeric keyboard without the increment/decrement spinner -->
<!-- DO NOT use type="number" — it adds increment/decrement controls and strips leading zeros -->
<input id="cc-number" name="cc-number" type="text" autocomplete="cc-number"
inputmode="numeric" maxlength="19" pattern="[\d ]{13,19}" required>
<!-- cc-name autofills with the name exactly as it appears on the card; Unicode pattern allows international names -->
<input id="cc-name" name="cc-name" type="text" autocomplete="cc-name"
maxlength="50" pattern="[\p{L} \-\.]+" required>
<!-- cc-exp autofills the full expiry date as MM/YY -->
<!-- MANDATORY: Place format hints above the input so autocomplete popovers or virtual keyboards do not obscure them during editing -->
<span id="exp-hint" class="hint">Format: MM/YY</span>
<input id="cc-exp" name="cc-exp" type="text" autocomplete="cc-exp"
aria-describedby="exp-hint" maxlength="5" required>
<!-- cc-csc autofills the security code; DO NOT use type="password" here -->
<input id="cc-csc" name="cc-csc" type="text" autocomplete="cc-csc"
inputmode="numeric" maxlength="4" pattern="[0-9]{3,4}" required>
Mostra i suggerimenti di formato sopra l'input
Se un campo ha un formato obbligatorio (ad esempio la data di scadenza MM/YY), inserisci il suggerimento in un elemento visibile sopra l'input e collega i due elementi con aria-describedby, come nell'esempio cc-exp riportato sopra. I suggerimenti che si trovano sotto un campo di immissione vengono facilmente nascosti dalla tastiera mobile o dal popover di compilazione automatica nel momento in cui l'utente ne ha bisogno.
Non fare affidamento sull'attributo placeholder come unico suggerimento per il formato e non utilizzarlo mai al posto di un <label>: il testo segnaposto viene nascosto non appena l'utente inizia a digitare, quindi non può essere controllato durante la modifica. Un segnaposto va bene come indicazione aggiuntiva insieme all'etichetta e al suggerimento permanente.
Non mascherare il codice di sicurezza
Utilizza type="text" con inputmode="numeric" per il codice di sicurezza della carta, non type="password". Gli utenti non possono controllare se un codice mascherato di tre o quattro cifre contiene errori di battitura, quindi un errore di battitura non viene rilevato finché il pagamento non viene rifiutato. Inoltre, il mascheramento offre una protezione minima perché il codice è stampato sulla carta che l'utente ha in mano.
Utilizza un unico input per i numeri di telefono e delle carte di pagamento
Per i numeri di telefono e delle carte di pagamento, utilizza un unico campo di immissione: non suddividere il numero in più parti. In questo modo, gli utenti possono inserire i dati più facilmente, la convalida è più semplice e i browser possono eseguire la compilazione automatica. Valuta la possibilità di fare lo stesso per altri dati numerici, come PIN e codici banca.
Convalida attentamente
Devi convalidare l'inserimento dei dati sia in tempo reale sia prima dell'invio del modulo. Un modo per farlo è aggiungere un attributo pattern a un input della carta di pagamento. Se l'utente tenta di inviare il modulo di pagamento con un valore non valido, il browser visualizza un messaggio di avviso e imposta lo stato attivo sull'input.
Tuttavia, l'espressione regolare del pattern deve essere abbastanza flessibile da gestire l'intervallo di lunghezze dei numeri delle carte di pagamento: da 14 cifre (o eventualmente meno) a 20 (o più). I codici di sicurezza delle carte (noti anche come CSC, CVC, CVV o altri nomi) sono composti da 3 o 4 cifre.
Consenti agli utenti di includere spazi quando inseriscono un nuovo numero di carta di pagamento, poiché è così che i numeri vengono visualizzati sulle carte fisiche. In questo modo, l'esperienza utente è più semplice (non dovrai dire all'utente che "ha commesso un errore"), è meno probabile che il flusso di conversione venga interrotto ed è facile rimuovere gli spazi nei numeri prima dell'elaborazione.
Aiuta gli utenti a evitare di omettere accidentalmente campi di dati
Aggiungi l'attributo required ai campi obbligatori. I browser moderni richiedono e impostano automaticamente lo stato attivo per i dati mancanti.
Strategie di riserva
La compilazione automatica è un potenziamento progressivo. Nei browser che non supportano la compilazione automatica, gli utenti dovranno semplicemente inserire manualmente i propri dati di pagamento. I vincoli HTML semantici (come type, inputmode, pattern e required) continueranno a funzionare correttamente per convalidare l'input dell'utente e fornire le tastiere virtuali corrette.