Diese Seite wurde von der Cloud Translation API übersetzt.

Google Pay API for Web – Grundlagen

1. Einführung

Aufgaben

Am Ende dieses Codelabs haben Sie eine 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 bei Google Pay anfordern

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. HTML-Seite erstellen

Projektdateien erstellen

Erstellen Sie auf Ihrem Computer einen Ordner mit dem Namen gpay-web-101 und in diesem Ordner zwei leere Textdateien mit den Namen index.html und main.js.Die Verzeichnisstruktur sollte so aussehen:
```
gpay-web-101/
  index.html
  main.js
```

Ö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>

Codeerläuterung

Der Seite wird ein leeres DIV-Element mit der ID gpay-container hinzugefügt. Dieses DOM-Element ist das übergeordnete Element, in dem die Google Pay-Schaltfläche hinzugefügt wird. Sie können dieses Element an einer geeigneten Stelle im Layout Ihrer Website platzieren.
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 Script synchron, damit es vor dem Laden von pay.js geladen wird, da die onGooglePayLoaded()-Methode vor dem vollständigen Laden vorhanden sein muss. Es gibt noch andere Möglichkeiten, denselben Effekt zu erzielen, die hier aber nicht behandelt werden.
Schließlich wird pay.js asynchron geladen und konfiguriert onGooglePayLoaded() als onload-Handler. 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 Mindesteinstellungen für alle Anfragen. Je nach Anfrage werden zusätzliche Einstellungen hinzugefügt, die wir in diesem Codelab überprüfen.

Fügen Sie der leeren main.js-Datei 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);

Codeerläuterung

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

Ressourcen

Blogpost: Möchten Sie den Bezahlvorgang mit Google Pay noch einfacher gestalten? Konfigurieren Sie Ihre Zahlungsoptionen.
API-Referenz: Dokumentation zu Anfrageobjekten der Google Pay API
API-Referenz: Weitere Informationen zu den zulässigen Autorisierungsmethoden, zulässigen Kartennetzwerken und Tokenisierungsspezifikationen, einschließlich des richtigen Gateway-Werts, finden Sie unter PaymentMethod.

4. Zahlungsclient hinzufügen

Ein Zahlungsclient wird verwendet, um Zahlungsanfragen zu senden und Callbacks zu registrieren. In diesem Codelab senden wir nur Zahlungsanfragen. Außerdem kannst du PaymentDataCallbacks so konfigurieren, dass es reagiert, wenn sich Zahlungsdaten oder die Autorisierung geändert haben. Diese fortgeschrittenen Themen werden in diesem Codelab jedoch nicht behandelt.

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

//=============================================================================
// 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;
}

Codeerläuterung

Die Variable paymentsClient enthält die Instanz für den Client, sobald sie erstellt wurde. Der Code greift nicht direkt auf die Variable zu, sondern immer über die getGooglePaymentsClient()-Methode.
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 sichergestellt, dass nur eine Instanz erstellt und während der gesamten Lebensdauer dieses Scripts verwendet wird.
Um einen Client zu instanziieren, wird die Methode PaymentsClient() aufgerufen. In diesem Beispiel teilen wir dem Kunden 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 Script verwendet und dienen ausschließlich der besseren Lesbarkeit und Wartbarkeit des Codes.

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

Codeerläuterung

deepCopy() ist ein Dienstprogramm, das mithilfe von JSON-Serialisierung und -Deserialisierung eine Deep-Copy des bereitgestellten Objekts erstellt. So können Sie Objekte ganz einfach klonen, ohne sich um freigegebene Verweise kümmern zu müssen.
renderGooglePayButton() ist ein Dienstprogramm, das die Bibliotheksmethode createButton() aufruft, um die Google Pay-Schaltfläche anzuzeigen. Das übergebene Argument ist eine Reihe von Optionen, die festlegen, wie sich die Schaltfläche verhalten soll, z. B. die Registrierung der onGooglePaymentButtonClicked()-Funktion zum Verarbeiten von Schaltflächenklicks.

6. Event-Handler hinzufügen

In diesem Script konfigurieren wir zwei Ereignis-Handler. Der erste wird aufgerufen, wenn die pay.js-Bibliothek vollständig geladen ist, der andere, wenn auf die Google Pay-Schaltfläche geklickt wird.

Hängen Sie die Event-Handler unten an 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);
}

Codeerläuterung

onGooglePayLoaded() wird aufgerufen, wenn das Laden des pay.js-Scripts gemäß der Definition in der HTML-Datei abgeschlossen ist. Die Methode isReadyToPay() wird aufgerufen, um zu bestimmen, ob die Google Pay-Schaltfläche angezeigt werden soll. Wenn der Nutzer bereit ist zu bezahlen (d. h. er hat seinem Google Wallet eine Zahlungsart hinzugefügt), wird die Google Pay-Schaltfläche gerendert.
onGooglePaymentButtonClicked() wird aufgerufen, wenn auf die Google Pay-Schaltfläche geklickt wird. Diese Methode ruft die Bibliotheksmethode loadPaymentData() auf, 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

Herzlichen Glückwunsch zum Abschluss dieses Codelabs. 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 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

Zusätzliche Ressourcen

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