API Google Pay per il web 201: avanzata

1. Introduzione

Questo codelab è il seguito 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 promozionali

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 account Google Pay merchantId. La registrazione su Google Pay & Wallet Console richiede solo un minuto, quindi è meglio occuparsene subito.

Segui la procedura utilizzando Project IDX

2. Personalizzazione dei pulsanti

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

Opzione	Necessità	Valori
onclick	Obbligatorio	Nome del gestore degli eventi JavaScript
allowedPaymentMethods	Facoltativo	PaymentMethod[]
buttonColor	Facoltativo	predefinito, nero, bianco
buttonLocale	Facoltativo	Codice ISO 639-1 di due lettere. Le lingue supportate includono: 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	static, fill
buttonType	Facoltativo	prenotare, acquistare, pagare, donare, ordinare, pagare, semplice, abbonarsi

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

1. 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. La prima è l'autorizzazione di pagamento e la seconda è la modifica dei dati di pagamento.

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

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

2. Poi, individua 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
   }
   
   

3. Infine, trova il commento // todo: callbackIntents in 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

1. La proprietà PaymentDataCallbacks ha due proprietà secondarie, una per un callback di autorizzazione del pagamento e la seconda per un callback di modifica dei dati di pagamento.
2. Se implementi i callback, onPaymentAuthorized è obbligatorio. Questo callback viene invocato quando l'elenco callbackIntents contiene PAYMENT_AUTHORIZATION in PaymentDataRequest.
3. onPaymentDataChanged è facoltativo. Questo callback viene invocato quando l'elenco callbackIntents contiene OFFER, SHIPPING_ADDRESS o SHIPPING_OPTION in PaymentDataRequest.
4. 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.

Individua 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

1. 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 all'indirizzo paymentData.paymentMethodData.tokenizationData.token.

5. Modifica dei dati di pagamento

Gli aggiornamenti dei prezzi dinamici 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.

Individua 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);
  });
}

Il callback INITIALIZE può essere attivato più volte durante una singola chiamata a loadPaymentData(), quindi devi assicurarti di poter gestire più chiamate. Ad esempio, quando l'utente cambia account, onPaymentDataChanged() viene chiamato di nuovo con INITIALIZE con i dati del nuovo account.

Spiegazione del codice

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

6. Conclusione

Complimenti per aver completato questo codelab. Hai imparato a:

Esegui il progetto

Eseguire il test 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 –

Eseguire il 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

• Esamina l'elenco di controllo dell'integrazione

Risorse aggiuntive

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