Codelab sui moduli di pagamento

Sam Dutton

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

Passaggio 1: utilizza il codice HTML come previsto

Utilizza gli elementi creati per il job:

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

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

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

Dai un'occhiata al codice HTML del tuo 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>

Esistono elementi <input> per il numero della carta, il nome sulla carta, la data di scadenza e il codice di sicurezza. Sono tutti inseriti in elementi <section> e ognuno ha un'etichetta. Il pulsante Completa pagamento è un elemento HTML<button>. Più avanti in questo codelab scoprirai le funzionalità del browser a cui puoi accedere utilizzando 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 migliorare il funzionamento?
  • E sui dispositivi mobili?

Fai clic su Visualizza codice sorgente per tornare al codice sorgente.

Passaggio 2: progetta per dispositivi mobili e computer

Il codice HTML che hai aggiunto è valido, ma lo stile del browser predefinito rende il modulo difficile da utilizzare, soprattutto su dispositivi mobili. Non sembra nemmeno troppo bello.

Devi assicurarti che i tuoi moduli funzionino bene su una serie di dispositivi regolando spaziature interne, margini e dimensioni dei caratteri.

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

Sono davvero 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 per dimensioni dell'area visibile diverse.

Quando è tutto pronto, fai clic su Visualizza app per visualizzare il modulo con stile. Noterai inoltre che i bordi sono stati aggiustati e che display: block; viene utilizzato per le etichette in modo che vengano visualizzate su una riga autonoma e gli input possano essere di larghezza intera. Le best practice per i moduli di accesso illustrano più dettagliatamente i vantaggi di questo approccio.

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

Il CSS è ottimizzato per il mobile:

  • Il CSS predefinito è destinato alle aree visibili di larghezza inferiore a 400px.
  • Le query supporti vengono utilizzate per sostituire i valori predefiniti per le aree visibili di almeno 400px pixel di larghezza e poi di nuovo per le aree visibili di almeno 500px pixel di larghezza. Questo dovrebbe funzionare bene per smartphone più piccoli, dispositivi mobili con schermi più grandi e computer.

Ogni volta che sviluppi per il web, devi eseguire test su dispositivi e dimensioni dell'area visibile diversi. Questo vale soprattutto per i moduli, perché un piccolo errore può renderli inutilizzabili. Devi sempre modificare le interruzioni CSS per assicurarti che funzionino bene con i tuoi contenuti e i tuoi dispositivi di destinazione.

  • L'intero modulo è visibile?
  • Gli input del modulo sono abbastanza grandi?
  • Tutto il testo è leggibile?
  • Hai notato differenze tra l'utilizzo di un vero dispositivo mobile e la visualizzazione del modulo in modalità Dispositivo in Chrome DevTools?
  • Hai dovuto modificare i breakpoint?

Esistono diversi modi per testare il modulo su dispositivi diversi:

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

Consenti al browser di memorizzare e compilare automaticamente i valori inseriti e di fornire accesso a funzionalità di pagamento e convalida integrate e sicure.

Aggiungi gli attributi al modulo nel file index.html in modo che risulti come segue:

<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, quindi tocca o fai clic sul campo Numero carta. A seconda del dispositivo e della piattaforma, potresti visualizzare un selettore che mostra i metodi di pagamento memorizzati per il browser, come quello riportato di seguito.

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

Dopo aver selezionato un metodo di pagamento e inserito il 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 viene visualizzata una tastiera numerica non appena tocchi il campo Numero carta. Il motivo è che hai utilizzato inputmode="numeric". Per i campi numerici, semplifica l'inserimento di numeri e impedisce di inserire caratteri non numerici, nonché incoraggia gli utenti a ricordare il tipo di dati che stanno inserendo.

È estremamente importante aggiungere correttamente tutti i valori autocomplete disponibili ai moduli di pagamento. È abbastanza comune che i siti non includano 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 conservare una registrazione dei dettagli della carta di pagamento sul proprio telefono o computer, il che è altamente insicuro.

Prova a inviare il modulo di pagamento con un campo vuoto. Il browser chiede 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 vale per maxlength e altri vincoli di convalida Non è richiesto JavaScript.

Il modulo di pagamento dovrebbe avere il seguente aspetto:

  • Prova a rimuovere i valori autocomplete e a compilare il modulo di pagamento. Quali difficoltà riscontri?
  • Prova le forme di pagamento nei negozi online. Considera cosa funziona bene e cosa va storto. Esistono problemi comuni o best practice da 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 paga. Molti utenti toccano o fanno clic ripetutamente sui pulsanti, anche se funzionano correttamente. Ciò può causare problemi con l'elaborazione dei pagamenti e aumentare il carico del server.

Aggiungi il seguente codice JavaScript al 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 vedi cosa succede.

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

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

  • Quali dati di analisi e monitoraggio dei real user monitoreresti per identificare i modi per migliorare i tuoi moduli?

Il modulo di pagamento completo dovrebbe avere il seguente aspetto:

Per saperne di più

Considera le seguenti funzionalità fondamentali dei moduli che non sono coperte 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 siano in linea con il resto del sito. Quando inseriscono nomi e indirizzi e effettuano il pagamento, gli utenti devono sentirsi a proprio agio, certi di trovarsi ancora nel posto giusto.

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