La forma di pagamento è spesso l'ultimo passaggio prima di completare un acquisto. Per massimizzare le conversioni, assicurati che il modulo di pagamento sia facile da usare e sicuro.
Assicurati che gli utenti sappiano cosa compilare
Fai in modo che la tua forma di pagamento sia il più semplice possibile che mostrano solo i campi obbligatori.
Indica l'importo del pagamento. Il pulsante Invia è ideale per farlo.
<button>Pay $300.00</button>
Usa parole autoesplicative per gli elementi <label>.
Ad esempio, utilizza "Codice di sicurezza",
anziché l'acronimo "CVV", usato solo da alcuni brand.
Aiuta gli utenti a inserire i propri dati di pagamento
Per massimizzare le conversioni, assicurati che gli utenti possano compilare il modulo di pagamento il più rapidamente possibile.
Usa inputmode="numeric" per i campi del numero di carta e del codice di sicurezza
per mostrare una tastiera sullo schermo ottimizzata per l'inserimento dei numeri.
Aggiungi valori autocomplete appropriati per i controlli dei moduli di pagamento per assicurarti che i browser offrano la compilazione automatica.
Usa autocomplete="cc-name" per il nome,
autocomplete="cc-number" per il numero della carta e autocomplete="cc-exp" per la data di scadenza.
Assicurati che gli utenti inseriscano i dati nel formato corretto
Utilizza l'attributo required per ogni <input> per assicurarti che gli utenti compilino il modulo completo.
I codici di sicurezza delle carte di pagamento possono essere di tre o quattro cifre.
Usa minlength="3" e maxlength="4" per consentire solo tre e quattro cifre.
Assicurati che gli utenti inseriscano solo numeri per il numero della carta e il codice di sicurezza.
Utilizza pattern="[0-9 ]+" per consentire agli utenti di includere spazi quando inseriscono il numero di una carta.
perché è così che vengono visualizzati
sulle carte fisiche.