Google Pay API for Web – Grundlagen

1. Einführung

Aufgaben

Am Ende dieses Codelabs haben Sie eine minimal funktionsfähige Website mit einer funktionierenden Google Pay-Integration. In diesem Projekt wird ein Zahlungstoken abgerufen, das zur Verarbeitung an einen Zahlungsdienstleister gesendet werden kann.

Lerninhalte

  • Google Pay API laden und konfigurieren
  • Google Pay-Schaltfläche anzeigen und Klicks verarbeiten
  • Zahlungstoken von Google Pay anfordern

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

In Firebase Studio öffnen

2. HTML-Seite erstellen

Projektdateien erstellen

  1. Erstellen Sie auf Ihrem Computer einen Ordner mit dem Namen gpay-web-101 und darin zwei leere Textdateien mit den Namen index.html und main.js.Ihre Verzeichnisstruktur sollte so aussehen:
    gpay-web-101/
  index.html
  main.js
  2. Öffnen Sie index.html in Ihrer bevorzugten IDE und fügen Sie den folgenden Code hinzu:
    <!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Google Pay API for Web 101</title>
</head>

<body>
  <div id="gpay-container"></div>
  <p>Transaction info and errors will be logged to the console.</p>
  <script type="text/javascript" src="main.js"></script>
  <script
    async src="https://pay.google.com/gp/p/js/pay.js"
    onload="onGooglePayLoaded()">
  </script>
</body>

</html>

Codeerklärung

  1. Der Seite wird ein leeres DIV mit der ID gpay-container hinzugefügt. Dieses DOM-Element ist das übergeordnete Element, dem die Google Pay-Schaltfläche hinzugefügt wird. Sie können dieses Element an einer geeigneten Stelle im Layout Ihrer Website platzieren.
  2. Das main.js-Script-Tag wird im DOM nach dem gpay-container-Element platziert. Das ist erforderlich, damit das Container-DIV im DOM vorhanden ist, bevor main.js danach sucht. Außerdem ist das Skript synchron, damit es vor dem Laden von pay.js geladen wird, da die onGooglePayLoaded()-Methode vor dem Abschluss des Ladevorgangs vorhanden sein muss. Es gibt auch andere Möglichkeiten, denselben Effekt zu erzielen, die hier jedoch nicht behandelt werden.
  3. Schließlich wird pay.js asynchron geladen und onGooglePayLoaded() als onload-Handler konfiguriert. Diese Methode wird in main.js definiert.

3. Google Pay konfigurieren

Für eine Google Pay-Zahlungsanfrage ist ein Anfrageobjekt erforderlich. Das hier als baseGooglePayRequest definierte Objekt enthält die minimalen gemeinsamen Einstellungen für alle Anfragen. Je nach Anfrage werden zusätzliche Einstellungen hinzugefügt, die wir in diesem Codelab näher betrachten.

Fügen Sie der leeren Datei main.js die Google Pay-Konfigurationskonstanten hinzu:

//=============================================================================
// Configuration
//=============================================================================

// The DOM element that the Google Pay button will be rendered into
const GPAY_BUTTON_CONTAINER_ID = 'gpay-container';

// Update the `merchantId` and `merchantName` properties with your own values.
// Your real info is required when the environment is `PRODUCTION`.
const merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

// This is the base configuration for all Google Pay payment data requests.
const baseGooglePayRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: [
          "PAN_ONLY", "CRYPTOGRAM_3DS"
        ],
        allowedCardNetworks: [
          "AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"
        ]
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ],
  merchantInfo
};

// Prevent accidental edits to the base configuration. Mutations will be
// handled by cloning the config using deepCopy() and modifying the copy.
Object.freeze(baseGooglePayRequest);

Codeerklärung

  1. Legen Sie die konstante Variable GPAY_BUTTON_CONTAINER_ID auf die ID des DOM-Elements fest, das auf der HTML-Seite als übergeordneter Container für die Google Pay-Schaltfläche verwendet wird.
  2. Erstellen Sie das Konfigurationsobjekt baseGooglePayRequest mit den relevanten Einstellungen für Ihre Anwendung. Die einzelnen Eigenschaften und Werte finden Sie in der Referenzdokumentation. Die in diesem Beispiel gezeigten Werte entsprechen möglicherweise nicht genau Ihren Anforderungen. Prüfen Sie sie daher sorgfältig.
  3. Aktualisieren Sie die Properties merchantId und merchantName mit Ihren eigenen Werten. Diese Felder sind optional, wenn die Umgebung TEST ist.

Ressourcen

4. Zahlungsclient hinzufügen

Ein Zahlungsclient wird verwendet, um Zahlungsanfragen zu stellen und Rückrufe zu registrieren. In diesem Codelab werden nur Zahlungsanfragen gestellt. Außerdem können Sie PaymentDataCallbacks so konfigurieren, dass Änderungen an Zahlungsdaten oder Autorisierungen berücksichtigt werden. Diese weiterführenden Themen werden in diesem Codelab jedoch nicht behandelt.

Fügen Sie diesen Clientcode am Ende von main.js ein:

//=============================================================================
// Google Payments client singleton
//=============================================================================

let paymentsClient = null;

function getGooglePaymentsClient() {
  if (paymentsClient === null) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: 'TEST',
      merchantInfo,
      // todo: paymentDataCallbacks (codelab pay-web-201)
    });
  }

  return paymentsClient;
}

Codeerklärung

  1. Die paymentsClient-Variable enthält die Instanz für den Client, sobald sie erstellt wurde. Auf die Variable wird nicht direkt über unseren Code zugegriffen, sondern immer über die Methode getGooglePaymentsClient().
  2. Die Methode getGooglePaymentsClient() prüft, ob ein Client bereits instanziiert wurde, und gibt diese Instanz zurück. Wenn noch keine Instanz erstellt wurde, wird eine erstellt, gespeichert und zurückgegeben. Mit dieser Methode wird dafür gesorgt, dass während der gesamten Lebensdauer dieses Skripts nur eine Instanz erstellt und verwendet wird.
  3. Zum Instanziieren eines Clients wird die Methode PaymentsClient() aufgerufen. In diesem Beispiel teilen wir dem Client mit, dass wir uns in einer TEST-Umgebung befinden. Die Alternative ist PRODUCTION. TEST ist jedoch der Standardwert und kann weggelassen werden.

5. Helfer hinzufügen

Die folgenden Hilfsfunktionen werden später im Skript verwendet und wurden nur hinzugefügt, um die Lesbarkeit und Wartbarkeit des Codes zu verbessern.

Hängen Sie die Hilfsfunktionen an das Ende von main.js an:

//=============================================================================
// Helpers
//=============================================================================

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    onClick: onGooglePaymentButtonClicked
  });

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

Codeerklärung

  1. deepCopy() ist ein Dienstprogramm, mit dem mithilfe der JSON-Serialisierung und ‑Deserialisierung eine vollständige Kopie des bereitgestellten Objekts erstellt wird. So können Sie Objekte ganz einfach klonen, ohne sich um gemeinsame Referenzen kümmern zu müssen.
  2. renderGooglePayButton() ist ein Dienstprogramm, mit dem die Bibliotheksmethode createButton() aufgerufen wird, um die Google Pay-Schaltfläche zu präsentieren. Das übergebene Argument ist eine Reihe von Optionen, die das Verhalten der Schaltfläche definieren, z. B. die Registrierung der Funktion onGooglePaymentButtonClicked() zur Verarbeitung von Schaltflächenklicks.

6. Event-Handler hinzufügen

In diesem Skript konfigurieren wir zwei Event-Handler. Die erste wird aufgerufen, wenn die pay.js-Bibliothek geladen wurde, und die zweite, wenn auf die Google Pay-Schaltfläche geklickt wird.

Hängen Sie die Event-Handler an das Ende von main.js an:

//=============================================================================
// Event Handlers
//=============================================================================

function onGooglePayLoaded() {
  const req = deepCopy(baseGooglePayRequest);

  getGooglePaymentsClient()
    .isReadyToPay(req)
    .then(function(res) {
      if (res.result) {
        renderGooglePayButton();
      } else {
        console.log("Google Pay is not ready for this user.");
      }
    })
    .catch(console.error);
}

function onGooglePaymentButtonClicked() {
  // Create a new request data object for this request
  const req = {
    ...deepCopy(baseGooglePayRequest),
    transactionInfo: {
      countryCode: 'US',
      currencyCode: 'USD',
      totalPriceStatus: 'FINAL',
      totalPrice: (Math.random() * 999 + 1).toFixed(2),
    },
    // todo: callbackIntents (codelab gpay-web-201)
  };

  // Write request object to console for debugging
  console.log(req);

  getGooglePaymentsClient()
    .loadPaymentData(req)
    .then(function (res) {
      // Write response object to console for debugging
      console.log(res);
      // @todo pass payment token to your gateway to process payment
      // @note DO NOT save the payment credentials for future transactions
      paymentToken = res.paymentMethodData.tokenizationData.token;
    })
    .catch(console.error);
}

Codeerklärung

  1. onGooglePayLoaded() wird aufgerufen, wenn das Laden des pay.js-Scripts abgeschlossen ist, wie in der HTML-Datei definiert. Die isReadyToPay()-Methode wird aufgerufen, um zu ermitteln, ob die Google Pay-Schaltfläche angezeigt werden soll. Wenn der Kunde bereit ist zu bezahlen (d. h. er hat eine Zahlungsart zu seinem Google Wallet hinzugefügt), wird die Google Pay-Schaltfläche gerendert.
  2. onGooglePaymentButtonClicked() wird aufgerufen, wenn auf den Google Pay-Button geklickt wird. Mit dieser Methode wird die Bibliotheksmethode loadPaymentData() aufgerufen, mit der ein Zahlungstoken abgerufen wird. Sobald Sie das Zahlungstoken haben, senden Sie es zur Verarbeitung der Transaktion an Ihr Zahlungs-Gateway. transactionInfo beschreibt die Transaktion, die mit diesem Klick auf die Schaltfläche verarbeitet werden soll.

7. Fazit

Sie haben dieses Codelab abgeschlossen. Sie haben gelernt, wie Sie die Google Pay API in eine Website einbinden.

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

Zusätzliche Ressourcen