Schnelles Bezahlen im Web mit Google Pay ermöglichen

Mit der Google Pay API können Nutzer überall bezahlen, indem sie die in ihrem Google-Konto gespeicherten Zahlungsinformationen verwenden. In diesem Lab nutzen Sie die Google Pay-Clientbibliothek für das Web, um den Bezahlvorgang in einem vereinfachten Beispiel-Onlineshop zu verbessern, und so einen schnelleren, bequemeren und sichereren Service zu ermöglichen, der wiederum zu mehr Conversions und zufriedeneren Kunden führt.

Auto T-Shirt Shop ist ein innovatives Geschäft, das die neuesten Entwicklungen im Bereich künstliche Intelligenz nutzt und anhand von Informationen wie Stilpräferenzen, Wetter, Jahreszeit und Modetrends den passenden Artikel für Sie zum Kauf schlägt.

Die Messwerte für das Engagement in diesem Geschäft finden Sie oben auf dem Dach. Leider spiegeln die Messwerte auch eine große Anzahl von Ausstiegen während des Bezahlvorgangs wider. Einer der Inhaber des Projekts erinnert sich daran, ein Video über die vielversprechenden Ergebnisse von Google Pay für ähnliche Websites gesehen zu haben. Sie beschließt also, es auszuprobieren und Ihnen zu vertrauen.

Überblick

In diesem Codelab werden Sie Schritt für Schritt durch die Integration von Google Pay in eine vorhandene Website geführt. Dabei wird unter anderem erläutert, ob ein Nutzer mit einer von Google Pay unterstützten Zahlungsmethode bezahlen kann, wie die Zahlungsschaltfläche aussieht und wie sie gestaltet ist.

Lerninhalte

• Google Pay in eine vorhandene Zahlungsseite einbinden
• Bevorzugte Zahlungsmethoden auswählen
• Wie finde ich heraus, ob ein Nutzer mit Google Pay bezahlen möchte?

Voraussetzungen

• Einen Computer mit Internetzugang
• Grundkenntnisse in JavaScript

Beispielwebsite auf glitch.com ausführen

Dieses Codelab wurde auf glitch.com für Sie freigeschaltet. Damit Sie so schnell wie möglich loslegen können, bietet Glitch eine kostenlose webbasierte Umgebung mit einem Code-Editor sowie Hosting- und Bereitstellungsfunktionen, mit denen Sie Webanwendungen erstellen und bereitstellen können.

Verwende unten die Schaltfläche, um eine neue Entwicklungsumgebung in Glitch bereitzustellen, die bereits mit einer Kopie dieses Codelabs eingerichtet ist.

Entwicklungsumgebung auf Glitch.com starten

Hier kannst du deine Dateien mit dem Code-Editor von Glitch bearbeiten. Starten Sie die Anwendung mit dem Menü Anzeigen oben und wählen Sie In einem neuen Fenster aus.

Verwenden Sie nicht neben dem Code. Der Democode funktioniert nicht mit dem glitch.com-iFrame.

Beispielwebsite ansehen

Wie Sie sehen, enthält das Repository eine einfache Dateistruktur. Das Codelab besteht darin, Ihnen die Möglichkeit zu geben, diese Integration in Ihre vorhandenen und zukünftigen Anwendungen anzupassen – unabhängig vom Framework, den Bibliotheken oder den Tools, mit denen Sie zusammenarbeiten möchten.

Zur Website

Der Demo-Marktplatz wurde bereits so gestaltet, dass er dem aktuellen Aussehen Ihrer vorhandenen oder potenziellen Anwendung entspricht. Erst dann können Sie eine Methode hinzufügen. Obwohl wir empfehlen, dass Sie zusätzlich zu dieser Demoanwendung arbeiten, können Sie selbstverständlich dieses Codelab verwenden, um Google Pay in Ihre bestehenden Anwendungen einzubinden.

Wenn Sie mit diesem Codelab fertig sind, können Sie Ihren JavaScript-Code in fast jede Website kopieren und dann testen, ob er mit Google Pay bezahlt wird.

Beachten Sie, dass Sie für eine echte Zahlung in der Umgebung PRODUCTION arbeiten müssen, indem Sie eine gültige Google-Händler-ID verwenden und diese API aus einer zuvor auf der Zulassungsliste aufgeführten Domain aufrufen. Weitere Informationen zu diesem Prozess finden Sie in der Integrations-Checkliste.

Öffnen Sie die aktuelle Website, falls Sie das noch nicht getan haben. Wenn Sie Glitch verwenden, klicken Sie auf Show (Anzeigen), oder öffnen Sie die URL, auf der der lokale Webserver ausgeführt wird.

Die Demowebsite ist also nicht überraschend. Eine Produktdetailseite mit einem Bild, dem Preis, einer Beschreibung, einigen Selektoren und einer Schaltfläche, über die Sie zu einem imaginären und normalen Zahlungsformular gelangen

Ziel dieses Labs ist es, diesen Ablauf durch ein Verfahren mit zwei Klicks zu ersetzen, das auf Google Pay basiert.

Lassen Sie uns das planen!

Zur besseren Einbindung dieser Integration wird der Prozess in die folgenden grundlegenden Schritte unterteilt:

1. Mediathek laden
2. Festlegen, ob Sie mit Google Pay bezahlen können
3. Schaltfläche zum Bezahlen mit Google Pay anzeigen
4. Zahlungsanforderung erstellen und senden
5. Ergebnisse erfassen

script-Tag hinzufügen

Wenn Sie die Google Pay API verwenden möchten, müssen Sie zuerst die JavaScript-Bibliothek laden. Füge dazu ein script-Tag in die HTML-Datei ein, über die du die API aufrufen möchtest, einschließlich eines src-Attributs, das auf die externe JavaScript-Bibliothek verweist.

Öffne für dieses Codelab die Datei index.html. Das Skript-Tag sollte bereits enthalten sein:

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

Neben src haben Sie zwei weitere Attribute hinzugefügt.

• Mit async kann das Skript asynchron und mit dem Rest der Seite geladen und ausgeführt werden, sodass die erste Ladezeit des Dokuments nicht betroffen ist.
• Mit onload können Sie die Ausführung des Codes aus dieser Bibliothek aufschieben, bis das Skript geladen wurde. Danach wird die in diesem Attribut angegebene Funktion ausgeführt. In diesem Fall lautet die Funktion onGooglePayLoaded.

API-Client instanziieren

Sobald Ihr Skript geladen wurde, können Sie mit dem Verwenden dieser Bibliothek beginnen. Instanziieren Sie zuerst das Clientobjekt, das Sie später für Aufrufe der Google Pay API verwenden.

Bearbeite die Datei index.js, die bereits Teil der Dateistruktur in diesem Projekt ist. Ersetze die Funktion onGooglePayLoaded durch den folgenden Code.

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

Der Zahlungsclient wird mit einem PaymentOptions-Objekt initialisiert. Wenn Sie environment auf TEST festlegen, können Sie mit Zahlungsinformationen für Dummys in der gesamten Integration experimentieren. Wenn Sie Vorgänge erstellen möchten, die echte Transaktionen unterstützen, können Sie die environment-Property zu PRODUCTION aktualisieren.

Wichtig: Um in einer PRODUCTION-Umgebung zu arbeiten, benötigen Sie eine Google-Händler-ID. Um diese zu erhalten, fordern Sie den Produktionszugriff an, sobald Ihre Anwendung bereit ist.

Wenn Sie Google Pay in Kombination mit einem Zahlungsportal verwenden, unterscheidet sich Ihre Google-Händler-ID von anderen Konto- und Händler-IDs, die Sie von Ihrem Zahlungsdienstleister anfordern.

Übersicht

Die JavaScript-Clientbibliothek von Google Pay API wurde geladen. Jetzt konfigurieren wir es so, dass API-Aufrufe für uns ausgeführt werden.

Die folgenden Codeänderungen für den Rest des Codelabs werden an die Datei index.js vorgenommen.

Das Skelett

Bei jeder Kommunikation mit der Google Pay API müssen Sie in Ihren Anfragen eine Reihe von Konfigurationsparametern angeben, beispielsweise die API-Version, die Sie für die Ausrichtung verwenden. Für dieses Codelab enthält dieses Objekt auch Informationen zu den in Ihrem Antrag akzeptierten Zahlungsmethoden. Die endgültige Struktur sieht so aus:

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

Die Property allowedPaymentMethods verwendet eine Liste von Zahlungsmethoden. Für jede Zahlungsmethode müssen Sie die folgenden Properties angeben:

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

Nur die Properties type und parameters müssen festlegen, ob der betreffende Nutzer mit Google Pay bezahlen kann.

Später fügen wir die Property tokenizationSpecification hinzu, die vom Aufruf PaymentDataRequest verwendet wird, um zu definieren, wie die Daten in Bezug auf die ausgewählte Zahlungsmethode verarbeitet werden sollen. Aber lasst uns eins nach dem anderen gehen.

Konfiguration der Zahlungsmethode

In diesem Beispiel akzeptieren Sie nur eine Konfiguration, die Zahlungen für Mastercard und Visa ermöglicht, sowohl in Form von Tokens als auch für primäre Kontennummern (PAN).

So sollte Ihre Konfiguration in index.js eingerichtet sein:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

Eine vollständige Liste der Parameter, mit denen Sie die Zahlungsmethode CARD konfigurieren können, finden Sie in der Dokumentation im Abschnitt CardParameters.

Mechanismen zur Kartenauthentifizierung: Bei der Zahlung können Karten auf Grundlage der Authentifizierung der Transaktionsinformationen für den Prozessor oder das Gateway ausgewählt werden:

• Bei Verwendung der primären Kontonummer (PAN) werden die Kartenkontonummer und der Ablaufmonat und das Jahr an den Zahlungsabwickler gesendet. Kunden haben dann die Möglichkeit, jede zuvor sichere Karte zu verwenden, die mit ihren Google-Konten verknüpft ist.
• Die dynamische kryptografische Authentifizierung funktioniert in Kombination mit der Tokenisierung von Karten. Dabei handelt es sich um einen Mechanismus, durch den die Kartendaten Ihres Kunden durch einen zufälligen Wert ersetzt werden, den nur Ihr Kartenaussteller verstehen kann. In Kombination mit dynamischen Kryptografien wird dadurch sichergestellt, dass das an den Prozessor gesendete Token immer für jede Transaktion anders ist. Dadurch erhöht sich die Sicherheit bei diesen Vorgängen erheblich.

Zum Schluss alles zusammenfügen

Hier sehen Sie eine Zusammenfassung.

Sie haben eine Zahlungsmethode festgelegt, die auf Ihrer Website akzeptiert werden soll, und Sie arbeiten mit Version 2.0 der API. So sollte die resultierende Konfiguration aussehen:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

Nachdem du die Basiskonfiguration erstellt hast, können wir uns den lustigen Teil ansehen.

Eines der Hauptziele von Google Pay ist es, Ihren Nutzern einen schnelleren und bequemeren Bezahlvorgang anzubieten. Dies gilt nicht nur für Situationen, in denen ein Nutzer Google Pay verwenden kann, sondern auch in Situationen, in denen das nicht möglich ist. Mit der isReadyToPay-Anfrage können Sie herausfinden, ob Sie bereit sind, mit Google Pay zu bezahlen, und die Möglichkeit haben, den Bezahlvorgang auf Ihrer Website entsprechend zu modifizieren.

Kann Ihr Nutzer mit Google Pay bezahlen?

Als Erstes müssen Sie prüfen, ob ein bestimmter Nutzer, der auf Ihrer Website bezahlen möchte, Google Pay verwenden kann. In dieser Anfrage müssen Sie die Version der Google Pay API angeben und Zahlungsmethoden für Ihre Website zulassen. Dies ist genau das, was das im vorherigen Schritt definierte Basiskonfigurationsobjekt enthält.

Fügen Sie in der onGooglePayLoaded()-Funktion in index.js Folgendes ein:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

Wenn der Aufruf fehlschlägt oder die Antwort nicht funktioniert, müssen Sie im Zusammenhang mit Google Pay nichts weiter unternehmen. In diesem Fall bietet es sich an, zusätzliche UI zu verwenden, die andere Zahlungsmethoden unterstützt.

Wenn Ihre Antwort jedoch erfolgreich war, können Sie Ihren Nutzern jetzt die Möglichkeit geben, Google Pay zu nutzen. In diesem Fall können Sie eine Schaltfläche hinzufügen, mit der sich der Zahlungsvorgang bei der Nutzeraktivierung lösen lässt (z. B. der Klick auf eine Schaltfläche).

Mit dieser Anfrage wird nur geprüft, ob das Gerät oder der Browser, mit dem die API aufgerufen wird, Google Pay unterstützt.

Wenn Sie mit dieser Methode auch prüfen möchten, ob der betreffende Nutzer ein aktives Zahlungsmittel hat, das mit der unter allowedPaymentMethods angegebenen Konfiguration übereinstimmt, fügen Sie zusätzlich zu den anderen Properties in der Basiskonfiguration die boolesche Property existingPaymentMethodRequired: true in das Objekt IsReadyToPayRequest ein.

Schaltfläche zum Bezahlen mit Google Pay hinzufügen

Sie können zwar eine Schaltfläche verwenden, die den Markenrichtlinien von Google Pay entspricht, aber wir empfehlen Ihnen, eine Schaltfläche über die Google Pay API zu generieren. Auf diese Weise sorgen Sie nicht nur für eine korrekte Verwendung der Markenrichtlinien, sondern profitieren auch von anderen Verbesserungen, die direkt in die Schaltfläche integriert sind, wie etwa der Lokalisierung.

Verwende zum Generieren einer Schaltfläche die Methode createButton im PaymentsClient-Objekt, einschließlich ButtonOptions, um die Schaltfläche zu konfigurieren.

Fügen Sie in der createAndAddButton()-Funktion in index.js Folgendes ein:

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

Die einzige erforderliche Eigenschaft ist die Verwendung von onClick. Dies ist erforderlich, um das Callback-Objekt oder die Funktion zu ermitteln, die immer dann ausgelöst werden, wenn ein Nutzer die Schaltfläche aktiviert. Mit buttonColor und buttonType können Sie das Erscheinungsbild Ihrer Schaltfläche anpassen. Passen Sie sie entsprechend den Design- und UI-Anforderungen Ihrer Anwendung an.

Sobald die Schaltfläche erstellt ist, müssen Sie sie nur einem entsprechenden Knoten im DOM hinzufügen. In diesem Beispiel wird ein mit buy-now identifizierter div-Knoten verwendet.

Wenn Sie dieses Lab zur Integration von Google Pay in Ihre vorhandene Anwendung verwenden, müssen Sie darauf achten, dass Sie die richtige Befehl- oder Knoten-ID verwenden, um die Schaltfläche entsprechend zu platzieren.

Sie haben auch eine Funktion definiert, mit der Klicks auf Ereignisse erfasst werden. Im nächsten Abschnitt können Sie mithilfe dieser Funktion eine Zahlungsmethode anfordern.

Zahlungsanforderung vorbereiten

Jetzt haben Sie die Google Pay API geladen und festgestellt, dass der Nutzer Ihrer Website Google Pay für Zahlungen verwenden kann. Daraufhin wird in der Benutzeroberfläche die Schaltfläche für Google Pay-Zahlungen angezeigt. Jetzt ist der Nutzer bereit für die Transaktion. Jetzt wird es Zeit, die Tabelle mit den endgültigen Zahlungen zu laden, die die Zahlungsmittel für die verschiedenen angemeldeten Nutzer enthält.

Wie zuvor bei der Definition der isReadyToPay-Anfrage sind für diesen Aufruf zusätzlich zu einigen neuen Properties auch die Properties im zuvor festgelegten Basiskonfigurationsobjekt (apiVersion, apiVersionMinor und allowedPaymentMethods) erforderlich. Dieses Mal gibt es eine neue Property, tokenizationSpecification, sowie zusätzliche parameters in Ihren Zahlungsmethoden, die für diesen Antrag relevant sind. Außerdem müssen transactionInfo und merchantInfo hinzugefügt werden.

Zusätzliche erforderliche Informationen in Zahlungsmethoden aufnehmen

Erstellen Sie zuerst eine Kopie der zuvor verwendeten Zahlungsmethode. Für diese Kartenzahlungsmethode ist jetzt eine tokenizationSpecification-Property erforderlich, um zu definieren, wie die mit der ausgewählten Zahlungsmethode verbundenen Daten verarbeitet werden sollen. Außerdem sind weitere Datenanforderungen für die tatsächliche Transaktion erforderlich: in diesem Beispiel eine vollständige Rechnungsadresse und Telefonnummer.

Die Property tokenizationSpecification

Die Tokenisierungsspezifikation bestimmt, wie die von Ihren Kunden ausgewählte Zahlungsmethode verarbeitet und verwendet wird, um eine Transaktion abzuschließen.

Es gibt zwei verschiedene Arten von Verarbeitungsstrategien. Wenn Sie die Zahlungstransaktion innerhalb Ihrer PCI DSS-konformen Server verarbeiten, verwenden Sie den Spezifikationstyp DIRECT. In diesem Beispiel verwenden Sie ein Zahlungsportal, um die Zahlung zu verarbeiten. Daher legen Sie den Typ für die PAYMENT_GATEWAY-Spezifikation fest.

Fügen Sie in der onGooglePaymentsButtonClicked()-Funktion in index.js Folgendes ein:

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'example',
    gatewayMerchantId: 'gatewayMerchantId'
  }
};

Im Abschnitt parameters können Sie ein Gateway aus der Liste der von der Google Pay API unterstützten Anbieter sowie zusätzliche Konfigurationseinstellungen für jedes Gateway angeben. Für dieses Lab reicht es aus, das example-Gateway zu verwenden, das Testergebnisse für die ausgeführten Transaktionen liefert.

Weitere Informationen zu den Anforderungen für einzelne Gateway-Gateways und Beispiele finden Sie in der Dokumentation zu Token-Spezifikationen.

Wenn Sie stattdessen die Zahlungstransaktion über Ihre Server verarbeiten möchten, finden Sie weitere Informationen und Informationen zu diesem Ansatz unter Kryptografie für Zahlungsdaten für Händler.

Zusätzliche Parameter

Ebenso können Sie jetzt angeben, welche Informationen angefordert werden müssen, um die Transaktion abzuschließen. In diesem Beispiel müssen Sie die Properties billingAddressRequired und billingAddressParameters hinzufügen, um anzugeben, dass für diese Transaktion die Rechnungsadresse des Nutzers im vollständigen Format erforderlich ist (einschließlich Telefonnummer).

Fügen Sie in der onGooglePaymentsButtonClicked()-Funktion in index.js Folgendes ein:

const cardPaymentMethod = {
  type: 'CARD',
  tokenizationSpecification: tokenizationSpecification,
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS'],
    billingAddressRequired: true,
    billingAddressParameters: {
      format: 'FULL',
      phoneNumberRequired: true
    }
  }
};

Stellen Sie sicher, dass Sie nur Informationen anfordern, die für die Transaktion wirklich notwendig sind. Wenn Sie weitere Informationen anfordern, kann sich das negativ auf die Conversion auswirken.

Informationen zur Transaktion hinzufügen

Das Attribut transactionInfo enthält ein Objekt mit Finanzdaten zur Transaktion, also den price [Preis] und den Währungscode (Alpha 4217-Alphaformat) sowie den Status des Preises. Diese kann entweder endgültig oder geschätzt werden (je nach Art der Transaktion). Der Preis kann beispielsweise je nach Versandadresse abweichen.

Fügen Sie in der onGooglePaymentsButtonClicked()-Funktion in index.js Folgendes ein:

const transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD'
};

Informationen zum Händler hinzufügen

Die Zahlungsanforderung bezieht sich auf Informationen über den Händler, der die Anfrage nach der merchantInfo-Property durchführt. In diesem Codelab konzentrieren wir uns auf zwei davon:

• merchantId erwartet, dass die mit Ihrem Konto verknüpfte Kennung vorliegt, sobald Ihre Website für die Produktion durch Google freigegeben wurde. Hinweis: Dies wird bei Verwendung der Umgebung TEST nicht ausgewertet.
• merchantName ist ein für Nutzer sichtbarer Name Ihrer Website oder Organisation. Diese Informationen können in der Google Pay-Zahlungsübersicht angezeigt werden, damit Nutzer mehr darüber erfahren können, wer den Vorgang anfordert.

Fügen Sie in der onGooglePaymentsButtonClicked()-Funktion in index.js Folgendes ein:

const merchantInfo = {
  // merchantId: '01234567890123456789', Only in PRODUCTION
  merchantName: 'Example Merchant Name'
};

Zahlungsinformationen anfordern und das Ergebnis verarbeiten

Jetzt führen Sie die zuvor definierte Konfiguration mit dem endgültigen paymentDataRequest-Objekt zusammen.

Fügen Sie in der onGooglePaymentsButtonClicked()-Funktion in index.js Folgendes ein:

const paymentDataRequest = Object.assign({}, googlePayBaseConfiguration, {
  allowedPaymentMethods: [cardPaymentMethod],
  transactionInfo: transactionInfo,
  merchantInfo: merchantInfo   
});

Sie haben jetzt alles, was Sie benötigen, um die Google Pay API um eine gültige Zahlungsart zu bitten. Verwende dazu die Methode loadPaymentData im Objekt PaymentsClient und übergib die soeben konfigurierte Konfiguration.

Fügen Sie in der onGooglePaymentsButtonClicked()-Funktion in index.js Folgendes ein:

googlePayClient
  .loadPaymentData(paymentDataRequest)
  .then(function(paymentData) {
    processPayment(paymentData);
  }).catch(function(err) {
    // Log error: { statusCode: CANCELED || DEVELOPER_ERROR }
  });

Die Funktion processPayment() ist ein Platzhalter (siehe unten).

Durch den Aufruf der Methode loadPaymentData wird die Darstellung des Google Pay-Zahlungsblatts ausgelöst. Wenn keine Konfigurationsfehler vorhanden sind, können Sie eine Liste gültiger Zahlungsmethoden für das aktuell angemeldete Konto aufrufen.

Sie können Ihrem Konto eine gültige Karte hinzufügen, um zu prüfen, ob die Integration funktioniert. Hinweis: Ihre Karte wird nicht belastet oder offengelegt.

Nach der Auswahl wird das Tabellenblatt geschlossen und die Promise wird mit einem PaymentData-Objekt erfüllt, das relevante Informationen zur ausgewählten Zahlungsmethode enthält:

{
  "apiVersionMinor": 0,
  "apiVersion": 2,
  "paymentMethodData": {
    "description": "Visa •••• 1234",
    "tokenizationData": {
      "type": "PAYMENT_GATEWAY",
      "token": "examplePaymentMethodToken"
    },
    "type": "CARD",
    "info": {
      "cardNetwork": "VISA",
      "cardDetails": "1234",
      "billingAddress": {
        "phoneNumber": ...,
        ...
      }
    }
  }
}

Sie können die Informationen jetzt anhand dieser Zahlungsmethode für die eigentliche Transaktion verwenden.

function processPayment(paymentData) {
  // TODO: Send a POST request to your processor with the payload
  // https://us-central1-devrel-payments.cloudfunctions.net/google-pay-server 
  // Sorry, this is out-of-scope for this codelab.
  return new Promise(function(resolve, reject) {
    // @todo pass payment token to your gateway to process payment
    const paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    console.log('mock send token ' + paymentToken + ' to payment processor');
    setTimeout(function() {
      console.log('mock response from processor');
      alert('done');
      resolve({});
    }, 800);
  });
}

Hinweis: Sobald Sie die tokenizationSpecification aktualisiert haben, um gültige Informationen zu Ihrem Zahlungsportal zu speichern, werden Ihnen die Zahlungsinformationen in Übereinstimmung mit der Funktionsweise des ausgewählten Zahlungsportals und der Umgebung, in der Sie ausgeführt werden, zurückgegeben. In der Liste der unterstützten Prozessoren finden Sie weitere Informationen zu den Implementierungsdetails der einzelnen Prozessoren.

Bisher haben wir uns Transaktionen mit festen Zahlungsbeträgen angesehen. Angenommen, Sie möchten den Preis auf der Grundlage der Auswahl bestimmter Eigenschaften der Transaktion (z. B. der Versanddetails) aktualisieren. Das ist möglich, wenn Sie beim Erstellen des Clients den Parameter paymentDataCallback angeben. Dieser Callback wird verwendet, um Änderungen an der Transaktion zu verarbeiten und entsprechend zu übernehmen. Sie können sich die Änderungen an der Versandadresse, der Versandoption und der ausgewählten Zahlungsmethode anhören. In diesem Beispiel prüfen Sie, ob die Versandoption geändert wurde. Definieren Sie zuerst die Variablen, die alle Versandinformationen enthalten, und ändern Sie sie paymentDataRequest:

const shippingOptionParameters = {
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$1.99: Standard shipping',
      description: 'Delivered on May 15.'
    },
    {
      id: 'shipping-002',
      label: '$3.99: Expedited shipping',
      description: 'Delivered on May 12.'
    },
    {
      id: 'shipping-003',
      label: '$10: Express shipping',
      description: 'Delivered tomorrow.'
    }
  ]
};

// Shipping surcharges mapped to the IDs above.
const shippingSurcharges = {
  'shipping-001': 1.99,
  'shipping-002': 3.99,
  'shipping-003': 10
};

...

// Place inside of onGooglePaymentsButtonClicked()
paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.shippingOptionRequired = true;
paymentDataRequest.callbackIntents = ['SHIPPING_OPTION'];
paymentDataRequest.shippingOptionParameters =  shippingOptionParameters;

Als Nächstes ändern Sie die Erstellung von googlePayClient, um eine paymentDataCallback hinzuzufügen. Diese wird aufgerufen, wenn eine in der callbackIntents enthaltene Änderung am Zahlungsvorgang vorgenommen wird. Dieser Callback enthält ein Objekt mit geänderten Eigenschaften. Sie können die folgenden Änderungen verwenden, um eine aktualisierte Zahlungstransaktion zu erstellen:

function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    paymentDataCallbacks: { onPaymentDataChanged: paymentDataCallback },
    environment: 'TEST'
  });
  ...
}

function paymentDataCallback(callbackPayload) {

  const selectedShippingOptionId = callbackPayload.shippingOptionData.id;
  const shippingSurcharge = shippingSurcharges[selectedShippingOptionId];
  const priceWithSurcharges = 123.45 + shippingSurcharge;

  return {
    newTransactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPrice: priceWithSurcharges.toFixed(2),
      totalPriceLabel: 'Total',
      currencyCode: 'USD',
      displayItems: [
        {
          label: 'Subtotal',
          type: 'SUBTOTAL',
          price: priceWithSurcharges.toFixed(2),
        },
        {
          label: 'Shipping',
          type: 'LINE_ITEM',
          price: shippingSurcharge.toFixed(2),
          status: 'FINAL'
        }]
    }
  }
};

Wenn dieses neue Objekt im Callback zurückgegeben wird, werden die Angaben im Zahlungsblatt aktualisiert, um die Änderungen an der Transaktion widerzuspiegeln.

Da Sie die Einbindung der Integration jetzt getestet haben, können Sie einen Schritt weiter gehen und Ihre Zahlungskonfiguration vorab abrufen, sobald Sie festgestellt haben, dass Google Pay verwendet werden kann. Dies geschieht, bevor der Nutzer die Google Pay-Zahlungsschaltfläche aktivieren (klicken) kann.

Wenn Sie die Zahlungsdaten vorab abrufen, sind die Informationen, die das Tabellenblatt benötigt, um geladen zu werden, bereits verfügbar, was die Ladezeit erheblich verkürzt und so die Nutzerfreundlichkeit verbessert.

Für diese Methode wird dieselbe Eingabe wie für loadPaymentData erwartet. Das heißt, Sie können das zuvor definierte paymentDataRequest-Objekt verwenden. Jetzt muss lediglich die Prefetch-Methode aufgerufen werden, sobald Sie festgestellt haben, dass der Nutzer Google Pay verwenden kann. Nachdem isReadyToPay erfolgreich zurückgegeben wurde, gehen Sie so vor:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
      googlePayClient.prefetchPaymentData(paymentDataRequest);
    }
  });

Hinweis: Wenn Sie momentan nicht genügend Kontext haben, um den Preis der Transaktion zu ermitteln, können Sie totalPriceStatus auf NOT_CURRENTLY_KNOWN. setzen. In diesem Fall ist die Aufnahme der Properties totalPrice und currencyCode nicht obligatorisch.

So können Sie die Ladezeiten verkürzen, indem die Zahlungsdaten vorab abgerufen werden, bevor der Nutzer auf die Schaltfläche klickt. Durch die verbesserte Reaktionszeit Ihrer Website sollte sich die Conversion-Rate verbessern.

Sie haben die Google Pay API erfolgreich in die Beispielwebsite in diesem Codelab oder in Ihrer eigenen Anwendung eingebunden.

Sieh dir dazu die Integrations-Checkliste an. Nach Abschluss der Prüfung erhalten Sie eine Händler-ID, die Sie Ihrer Kundenkonfiguration hinzufügen können. Wenn Sie einen Zahlungsabwickler oder ein Drittanbieter-Gateway verwenden möchten oder nutzen möchten, sehen Sie sich die Liste der unterstützten Anbieter bei Google Pay an und konfigurieren Sie Ihr Anbieter entsprechend. Wenn Sie Google Pay direkt einbinden möchten, lesen Sie diesen Abschnitt zu Dokumentationen über dieses Thema.

Behandelte Themen

• Importieren und konfigurieren Sie die Google API in Ihre Website.
• Ermitteln Sie, ob es Unterstützung für die API gibt, und reagieren Sie entsprechend.
• Fügen Sie eine Schaltfläche hinzu, damit Nutzer mit Google Pay bezahlen können.
• Laden und verarbeiten Sie zuvor gespeicherte Zahlungsinformationen von Nutzern.
• Optimiere die Ladezeit durch Vorabruf von Zahlungsinformationen.

Weitere Informationen

• Hier erhalten Sie weitere Informationen zu Google Pay.
• Gehen Sie die Integrations-Checkliste durch und rufen Sie eine Händler-ID ab.
• Sehen Sie sich die beiden verschiedenen Arten der Integration an und entscheiden Sie dann, welche für Sie am besten geeignet sind: die direkte Einbindung oder ein Zahlungsportal oder den Prozessor.
• Richten Sie Zahlungen autorisieren ein, um den Zahlungsprozess zu starten und einen Autorisierungsstatus zu bestätigen. (Auth oder Ablehnen)

Weitere Informationen

• Sehen Sie sich die Referenz zur Bibliothek an.
• Führen Sie eine Fehlerbehebung durch, wenn Fehler bei der Implementierung auftreten.
• Weitere Informationen zur Integration von Google Pay unter Android

War das hilfreich?

Sehr nützlich! Genau genug, um die Erwartungen zu erfüllen. Nicht wirklich.

Möchten Sie sich weitere Codelabs ansehen, die Ihnen bei anderen Integrationsmöglichkeiten (Android, direkte Integration, Treue-APIs) helfen?

Ja, das ist groß. Ich bin zufrieden mit dem, was ich erhalten habe.