API Google Pay per il web 201: avanzata

1. Introduzione

Questo codelab è la continuazione di API Google Pay per il web 101: nozioni di base e si basa sul codice scritto in quel codelab. Per completare questo codelab, assicurati di completare prima quello.

Obiettivi didattici

Come personalizzare il pulsante Google Pay
Come avviare la procedura di pagamento
Come confermare lo stato di autorizzazione del pagamento
Come gestire le modifiche all'indirizzo di spedizione
Come gestire i codici di utilizzo

Che cosa ti serve

Un editor di testo a tua scelta per modificare i file HTML e JavaScript.
Il browser web Google Chrome o un altro modo per testare un sito web locale.
Per la produzione, avrai bisogno di un merchantId Google Pay. La registrazione alla console di Google Pay e Wallet richiede solo un minuto, quindi tanto vale occuparsene subito.

Segui le istruzioni utilizzando Firebase Studio

2. Personalizzazione dei pulsanti

Ecco una breve panoramica del ButtonOptions. Per una spiegazione più dettagliata, consulta la documentazione.

Opzione	Necessità	Valori
onclick	Obbligatorio	Nome del gestore eventi JavaScript
allowedPaymentMethods	Facoltativo	`PaymentMethod[]`
buttonColor	Facoltativo	predefinito, nero, bianco
buttonLocale	Facoltativo	Codice ISO 639-1 di due lettere. Le impostazioni internazionali supportate includono en, ar, bg, ca, cs, da, de, el, es, et, fi, fr, hr, id, it, ja, ko, ms, nl, no, pl, pt, ru, sk, sl, sr, sv, th, tr, uk e zh.
buttonRadius	Facoltativo	Da 0 a 100
buttonRootNode	Facoltativo	HTMLDocument o ShadowRoot
buttonSizeMode	Facoltativo	statico, riempimento
buttonType	Facoltativo	book, buy, checkout, donate, order, pay, plain, subscribe

Cerca il metodo renderGooglePayButton() nel file main.js e sostituiscilo con il codice elencato qui.

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

Spiegazione del codice

Il metodo della libreria createButton() accetta un argomento di configurazione ButtonOptions che ti consente di definire l'aspetto e il comportamento del pulsante.

3. Callback dei dati di pagamento

Il client pagamenti fornisce un meccanismo per registrare le funzioni da gestire quando si verificano determinati eventi. Il primo è l'autorizzazione al pagamento e il secondo è la modifica dei dati di pagamento.

Trova il commento // todo: paymentDataCallbacks in main.js e sostituiscilo con questo codice.

paymentDataCallbacks: {
  onPaymentAuthorized: onPaymentAuthorized,
  onPaymentDataChanged: onPaymentDataChanged
},

Quindi, trova la sezione Event Handlers di main.js e aggiungi il seguente codice alla fine della sezione.

function onPaymentAuthorized(paymentData) {
  // We'll fill this in later
}

function onPaymentDataChanged(intermediatePaymentData) {
  // We'll fill this in later
}

Infine, trova il commento // todo: callbackIntents all'interno di main.js e sostituiscilo con questo codice. In questo codelab, implementeremo tutti e quattro gli intent.

callbackIntents: [
  'PAYMENT_AUTHORIZATION',
  'SHIPPING_ADDRESS',
  'SHIPPING_OPTION',
  'OFFER',
],
shippingAddressRequired: true,
shippingOptionRequired: true,
shippingOptionParameters: {
  defaultSelectedOptionId: 'shipping-001',
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$0.00: Free shipping',
      description: 'Free Shipping delivered in 5 business days.'
    },
    {
      id: 'shipping-002',
      label: '$1.99: Standard shipping',
      description: 'Standard shipping delivered in 3 business days.'
    },
    {
      id: 'shipping-003',
      label: '$1000: Express shipping',
      description: 'Express shipping delivered in 1 business day.'
    },
  ],
},

Spiegazione del codice

La proprietà PaymentDataCallbacks ha due proprietà secondarie: una per un callback di autorizzazione di pagamento e la seconda per un callback di modifica dei dati di pagamento.
Se implementi i callback, onPaymentAuthorized è obbligatorio. Questo callback viene richiamato quando l'elenco callbackIntents contiene PAYMENT_AUTHORIZATION in PaymentDataRequest.
onPaymentDataChanged è facoltativo. Questo callback viene richiamato quando l'elenco callbackIntents contiene OFFER, SHIPPING_ADDRESS o SHIPPING_OPTION in PaymentDataRequest.
Imposta callbackIntents in PaymentDataRequest per attivare entrambi i callback per questo codelab.

4. Autorizzazione del pagamento

Authorize Payments viene utilizzato per avviare la procedura di pagamento e confermare lo stato di autorizzazione del pagamento.

Trova la funzione onPaymentAuthorized() in main.js che hai aggiunto nell'ultimo passaggio e sostituiscila con il seguente codice.

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

Spiegazione del codice

La funzione di callback onPaymentAuthorized() viene richiamata con un argomento PaymentData e deve restituire una promessa. In questo esempio, la funzione sceglie in modo casuale se restituire un esito positivo o un errore. Nel tuo progetto, utilizzerai questa opportunità per elaborare la transazione con il tuo gateway utilizzando il token trovato in paymentData alle ore paymentData.paymentMethodData.tokenizationData.token.

5. Modifica dei dati di pagamento

Gli aggiornamenti dinamici dei prezzi consentono a un commerciante di aggiornare dinamicamente le opzioni di spedizione e le informazioni sulle transazioni in base a un indirizzo di spedizione scelto. Inoltre, puoi aggiornare dinamicamente le informazioni sulle transazioni in base a un'opzione di spedizione scelta.

Trova la funzione onPaymentDataChanged() in main.js che hai aggiunto nell'ultimo passaggio e sostituiscila con il seguente codice.

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

Spiegazione del codice

La funzione onPaymentDataChanged() accetta IntermediatePaymentData come argomento. Questa funzione viene richiamata quando l'indirizzo di spedizione o le opzioni di spedizione vengono modificati nel foglio di pagamento.
La funzione onPaymentDataChanged() deve restituire una promessa che risolve un oggetto PaymentDataRequestUpdate che specifica nuove informazioni sulla transazione, opzioni di spedizione ed errore per aggiornare il foglio di pagamento.
redemptionCodes è un insieme di codici promozionali inseriti nel foglio di pagamento. Sono inclusi i codici già approvati.

6. Conclusione

Congratulazioni per aver completato questo codelab. Hai imparato a…

Esegui il progetto

Testare con Google Chrome

Utilizzando il browser web Google Chrome, apri index.html utilizzando File > Apri file… dal menu principale di Chrome. Chrome eseguirà main.js quando il progetto viene aperto in questo modo. Altri browser web potrebbero non consentire l'esecuzione di JavaScript.

– o –

Test con un server web locale

Se hai installato Python, esegui python3 -m http.server da un prompt del terminale nella cartella principale pay-web-101.

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

Poi, visita il tuo sito all'indirizzo http://localhost:8000.

Come procedere

Rivedi l'elenco di controllo dell'integrazione

Risorse aggiuntive

Partecipa alla conversazione nel canale#payments su Discord
Segui @GooglePayDevs su X
Guarda i video correlati a Google Pay su YouTube