Google Pay for Web 201: Advanced

1. Einführung

Dieses Codelab ist eine Fortsetzung von Google Pay API for Web 101: Basics und basiert auf dem Code, der in diesem Codelab geschrieben wurde. Sie müssen dieses Codelab zuerst abschließen, um dieses Codelab abschließen zu können.

Lerninhalte

• Google Pay-Schaltfläche anpassen
• So startest du den Bezahlvorgang
• Zahlungsautorisierungsstatus bestätigen
• Umgang mit Änderungen der Versandadresse
• Einlösungscodes

Voraussetzungen

• Einen Texteditor Ihrer Wahl zum Bearbeiten von HTML- und JavaScript-Dateien.
• den Webbrowser Google Chrome oder eine andere Möglichkeit, eine lokale Website zu testen.
• Für die Produktion benötigen Sie eine Google Pay-merchantId. Die Registrierung in der Google Pay & Wallet Console dauert nur eine Minute. Sie sollten sie also gleich erledigen.

Mit Project IDX Schritt für Schritt

2. Schaltflächen anpassen

Hier finden Sie einen kurzen Überblick über die ButtonOptions. Weitere Informationen finden Sie in der Dokumentation.

Option	Erforderlichkeit	Werte
onClick	Erforderlich	Name des JavaScript-Ereignis-Handlers
allowedPaymentMethods	Optional	PaymentMethod[]
buttonColor	Optional	Standard, Schwarz, Weiß
buttonLocale	Optional	Zweistelliger ISO 639-1-Code. Unterstützte Sprachen: de, en, ar, bg, ca, cs, da, el, es, et, fi, fr, hr, id, it, ja, ko, ms, nl, no, pl, pt, ru, sk, sl, sr, sv, th, tr, uk und zh.
buttonRadius	Optional	0 bis 100
buttonRootNode	Optional	HTMLDocument oder ShadowRoot
buttonSizeMode	Optional	static, fill
buttonType	Optional	buchen, kaufen, bezahlen, bestellen, spenden, schlicht, abonnieren

Suchen Sie in der Datei main.js nach der Methode renderGooglePayButton() und ersetzen Sie sie durch den hier aufgeführten Code.

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

Codeerläuterung

1. Die createButton()-Bibliotheksmethode nimmt ein Konfigurationsargument ButtonOptions an, mit dem Sie festlegen können, wie die Schaltfläche aussehen und funktionieren soll.

3. Callbacks für Zahlungsdaten

Der Zahlungsclient bietet einen Mechanismus, mit dem Sie Funktionen registrieren können, die bei bestimmten Ereignissen ausgeführt werden sollen. Die erste ist die Zahlungsautorisierung und die zweite die Änderung der Zahlungsdaten.

1. Suchen Sie in main.js nach dem Kommentar // todo: paymentDataCallbacks und ersetzen Sie ihn durch diesen Code.

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

2. Suchen Sie dann den Abschnitt Event Handlers von main.js und hängen Sie den folgenden Code an das Ende des Abschnitts an.

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

3. Suchen Sie abschließend den Kommentar zu // todo: callbackIntents in main.js und ersetzen Sie den Kommentar durch diesen Code. In diesem Codelab implementieren wir alle vier Intents.

   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.'
       },
     ],
   },
   

Codeerläuterung

1. Die Property PaymentDataCallbacks hat zwei untergeordnete Properties, eine für einen Rückruf bei Zahlungsautorisierung und eine für einen Rückruf bei Änderung von Zahlungsdaten.
2. Bei der Implementierung von Callbacks ist onPaymentAuthorized erforderlich. Dieser Callback wird aufgerufen, wenn die Liste callbackIntents den Wert PAYMENT_AUTHORIZATION in PaymentDataRequest enthält.
3. onPaymentDataChanged ist optional. Dieser Rückruf wird aufgerufen, wenn die callbackIntents-Liste OFFER, SHIPPING_ADDRESS oder SHIPPING_OPTION im PaymentDataRequest enthält.
4. Legen Sie die callbackIntents im PaymentDataRequest fest, um beide Callbacks für dieses Codelab auszulösen.

4. Zahlungsautorisierung

„Zahlungen autorisieren“ wird verwendet, um den Zahlungsvorgang zu starten und den Status der Zahlungsautorisierung zu bestätigen.

Suchen Sie in main.js nach der onPaymentAuthorized()-Funktion, die Sie im letzten Schritt hinzugefügt haben, und ersetzen Sie sie durch den folgenden Code.

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

Codeerläuterung

1. Die Callback-Funktion onPaymentAuthorized() wird mit dem Argument PaymentData aufgerufen und muss ein Promise zurückgeben. In diesem Beispiel wählt die Funktion zufällig aus, ob ein Erfolg oder ein Fehler zurückgegeben wird. In Ihrem Projekt nutzen Sie diese Gelegenheit, um die Transaktion mit Ihrem Gateway zu verarbeiten, indem Sie das Token verwenden, das Sie unter paymentData an paymentData.paymentMethodData.tokenizationData.token finden.

5. Änderung der Zahlungsdaten

Mit dynamischen Preisaktualisierungen können Händler Versandoptionen und Transaktionsinformationen basierend auf einer ausgewählten Versandadresse dynamisch aktualisieren. Außerdem können Sie Transaktionsinformationen basierend auf einer ausgewählten Versandoption dynamisch aktualisieren.

Suchen Sie in main.js nach der onPaymentDataChanged()-Funktion, die Sie im letzten Schritt hinzugefügt haben, und ersetzen Sie sie durch den folgenden Code.

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

Der INITIALIZE-Callback kann bei einem einzelnen Aufruf von loadPaymentData() mehrmals ausgelöst werden. Du musst also dafür sorgen, dass du mehrere Aufrufe verarbeiten kannst. Wenn der Nutzer beispielsweise das Konto wechselt, wird onPaymentDataChanged() noch einmal mit INITIALIZE und den Daten aus dem neuen Konto aufgerufen.

Codeerläuterung

1. Die Funktion onPaymentDataChanged() nimmt IntermediatePaymentData als Argument an. Diese Funktion wird aufgerufen, wenn die Versandadresse oder die Versandoptionen in der Zahlungstabelle geändert werden.
2. Die onPaymentDataChanged()-Funktion muss ein Versprechen zurückgeben, das ein PaymentDataRequestUpdate-Objekt auflöst, das neue Transaktionsinformationen, Versandoptionen und Fehler angibt, um die Zahlungstabelle zu aktualisieren.
3. redemptionCodes sind Gutscheincodes, die in die Zahlungstabelle eingegeben wurden. Enthält Codes, die bereits genehmigt wurden.

6. Fazit

Herzlichen Glückwunsch zum Abschluss dieses Codelabs. Sie haben gelernt, wie Sie…

Projekt ausführen

Mit Google Chrome testen

Öffnen Sie index.html im Google Chrome-Webbrowser über das Chrome-Hauptmenü unter Datei > Datei öffnen. Chrome führt main.js aus, wenn das Projekt auf diese Weise geöffnet wird. Andere Webbrowser erlauben möglicherweise keine JavaScript-Ausführung.

– oder –

Mit lokalem Webserver testen

Wenn Python installiert ist, führen Sie python3 -m http.server über eine Terminaleingabe im Stammverzeichnis pay-web-101 aus.

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

Rufen Sie dann Ihre Website unter http://localhost:8000 auf.

So geht es weiter

• Checkliste für die Integration prüfen

Zusätzliche Ressourcen

• Treten Sie der Unterhaltung im #payments-Kanal auf Discord bei.
• @GooglePayDevs auf X folgen
• Videos zu Google Pay auf YouTube ansehen