Codelab sui moduli di pagamento

Sam Dutton

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

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

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

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.

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

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:

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

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.

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.

Nota: non preoccuparti. Il tuo browser potrebbe riuscire a compilare automaticamente il modulo con i dati della carta di pagamento memorizzati, ma non sarà possibile effettuare pagamenti e i dati non verranno trasferiti o salvati.

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.

Nota: le ricerche dimostrano che potrebbe essere meglio utilizzare elementi selezionati separati per il mese e l'anno anziché un unico input. La decisione spetta a te. Esegui una verifica remixando e modificando l'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 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.

Attenzione: alcuni siti lasciano disattivati i pulsanti per l'invio del modulo finché l'utente non ha compilato correttamente tutti i campi del modulo. È preferibile non farlo, in quanto gli utenti potrebbero accidentalmente tralasciare un valore obbligatorio o utilizzare un valore non valido, quindi tocca o fai clic sul pulsante di invio disattivato e supponi che il tuo sito non funzioni. Anche se contrassegni i valori del modulo come non validi o mancanti, l'utente potrebbe non vedere gli avvisi, in particolare per i moduli più lunghi e sui dispositivi mobili. È meglio eseguire la convalida in linea durante l'inserimento dei dati e quando l'utente prova a inviare il modulo.

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:

• Prova il modulo su diversi dispositivi. Quali dispositivi e browser stai scegliendo come target? Come potrebbe essere migliorato il modulo?

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.