Mit Google Pay auf Android-Geräten schnell bezahlen

1. Einführung

Mit der Google Pay API können Nutzer überall mit den in ihren Google-Konten gespeicherten Zahlungsinformationen bezahlen. In diesem Lab nutzen Sie die Google Pay-Clientbibliothek für Android, um den Bezahlvorgang in einer vereinfachten Beispiel-App für Mobilgeräte zu verbessern. Sie schaffen schnellere, bequemere und sicherere Abläufe, was wiederum zu mehr Conversions und zufriedeneren Kunden führt.

Der Auto-T-Shirt-Shop ist ein innovatives Geschäft, das die neuesten Fortschritte im Bereich der künstlichen Intelligenz nutzt und Informationen wie Stilpräferenzen, Wetter, Jahreszeit und Modetrends schlägt, Ihnen den am besten geeigneten Artikel für den Kauf vorzuschlagen.

Die Messwerte zur Interaktion sind überwältigend. Leider spiegeln die Zahlen auch eine große Anzahl von Ausstiegen während des Bezahlvorgangs wider. Einer der Inhaber des Projekts erinnert sich daran, ein Video gesehen zu haben, in dem die vielversprechenden Ergebnisse von Google Pay für ähnliche Websites gezeigt werden. Also beschließt er, es auszuprobieren und vertraut, dass du die Integration selbst erledigst.

Übersicht

In diesem Codelab erfahren Sie, wie Sie Google Pay in eine vorhandene Anwendung einbinden. Sie erfahren unter anderem, wie Sie feststellen können, ob ein Nutzer mit einer von Google Pay unterstützten Zahlungsmethode bezahlen kann, wie die Zahlungsschaltfläche platziert und gestaltet wird und wie die Transaktion ausgeführt wird.

In diesem Codelab lernen Sie Folgendes:

1. Google Pay in eine vorhandene Android-App integrieren
2. Feststellen, ob ein Nutzer bereit ist, mit Google Pay zu bezahlen
3. Google Pay-Schaltfläche zur Benutzeroberfläche hinzufügen
4. Zahlung mit Google Pay durchführen

Vorbereitung

• Git
• Android Studio oder eine alternative Entwicklungsumgebung für Android-Apps
• Ein Android-Gerät oder Emulator, auf dem die neueste Version der Google Play-Dienste installiert ist

Support

Wenn Sie nicht weiterkommen, finden Sie im GitHub-Repository google-pay/android-quickstart eine vollständige Referenzlösung.

2. Erste Schritte

Repository von GitHub klonen

Verwenden Sie den folgenden Befehl, um das Repository in einen Ordner auf Ihrem Computer zu klonen:

git clone https://github.com/google-pay/android-quickstart

Oder wenn Sie ein ZIP-Archiv bevorzugen:

Quellcode herunterladen

Beispielanwendung durchgehen

Wie Sie sehen können, weist das Repository eine unkomplizierte Dateistruktur auf. Dieses Codelab soll dir die Möglichkeit geben, diese Integration an deine vorhandenen und zukünftigen Anwendungen anzupassen – unabhängig von der Programmiersprache, den Bibliotheken oder den Tools, mit denen du arbeiten möchtest.

3. Projekt in Android Studio öffnen

Das von Ihnen geklonte GitHub-Repository enthält ein Android-Projekt mit einer grundlegenden Aktivität. In diesem Schritt bearbeiten Sie diese Aktivität, um zu bestätigen, dass Google Pay bereit ist, und eine Google Pay-Schaltfläche anzeigen zu lassen.

1. Android Studio öffnen
2. Wählen Sie Datei und dann Öffnen aus.
3. Verzeichnis kotlin im Repository auswählen
4. Wählen Sie Öffnen aus.

Füge die Google Pay-Bibliothek als Abhängigkeit in der build.gradle-Datei hinzu

1. Öffnen Sie die Gradle-Build-Datei auf Modulebene (kotlin/app/build.gradle.kts).
2. Füge dem Abschnitt „dependencies“ die Google Pay-Mediathek hinzu

implementation "com.google.android.gms:play-services-wallet:19.3.0"

1. Speichern Sie die Datei.
2. Wählen Sie File (Datei) und dann Sync Project with Gradle Files (Projekt mit Gradle-Dateien synchronisieren) aus.

Aktiviere die Google Pay API in deiner Android-Manifestdatei

Fügen Sie abschließend ein meta-data-Element in den Knoten application Ihrer Manifestdatei ein:

<meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />

4. Entscheiden Sie, wo Sie die Google Pay-Schaltfläche in Ihrer Benutzeroberfläche platzieren möchten.

Das Layout und die Platzierung in Ihren Ansichten sind wichtige Aspekte, die sich darauf auswirken, mit welcher Wahrscheinlichkeit Ihre Nutzer einen Zahlungsvorgang abschließen. Die Möglichkeit, mit Google Pay in wenigen Schritten ein Zahlungsmittel auszuwählen, bietet neue Optionen, wo und wann Nutzern eine Zahlungsmethode in Ihrer App angeboten werden kann. Sie können beispielsweise früher im Prozess Optionen für den schnellen Bezahlvorgang in Bereichen wie der Detailansicht eines Artikels hinzufügen, damit Nutzer schnell für einen einzelnen Artikel bezahlen können.

Nachdem Sie sich entschieden haben, wie Sie Ihre Benutzeroberfläche gestalten möchten, müssen Sie als Nächstes die Google Pay-Schaltfläche platzieren. Sie können einige visuelle Funktionen der Schaltfläche wie den Typ, das Design und die Rundheit der Ecken konfigurieren. Beispiele:

Die Google Pay-Bibliothek enthält eine Ansicht, mit der sich die Schaltfläche einfacher zu Ihrer Benutzeroberfläche hinzufügen lässt. Wenn Sie Ihre Layouts mit XML erstellen, gehen Sie so vor:

<com.google.android.gms.wallet.button.PayButton
    android:id="@+id/googlePayButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Später initialisieren Sie die Schaltfläche programmatisch (siehe Beispiel).
Wenn Sie Jetpack Compose verwenden, fügen Sie die neueste Version der folgenden Abhängigkeit in die Datei build.gradle oder build.gradle.kts ein:

implementation "com.google.pay.button:compose-pay-button:1.0.0"

Und so fügst du die Google Pay-Schaltfläche zu deinem Layout „Schreiben“ hinzu:

PayButton(
    modifier = Modifier
        .testTag("payButton")
        .fillMaxWidth(),
    onClick = onGooglePayButtonClick,
    allowedPaymentMethods = PaymentsUtil.allowedPaymentMethods.toString()
)

Sieh dir das Beispiel in GitHub an, um mehr über das Erstellen der Liste der akzeptierten Zahlungsmethoden zu erfahren.

Ab jetzt werden in diesem Codelab Kotlin, Koroutinen und Jetpack Compose verwendet. Wenn Sie Java- oder XML-Layouts verwenden, lesen Sie die Anleitung zur Java-Integration in der Dokumentation.

5. Google Pay API initialisieren und konfigurieren

API-Client instanziieren

Damit du die API verwenden kannst, musst du ein Clientobjekt instanziieren, mit dem du Aufrufe an die Google Pay API tätigst. Das kannst du tun, sobald deine Aktivität oder dein Controller erstellt wurde:

private val paymentsClient: PaymentsClient = createPaymentsClient(context)

fun createPaymentsClient(context: Context): PaymentsClient {
    val walletOptions = Wallet.WalletOptions.Builder()
            .setEnvironment(WalletConstants.ENVIRONMENT_TEST).build()
    return Wallet.getPaymentsClient(context, walletOptions)
}

Der Zahlungsclient wird mit einem WalletOptions-Objekt initialisiert. Wenn Sie die Umgebung auf ENVIRONMENT_TEST festlegen, können Sie mit Informationen zu Testzahlungen experimentieren. Sobald Sie bereit sind, tatsächliche Zahlungstransaktionen auszuführen, können Sie das Umgebungsattribut auf ENVIRONMENT_PRODUCTION aktualisieren.

Wichtig Wenn Sie in der PRODUCTION-Umgebung arbeiten können, rufen Sie die Seite Pay & Wallet Console und folge der Anleitung, um ein Unternehmensprofil zu erstellen und deine Integration für Zahlungstransaktionen genehmigen zu lassen.

Aufbau einer Google Pay-Anfrage

Wenn Sie Anfragen an die Google Pay API senden, müssen Sie eine Reihe von Konfigurationsparametern in Ihre Anfragen aufnehmen, z. B. die Version der API, auf die Sie die App ausrichten. Für die Zwecke dieses Codelabs enthält dieses Objekt auch Informationen zu den Zahlungsmethoden, die in deinem Antrag akzeptiert werden. Die endgültige Struktur sieht so aus:

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

Die Property allowedPaymentMethods verwendet eine Liste mit Zahlungsmethoden. Für jede Zahlungsmethode müssen die folgenden Attribute angegeben werden:

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

Konfiguration der Zahlungsmethode

Für dieses Beispiel akzeptieren Sie nur Kartenzahlungen für Mastercard und Visa, sowohl als Tokenisierte als auch als primäre Kontonummer (PAN). Ihre Zahlungsmethode sieht so aus:

private val baseCardPaymentMethod =
    JSONObject()
        .put("type", "CARD")
        .put("parameters", JSONObject()
            .put("allowedCardNetworks", JSONArray(listOf("VISA", "MASTERCARD")))
            .put("allowedAuthMethods", JSONArray(listOf("PAN_ONLY", "CRYPTOGRAM_3DS")))
        )

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

Zusammenfassung

Fassen wir noch einmal zusammen: Sie haben in Ihrem Antrag eine Zahlungsmethode festgelegt, die akzeptiert werden soll, und Sie werden mit Version 2.0 des APIs arbeiten. So sieht die resultierende Konfiguration aus:

private val baseCardPaymentMethod = JSONObject()
    .put("type", "CARD")
    .put("parameters", JSONObject()
        .put("allowedCardNetworks", JSONArray(listOf("VISA", "MASTERCARD")))
        .put("allowedAuthMethods", JSONArray(listOf("PAN_ONLY", "CRYPTOGRAM_3DS")))
    )

private val googlePayBaseConfiguration = JSONObject()
    .put("apiVersion", 2)
    .put("apiVersionMinor", 0)
    .put("allowedPaymentMethods",  JSONArray(listOf(baseCardPaymentMethod)))
}

6. Prüfen, ob Sie mit Google Pay bezahlen können

Mit der isReadyToPay-Anfrage können Sie ermitteln, ob ein Nutzer in Ihrer App mit Google Pay bezahlen kann. Anhand dieser Informationen können Sie die Nutzererfahrung in Ihrer Anwendung entsprechend anpassen.

Für diese Anfrage müssen Sie die Version der Google Pay API und die Liste der zulässigen Zahlungsmethoden in Ihrer App angeben. Genau das enthält das im vorherigen Schritt definierte Basiskonfigurationsobjekt:

private suspend fun fetchCanUseGooglePay(): Boolean {
    val request = IsReadyToPayRequest.fromJson(googlePayBaseConfiguration.toString())
    return paymentsClient.isReadyToPay(request).await()
}

Die Google Pay API verwendet Tasks, um Remoteaufrufe aufzulösen. Mit der Tasks API können Sie Task-Vorgänge mithilfe von Koroutinen auflösen. Weitere Informationen

Wie Sie sehen, wird bei der Prüfung der Bereitschaft zum Bezahlen mit Google Pay ein boolesches Objekt zurückgegeben. Wenn das Ergebnis positiv ist, besteht der nächste Schritt darin, die Google Pay-Schaltfläche in deiner Benutzeroberfläche anzuzeigen. Andernfalls sollten Sie erwägen, eine zusätzliche Benutzeroberfläche anzuzeigen, die andere Zahlungsmethoden unterstützt.

Google Pay-Schaltfläche anzeigen

Kehren Sie nun zur Benutzeroberfläche zurück und aktualisieren Sie die Platzierung der Google Pay-Schaltfläche basierend auf dem Ergebnis des vorherigen Aufrufs. In diesem Beispiel wird eine Klasse verwendet, die den Status der Ansicht enthält, der anhand von Eingaben wie dem Aufruf von isReadyToPay aktualisiert wird.

if (payUiState !is PaymentUiState.NotStarted) {
    PayButton(
        modifier = Modifier
            .testTag("payButton")
            .fillMaxWidth(),
        onClick = onGooglePayButtonClick,
        allowedPaymentMethods = PaymentsUtil.allowedPaymentMethods.toString()
    )
}

7. Jetzt gehts los!

### Zahlungsanforderung vorbereiten

Sie haben die Google Pay API geladen und festgestellt, dass der Nutzer in Ihrer App Google Pay verwenden kann, um eine Zahlung auszuführen. Daher ist die Google Pay-Zahlungsschaltfläche in der Benutzeroberfläche zu sehen und Ihr Nutzer ist jetzt bereit, die Transaktion zu starten. Jetzt ist es an der Zeit, die Zahlungsübersicht mit den für Ihren Nutzer verfügbaren Zahlungsmitteln zu laden.

Ähnlich wie beim Aufruf von isReadyToPay sind für diese Anfrage die Attribute im zuvor definierten Basiskonfigurationsobjekt erforderlich (apiVersion, apiVersionMinor und allowedPaymentMethods). Dieses Mal benötigen Sie außerdem eine neue Property namens tokenizationSpecification sowie zusätzliche Parameter, um die Transaktion zu beschreiben und Informationen wie Rechnungs- und Versandadressen oder die E-Mail-Adresse oder Telefonnummer.

#### Die Eigenschaft tokenizationSpecification

Die Spezifikation für die Tokenvergabe bestimmt, wie die von Ihren Nutzern ausgewählte Zahlungsmethode behandelt und für den Abschluss einer Transaktion verwendet wird.

Es werden zwei verschiedene Arten von Verarbeitungsmechanismen unterstützt. Wenn du die Zahlungstransaktion von deinen PCI DSS-konformen Servern abwickelst, verwende den Spezifikationstyp DIRECT. In diesem Beispiel verwenden Sie ein Zahlungs-Gateway zur Verarbeitung der Zahlung und legen daher den Spezifikationstyp PAYMENT_GATEWAY fest:

private val tokenizationSpecification = JSONObject()
    .put("type", "PAYMENT_GATEWAY")
    .put("parameters", JSONObject(mapOf(
            "gateway" to "example",
            "gatewayMerchantId" to "exampleGatewayMerchantId")))
}

Im Abschnitt parameters können Sie ein Gateway aus der Liste der von der Google Pay API unterstützten Anbieter sowie zusätzliche Konfigurationen angeben, die für jedes Gateway erforderlich sind. Für dieses Lab verwenden Sie das Gateway example, das Testergebnisse für die ausgeführten Transaktionen zurückgibt.

Sehen Sie sich weitere Informationen zu den Anforderungen für die einzelnen Gateways oder die Beispiele in der Dokumentation zur Tokenspezifikation an.

Zusätzliche Parameter

Ebenso können Sie weitere Details von Ihrem Nutzer anfordern, um die Bestellung erfolgreich aufzugeben. In diesem Beispiel fügen Sie die Eigenschaften billingAddressRequired und billingAddressParameters hinzu, um anzugeben, dass für diese Transaktion die Rechnungsadresse des Nutzers im vollständigen Format einschließlich Telefonnummer erforderlich ist:

private val cardPaymentMethod = JSONObject()
    .put("type", "CARD")
    .put("tokenizationSpecification", tokenizationSpecification)
    .put("parameters", JSONObject()
        .put("allowedCardNetworks", JSONArray(listOf("VISA", "MASTERCARD")))
        .put("allowedAuthMethods", JSONArray(listOf("PAN_ONLY", "CRYPTOGRAM_3DS")))
        .put("billingAddressRequired", true)
        .put("billingAddressParameters", JSONObject(mapOf("format" to "FULL")))
    )

Achten Sie darauf, nur Informationen anzufordern, die für die Durchführung der Transaktion unbedingt erforderlich sind. Bitte beachten Sie, dass sich die Anforderung weiterer Informationen negativ auf die Conversion-Raten auswirken kann.

#### Zusätzliche Informationen zur Transaktion angeben

Die Eigenschaft transactionInfo enthält ein Objekt mit finanziellen Details zur Transaktion, nämlich price und Währungscode (ISO 4217 Alpha-Format) sowie den Preisstatus, der je nach Art der Transaktion entweder endgültig oder geschätzt sein kann (z. B. kann der Preis je nach Versandadresse variieren):

private val transactionInfo = JSONObject()
    .put("totalPrice", "123.45")
    .put("totalPriceStatus", "FINAL")
    .put("currencyCode", "USD")
}

#### Informationen zum Unternehmen hinzufügen

Die Zahlungsanforderung ruft Informationen zu dem Händler ab, der die Anfrage unter der Eigenschaft merchantInfo ausführt. In diesem Codelab geht es um zwei Properties:

• merchantId enthält die mit Ihrem Konto verknüpfte Kennung. Ihre Händler-ID finden Sie auf der Seite Bezahl- und Wallet-Konsole. Beachten Sie, dass dieses Feld bei Verwendung der TEST-Umgebung nicht ausgewertet wird.
• merchantName ist der für Nutzer sichtbare Name Ihrer Anwendung oder Organisation. Diese Informationen können im Google Pay-Zahlungsformular angezeigt werden, um Nutzern mehr Informationen darüber zu bieten, wer den Vorgang anfordert.

Anschließend fügen Sie die Informationen über den Händler dem paymentDataRequest-Objekt hinzu:

private val merchantInfo = JSONObject()
    .put("merchantName", "Example Merchant")
    .put("merchantId", "01234567890123456789")

Anfrage senden und Ergebnis verarbeiten

Führen Sie nun das Konfigurationsobjekt zusammen und übergeben Sie es an die loadPaymentData-Anfrage:

private val paymentDataRequestJson = JSONObject(googlePayBaseConfiguration.toString())
    .put("allowedPaymentMethods", JSONArray().put(cardPaymentMethod))
    .put("transactionInfo", transactionInfo)
    .put("merchantInfo", merchantInfo)

Jetzt haben Sie alles, was Sie benötigen, um ein gültiges Zahlungsmittel bei der Google Pay API anzufordern. Verwenden Sie dazu die Methode loadPaymentData im Objekt PaymentsClient und übergeben Sie die soeben definierte Konfiguration:

fun getLoadPaymentDataTask(): Task<PaymentData> {
    val request = PaymentDataRequest.fromJson(paymentDataRequestJson.toString())
    return paymentsClient.loadPaymentData(request)
}

private fun requestPayment() {
    val task = getLoadPaymentDataTask()
    task.addOnCompleteListener(paymentDataLauncher::launch)
}

Die Google Pay API verwendet die Activity Result API, um ein Ergebnis zurückzugeben. Die API enthält Verträge, um die Verarbeitung und Reaktion auf das Ergebnis zu vereinfachen. In diesem Beispiel wird der GetPaymentDataResult-Vertrag verwendet, der neben dem Zahlungsergebnis auch Informationen zum Vorgang enthält:

private val paymentDataLauncher = registerForActivityResult(GetPaymentDataResult()) { taskResult ->
    when (taskResult.status.statusCode) {
        CommonStatusCodes.SUCCESS -> {
            taskResult.result!!.let {
                Log.i("Google Pay result:", it.toJson())
                // TODO something with the result
            }
        }
        CommonStatusCodes.CANCELED -> // The user canceled
        AutoResolveHelper.RESULT_ERROR -> // The API returned an error (it.status: Status)
        CommonStatusCodes.INTERNAL_ERROR -> // Handle other unexpected errors
    }
}

Durch den Aufruf dieser Methode wird die Darstellung des Google Pay-Zahlungsformulars ausgelöst. Wenn keine Konfigurationsfehler vorliegen, wird eine Liste der gültigen Zahlungsmethoden für das aktuell angemeldete Konto angezeigt.

Nach der Auswahl wird das Tabellenblatt geschlossen und das Ergebnis wird an Ihre Aktivität zurückgesendet und in der oben definierten Übersicht der Aktivitätsergebnisse erfasst.

Wenn die Auswahl erfolgreich ist, wird das Ergebnis mit einem PaymentData-Objekt zurückgegeben, 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 jetzt diese Zahlungsmethode verwenden, um die Transaktion über Ihr Zahlungs-Gateway abzuschließen:

private fun handlePaymentSuccess(paymentData: PaymentData) {
    val paymentMethodToken = paymentData
            .getJSONObject("tokenizationData")
            .getString("token")

    // Sample TODO: Use this token to perform a payment through your payment gateway
}

Weitere Informationen zu den spezifischen Implementierungsdetails finden Sie in der Liste der unterstützten Prozessoren.

8. Glückwunsch!

Du hast Google Pay erfolgreich einer Android-App hinzugefügt.

### Nächste Schritte

• Google Pay in Ihrer App testen
• Eine Händler-ID erhalten Sie auf der Seite Pay & Wallet-Konsole
• Gehen Sie die Integrations-Checkliste durch.

### Weitere Informationen

• Sehen Sie sich die API-Referenz an.
• Fehlerbehebung bei der Integration, wenn Fehler auftreten
• Eine Anleitung zur Integration mit anderen Programmiersprachen und Bibliotheken finden Sie in der Integrationsanleitung in der jeweiligen Dokumentation.
• Eine vollständige, funktionierende Demo finden Sie in der Beispielanwendung in GitHub.

Fanden Sie dies hilfreich?

<ph type="x-smartling-placeholder"></ph> Sehr nützlich Genau wie erwartet Eher nicht