Google Pay API for Web 201: Advanced (Erweitert)

1. Einführung

Dieses Codelab ist eine Fortsetzung von Google Pay API for Web 101: Basics und basiert auf dem dort geschriebenen Code. Bevor Sie dieses Codelab durcharbeiten, sollten Sie das andere Codelab durcharbeiten.

Lerninhalte

Google Pay-Schaltfläche anpassen
Zahlungsvorgang starten
Zahlungsautorisierungsstatus bestätigen
Änderungen der Versandadresse bearbeiten
Gutscheincodes verwalten

Voraussetzungen

Ein Texteditor Ihrer Wahl zum Bearbeiten von HTML- und JavaScript-Dateien.
Der Webbrowser Google Chrome oder eine andere Möglichkeit zum Testen einer lokalen Website.
Für die Produktion benötigen Sie ein Google Pay-merchantId. Die Registrierung in der Google Pay & Wallet Console dauert nur eine Minute. Sie können sie also gleich erledigen.

Mit Firebase Studio nachvollziehen

2. Schaltflächen anpassen

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

Option	Notwendigkeit	Werte
onClick	Erforderlich	Name des JavaScript-Ereignishandlers
allowedPaymentMethods	Optional	`PaymentMethod[]`
buttonColor	Optional	Standard, Schwarz, Weiß
buttonLocale	Optional	Zweistelliger ISO 639-1-Code. Unterstützte Gebietsschemas sind 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 und zh.
buttonRadius	Optional	0 bis 100
buttonRootNode	Optional	HTMLDocument oder ShadowRoot
buttonSizeMode	Optional	statisch, füllen
buttonType	Optional	buchen, kaufen, bezahlen, spenden, bestellen, bezahlen, schlicht, abonnieren

Suchen Sie in Ihrer 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);
}

Codeerklärung

Die Bibliotheksmethode createButton() verwendet ein Konfigurationsargument ButtonOptions, mit dem Sie festlegen können, wie die Schaltfläche aussehen und sich verhalten soll.

3. Callbacks für Zahlungsdaten

Der Zahlungsclient bietet einen Mechanismus, mit dem Sie Funktionen registrieren können, die ausgeführt werden, wenn bestimmte Ereignisse eintreten. Die erste ist die Zahlungsautorisierung und die zweite die Änderung der Zahlungsdaten.

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

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

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
}

Suchen Sie schließlich in main.js nach dem Kommentar // todo: callbackIntents und ersetzen Sie ihn 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.'
    },
  ],
},

Codeerklärung

Die Property PaymentDataCallbacks hat zwei untergeordnete Properties: eine für einen Rückruf zur Zahlungsautorisierung und eine für einen Rückruf zur Änderung von Zahlungsdaten.
Wenn Sie Callbacks implementieren, ist onPaymentAuthorized erforderlich. Dieser Callback wird aufgerufen, wenn die Liste callbackIntents PAYMENT_AUTHORIZATION im PaymentDataRequest enthält.
onPaymentDataChanged ist optional. Dieser Callback wird aufgerufen, wenn die Liste callbackIntents die Werte OFFER, SHIPPING_ADDRESS oder SHIPPING_OPTION im PaymentDataRequest enthält.
Legen Sie callbackIntents im PaymentDataRequest fest, um beide Callbacks für dieses Codelab auszulösen.

4. Zahlungsautorisierung

Mit „Authorize Payments“ wird der Zahlungsvorgang gestartet und der Status der Zahlungsautorisierung bestätigt.

Suchen Sie in main.js nach der Funktion onPaymentAuthorized(), 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);
  });
}

Codeerklärung

Die onPaymentAuthorized()-Callback-Funktion wird mit einem PaymentData-Argument aufgerufen und muss ein Promise zurückgeben. In diesem Beispiel wird zufällig ausgewählt, ob die Funktion „Erfolg“ oder einen Fehler zurückgibt. In Ihrem Projekt können Sie die Transaktion mit Ihrem Gateway mithilfe des Tokens verarbeiten, das in paymentData unter paymentData.paymentMethodData.tokenizationData.token gefunden wurde.

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 Funktion onPaymentDataChanged(), 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);
  });
}

Codeerklärung

Die Funktion onPaymentDataChanged() verwendet IntermediatePaymentData als Argument. Diese Funktion wird aufgerufen, wenn die Versandadresse oder die Versandoptionen im Zahlungsblatt geändert werden.
Die Funktion onPaymentDataChanged() muss ein Promise zurückgeben, das ein PaymentDataRequestUpdate-Objekt auflöst, in dem neue Transaktionsinformationen, Versandoptionen und Fehler zum Aktualisieren des Zahlungsblatts angegeben sind.
redemptionCodes sind eine Reihe von Gutscheincodes, die in das Zahlungsformular eingegeben werden. Enthält bereits genehmigte Codes.

6. Fazit

Sie haben dieses Codelab abgeschlossen. Sie haben Folgendes gelernt:

Projekt ausführen

Mit Google Chrome testen

Öffnen Sie index.html im Webbrowser Google Chrome über das Hauptmenü von Chrome mit Datei > Datei öffnen…. Chrome führt main.js aus, wenn das Projekt auf diese Weise geöffnet wird. In anderen Webbrowsern ist die Ausführung von JavaScript möglicherweise nicht zulässig.

– oder –

Mit einem lokalen Webserver testen

Wenn Sie Python installiert haben, führen Sie python3 -m http.server über eine Terminalaufforderung im Stammordner 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 ansehen

Zusätzliche Ressourcen

Tauschen Sie sich auf Discord im Kanal#payments aus.
@GooglePayDevs auf X folgen
Videos zu Google Pay auf YouTube ansehen