Codelab sui moduli di pagamento

Sam Dutton

Questo codelab ti mostra come creare una forma di pagamento sicura, 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 consentono la funzionalità integrata del browser, migliorano l'accessibilità e dai un significato al tuo markup.

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

Dai un'occhiata al 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, il nome, la data di scadenza e il codice di sicurezza della carta. Sono tutte sono aggregati in <section> elementi e ognuno ha un'etichetta. Il pulsante Completa pagamento è una struttura 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 della forma di pagamento.

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

Fai clic su Visualizza 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, in particolare sui dispositivi mobili. Non sembra neanche molto bello.

Devi assicurarti che i moduli funzionino bene su una serie di dispositivi regolando spaziatura interna, margini dimensioni dei caratteri.

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

Molto 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 vedere il modulo con gli stili applicati. Noterai anche che i bordi sono modificato e display: block; viene utilizzato per le etichette, in modo che vengano posizionati su una riga autonomamente. possono essere a larghezza intera. Best practice per i moduli di accesso spiega in modo più dettagliato i vantaggi di questo approccio.

Il selettore :invalid viene utilizzato per indicare quando un input ha un valore non valido. (Utilizzerai questo più avanti nel codelab).

Il CSS è incentrato sui dispositivi mobili:

  • Il CSS predefinito è per aree visibili di larghezza inferiore a 400px.
  • Le query supporti sono utilizzata per eseguire l'override dell'impostazione predefinita per le aree visibili con larghezza minima di 400px e poi di nuovo per aree visibili con larghezze pari ad almeno 500px. Dovrebbe funzionare bene su smartphone e dispositivi mobili di piccole dimensioni con schermi più grandi e su computer.

Ogni volta che crei per il web, devi eseguire test su diversi dispositivi e dimensioni dell'area visibile. vale a dire soprattutto per i moduli, perché un solo piccolo problema può renderli inutilizzabili. Devi sempre regolare Punti di interruzione CSS per assicurarsi che funzionino bene con le tue contenuti e i dispositivi target.

  • È visibile l'intero modulo?
  • 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 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 consentire agli utenti di inserire i dati

Consente al browser di archiviare e compilare i valori di input della compilazione automatica e di fornire l'accesso ai sistemi sicuri integrati funzionalità di pagamento e convalida.

Aggiungi attributi al modulo nel tuo 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. In base al dispositivo e potresti vedere un selettore che mostra i metodi di pagamento memorizzati per il browser, come quello mostrato di seguito.

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

Dopo aver selezionato un metodo di pagamento e aver inserito il codice di sicurezza, il browser compila automaticamente il modulo utilizzando I valori della carta di pagamento autocomplete 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 che viene visualizzata una tastiera numerica non appena tocchi il Numero carta. Il motivo è che hai usato inputmode="numeric". Per i campi numerici, questo rende semplifica l'inserimento dei numeri e l'impossibilità di inserire caratteri non numerici e incoraggia gli utenti a ricordare il tipo di dati che inseriscono.

È estremamente importante aggiungere correttamente tutti i valori autocomplete disponibili alle forme di pagamento. È è abbastanza comune che i siti non superino il valore autocomplete per la data di scadenza della carta e altre campi. Se un singolo valore autofill non è corretto o manca, gli utenti dovranno recuperare il valore effettivo per inserire manualmente i dati della carta, rischiando di perdere una vendita. Se la compilazione automatica dei moduli di pagamento non funziona correttamente, gli utenti possono anche decidere di tenere traccia dei dettagli delle carte di pagamento sul proprio smartphone o un computer, una soluzione molto insicuro.

Prova a inviare il modulo di pagamento con un campo vuoto. Nel browser manca il completamento della richiesta e i dati di Google Cloud. Ora aggiungi una lettera al valore nel campo Numero carta e prova a inviare il modulo. La 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 di autocomplete e a compilare il modulo di pagamento. Quali difficoltà riscontri che hai incontrato?
  • Prova le forme di pagamento sui negozi online. Rifletti su cosa funziona e cosa non va. Ci sono problemi comuni o best practice che dovresti seguire?

Passaggio 4: disattiva il pulsante di pagamento una volta inviato il modulo

Valuta la possibilità di disattivare il pulsante Invia dopo che l'utente lo ha toccato o fatto clic, soprattutto quando l'utente sta effettuando il pagamento. Molti utenti toccano o fanno clic ripetutamente sui pulsanti. anche se funzionano bene. 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 scopri cosa succede.

Ecco come dovrebbe apparire 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 asset personalizzati e la convalida, accedendo all'interfaccia utente integrata del browser per impostare lo stato attivo e visualizzare i prompt. 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 reali monitoreresti per capire come migliorare i moduli?

Il modulo di pagamento completo dovrebbe avere il seguente aspetto:

Andamento successivo

Considera le seguenti funzionalità dei moduli fondamentali che non sono trattate in questo codelab:

  • Link ai tuoi Termini di servizio e ai documenti delle norme sulla privacy: chiarisci agli utenti in che modo per salvaguardare i propri dati.

  • Stile e branding: assicurati che corrispondano al resto del tuo sito. Quando si inseriscono nomi e indirizzi e effettuando il pagamento, gli utenti devono sentirsi a proprio agio, confidando di essere ancora nel posto giusto.

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