Codelab sui moduli di pagamento

Sam Dutton

Questo codelab ti mostra come creare un modulo di pagamento che sia sicuro, accessibile e facile da usare.

Passaggio 1. Utilizza il codice HTML come previsto

Utilizza elementi creati per il job:

  • <form>
  • <section>
  • <label>
  • <input>, <select> e <textarea>
  • <button>

Come vedrai, questi elementi abilitano le funzionalità integrate del browser, migliorano l'accessibilità e aggiungono significato al markup.

  • Fai clic su Remix per modificare per rendere il progetto modificabile.

Consulta il codice HTML del modulo in index.html.

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Sono presenti <input> elementi per il numero della carta, il nome sulla carta, la data di scadenza e il codice di sicurezza. Sono tutte aggregate negli elementi <section> e ciascuno ha un'etichetta. Il pulsante Completa pagamento è in formato <button> HTML. Più avanti in questo codelab, scoprirai le funzionalità del browser a cui puoi accedere usando questi elementi.

Fai clic su Visualizza app per visualizzare l'anteprima del modulo di pagamento.

  • Il modulo funziona abbastanza bene così com'è?
  • C'è qualcosa che cambieresti per farlo funzionare meglio?
  • E sui dispositivi mobili?

Fai clic su Visualizza sorgente per tornare al codice sorgente.

Passaggio 2: progetta per dispositivi mobili e computer

Il codice HTML aggiunto è valido, ma lo stile predefinito del browser rende il modulo difficile da usare, in particolare sui dispositivi mobili. Neanche troppo bello.

Devi assicurarti che i moduli funzionino correttamente su una serie di dispositivi modificando spaziatura interna, margini e dimensioni del carattere.

Copia tutto il codice CSS riportato di seguito e incollalo nel tuo file css/main.css.

Si tratta di tanti CSS. Gli aspetti principali da tenere presenti sono le modifiche alle dimensioni:

  • padding e margin vengono aggiunti agli input.
  • font-size e altri valori sono diversi a seconda delle dimensioni dell'area visibile.

Quando è tutto pronto, fai clic su Visualizza app per vedere il modulo con lo stile che ti serve. Come potrai notare, i bordi sono stati modificati e display: block; viene utilizzato per le etichette, in modo che vengano inserite da sole su una riga e che gli input possano essere a larghezza intera. Le best practice per i moduli di accesso spiegano i vantaggi di questo approccio in modo più dettagliato.

Il selettore :invalid viene utilizzato per indicare quando un input contiene un valore non valido. Lo userai più avanti nel codelab.

Il CSS è orientato ai dispositivi mobili:

  • Il CSS predefinito è per le aree visibili con larghezza inferiore a 400px.
  • Le query supporti vengono utilizzate per sostituire il valore predefinito per le aree visibili larghe almeno 400px e poi di nuovo per le aree visibili con larghezza minima pari a 500px. Dovrebbe funzionare su telefoni più piccoli, dispositivi mobili con schermi più grandi e computer.

Ogni volta che crei per il web, devi eseguire test su dispositivi e dimensioni dell'area visibile diversi. Ciò è particolarmente vero per i moduli, perché un piccolo glitch può renderli inutilizzabili. Dovresti sempre modificare i punti di interruzione CSS per assicurarti che funzionino correttamente con i tuoi contenuti e i dispositivi di destinazione.

  • È visibile l'intero modulo?
  • Gli input del modulo sono abbastanza grandi?
  • Il testo è leggibile?
  • Hai notato differenze tra l'utilizzo di un dispositivo mobile reale e la visualizzazione del modulo in modalità dispositivo in Chrome DevTools?
  • Hai dovuto regolare i punti di interruzione?

Esistono diversi modi per testare il modulo su dispositivi diversi:

Passaggio 3: aggiungi attributi per aiutare gli utenti a inserire i dati

Consenti al browser di archiviare e compilare automaticamente i valori di input e fornisci l'accesso a funzionalità sicure di pagamento e convalida integrate.

Aggiungi attributi al modulo nel tuo file index.html in modo che risulti come il seguente:

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Visualizza di nuovo l'app, poi tocca o fai clic sul campo Numero carta. A seconda del dispositivo e della piattaforma, potresti vedere un selettore che mostra i metodi di pagamento memorizzati per il browser, come quello mostrato di seguito.

Due screenshot di un modulo di pagamento in Chrome su uno smartphone Android. Uno mostra il selettore di carte di pagamento del browser integrato, l&#39;altro i valori segnaposto compilati automaticamente.
Selettore pagamenti browser integrati e compilazione automatica.

Dopo che hai selezionato un metodo di pagamento e inserito il tuo codice di sicurezza, il browser compila automaticamente il modulo utilizzando i valori autocomplete della carta di pagamento che hai aggiunto al modulo:

  • cc-number
  • cc-name
  • cc-exp
  • cc-csc

Molti browser controllano e confermano anche la validità dei numeri di carte di credito e dei codici di sicurezza.

Su un dispositivo mobile noterai anche che non appena tocchi il campo Numero carta viene visualizzata una tastiera numerica. Il motivo è che hai utilizzato inputmode="numeric". Per quanto riguarda i campi numerici, questo semplifica l'inserimento dei numeri e l'impossibilità di inserire caratteri non numerici, e sollecita gli utenti a ricordare il tipo di dati che inseriscono.

È estremamente importante aggiungere correttamente tutti i valori autocomplete disponibili alle forme di pagamento. È piuttosto comune che i siti perdano il valore autocomplete per la data di scadenza della carta e altri campi. Se un singolo valore autofill è errato o mancante, gli utenti dovranno recuperare la carta effettiva per inserire manualmente i dati della carta e potresti perdere una vendita. Se la compilazione automatica dei moduli di pagamento non funziona correttamente, gli utenti potrebbero anche decidere di tenere traccia dei dati della carta di pagamento sul proprio telefono o computer, il che è altamente non sicuro.

Prova a inviare il modulo di pagamento con un campo vuoto. Il browser richiede di completare i dati mancanti. Ora aggiungi una lettera al valore nel campo Numero carta e prova a inviare il modulo. Il browser avvisa che il valore non è valido. Questo accade perché hai utilizzato l'attributo pattern per specificare valori validi per un campo. Lo stesso funziona per maxlength e altri vincoli di convalida. Non è richiesto JavaScript.

La forma di pagamento dovrebbe avere il seguente aspetto:

  • Prova a rimuovere i valori autocomplete e a compilare il modulo di pagamento. Quali difficoltà riscontri?
  • Prova i moduli di pagamento sui negozi online. Pensa a cosa funziona e cosa va storto. Esistono problemi comuni o best practice che dovresti seguire?

Passaggio 4: disattiva il pulsante di pagamento dopo l'invio del modulo

Ti consigliamo di disattivare un pulsante di invio dopo che l'utente lo ha toccato o fatto clic, in particolare quando effettua il pagamento. Molti utenti toccano o fanno clic sui pulsanti ripetutamente, anche se funzionano correttamente. Ciò può causare problemi con l'elaborazione dei pagamenti e un aumento del carico sul server.

Aggiungi il seguente codice JavaScript al tuo file js/main.js:

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

Prova a inviare il modulo di pagamento e scopri cosa succede.

Ecco come dovrebbe apparire il codice a questo punto, con l'aggiunta di alcuni commenti e una funzione validate():

  • Noterai che JavaScript include il codice commentato per la convalida dei dati. Questo codice utilizza l'API Constraint Validation (ampiamente supportata) per aggiungere una convalida personalizzata, accedendo all'interfaccia utente integrata del browser per impostare lo stato attivo e visualizzare le richieste. Rimuovi il commento dal codice e provalo. Devi impostare i valori appropriati per someregex e message e impostare un valore per someField.

  • Quali dati di analisi e monitoraggio degli utenti monitoreresti per individuare i modi in cui migliorare i moduli?

La forma di pagamento completa ora dovrebbe avere il seguente aspetto:

Ulteriori informazioni

Considera le seguenti caratteristiche fondamentali del modulo che non sono trattate in questo codelab:

  • Link ai documenti dei Termini di servizio e delle norme sulla privacy: spiega agli utenti come proteggi i loro dati.

  • Stile e branding: assicurati che corrispondano al resto del sito. Quando inseriscono nomi e indirizzi ed effettuano un pagamento, gli utenti devono sentirsi a proprio agio e confidano di essere nel posto giusto.

  • Analisi e monitoraggio degli utenti reali: consentono di testare e monitorare le prestazioni e l'usabilità del design del modulo per utenti reali.