Codelab sui moduli di pagamento

Sam Dutton

Per seguire questo codelab, apri questo Glitch in una seconda scheda.

Questo codelab ti mostra come creare una forma di pagamento sicura, accessibile e facile da usare.

Attenzione : questo articolo riguarda le best practice relative al frontend per i moduli di pagamento. Non spiega come implementare le transazioni sul tuo sito. Per scoprire di più sull'aggiunta della funzionalità di pagamento al tuo sito web, consulta l'articolo sui pagamenti web.

Passaggio 1: utilizza il codice HTML come previsto

Utilizza 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 <button> in formato HTML. Più avanti in questo codelab scoprirai le funzionalità del browser a cui puoi accedere utilizzando questi elementi.

Nota: gli elementi <input> non hanno tag di chiusura. Questo perché sono elementi void (vuoti), ovvero non hanno contenuti di per sé. Un carattere "/" alla fine di un elemento vuoto è facoltativo: <input> o <input /> sono accettabili.

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 usare, soprattutto sui 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 sono stati 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 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 il valore predefinito per le aree visibili di almeno 400px pixel di larghezza e poi di nuovo per le aree visibili di almeno 500px pixel di larghezza. Dovrebbe funzionare bene sugli smartphone più piccoli, sui dispositivi mobili con schermi più grandi e sui computer.

Ogni volta che sviluppi per il web, devi eseguire test su dispositivi e dimensioni dell'area visibile diversi. Questo è particolarmente importante per i moduli, perché un solo piccolo problema 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 delle 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:

• Utilizza la modalità Dispositivo di Chrome DevTools per simulare i dispositivi mobili.
• Invia l'URL dal computer allo smartphone.
• Utilizza un servizio come BrowserStack per eseguire test su una serie di dispositivi e browser.

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 sicure.

Aggiungi gli attributi al modulo nel file index.html in modo che abbia il seguente aspetto:

<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 nel 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.

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.

Nota: non preoccuparti. Il browser potrebbe essere in grado di compilare automaticamente il modulo con i dati della carta di pagamento memorizzati, ma non è possibile effettuare pagamenti e nessun dato viene trasferito o salvato.

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 alle forme 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 propria 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 possono anche decidere di conservare una registrazione dei dettagli della carta di pagamento sul proprio telefono o computer, il che è altamente insicuro.

Nota: gli studi dimostrano che potrebbe essere meglio utilizzare elementi di selezione separati per mese e anno anziché un singolo input. Sta a te decidere quale ritieni migliore. Prova questa funzionalità remixando e modificando il codice HTML della nostra demo completa del modulo di pagamento, che include il codice per entrambi i tipi di campo della data di scadenza.

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 funziona 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 i moduli 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 una volta inviato il 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.

Attenzione: alcuni siti lasciano disattivati i pulsanti di invio del modulo finché l'utente non ha compilato correttamente tutti i campi del modulo. È meglio non farlo, poiché gli utenti potrebbero omettere accidentalmente un valore obbligatorio o utilizzare un valore non valido, quindi toccare o fare clic sul pulsante Invia disattivato e presumere che il tuo sito sia rotto. Anche se contrassegni i valori del modulo come non validi o mancanti, l'utente potrebbe non vedere gli avvisi (soprattutto per i moduli più lunghi e sui dispositivi mobili). È preferibile eseguire la convalida in linea mentre l'utente inserisce i dati e quando tenta di inviare il modulo.

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 un 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:

• Prova il modulo su dispositivi diversi. Quali dispositivi e browser scegli come target? Come si può migliorare il modulo?

Andamento successivo

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 corrispondano al resto del tuo sito. Quando inseriscono nomi e indirizzi ed effettuano il pagamento, gli utenti devono sentirsi a proprio agio, con la certezza di essere 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.