Google Pay API für Flutter unter Android

1. Einführung

Aufgaben

Nach Abschluss dieses Codelabs haben Sie eine minimal funktionsfähige Flutter-App mit einer funktionierenden Google Pay-Integration für Android. In diesem Projekt wird ein Zahlungstoken abgerufen, das zur Verarbeitung an einen Zahlungsdienstleister gesendet werden kann.

Lerninhalte

  • Google Pay Flutter-Bibliothek installieren und konfigurieren
  • Google Pay-Schaltfläche anzeigen und Klicks verarbeiten
  • Zahlungstoken von Google Pay anfordern

Voraussetzungen

  • Ein Texteditor Ihrer Wahl zum Bearbeiten von Dart-Dateien.
  • Eine für Android eingerichtete Flutter-Entwicklungsumgebung.
  • 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.

2. Flutter-Projekt erstellen

Projektdateien erstellen

  1. Erstellen Sie ein neues Flutter-Projekt mit dem Namen googlepay_flutter.
    flutter create googlepay_flutter
  2. Installieren Sie die Google Pay Flutter-Bibliothek.
    cd googlepay_flutter
flutter pub add pay
  3. Öffnen Sie lib/main.dart in Ihrer bevorzugten IDE und ersetzen Sie den Inhalt durch den folgenden Code:
    import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: PaySampleApp(),
    );
  }
}

class PaySampleApp extends StatefulWidget {
  const PaySampleApp({super.key});

  @override
  State<PaySampleApp> createState() => _PaySampleAppState();
}

class _PaySampleAppState extends State<PaySampleApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google Pay Codelab'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Transaction info and errors will be logged to the console.'),
          ],
        ),
      ),
    );
  }
}

3. Google Pay konfigurieren

Für eine Google Pay-Zahlungsanfrage ist ein Anfrageobjekt erforderlich. Das hier als _paymentItems 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.

  1. Fügen Sie lib/main.dart die Google Pay-Konstanten hinzu:
import 'package:pay/pay.dart';

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '14.95',
    status: PaymentItemStatus.final_price,
  )
];
  1. Fügen Sie die JSON-Datei mit der Standardzahlungskonfiguration dem Pfad assets/google_pay_config.json hinzu:
  {
    "provider": "google_pay",
    "data": {
      "environment": "TEST",
      "apiVersion": 2,
      "apiVersionMinor": 0,
      "allowedPaymentMethods": [
        {
          "type": "CARD",
          "tokenizationSpecification": {
            "type": "PAYMENT_GATEWAY",
            "parameters": {
              "gateway": "example",
              "gatewayMerchantId": "exampleGatewayMerchantId"
            }
          },
          "parameters": {
            "allowedCardNetworks": ["VISA", "MASTERCARD"],
            "allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],
            "billingAddressRequired": true,
            "billingAddressParameters": {
              "format": "FULL",
              "phoneNumberRequired": true
            }
          }
        }
      ],
      "merchantInfo": {
        "merchantName": "Example Merchant Name"
      },
      "transactionInfo": {
        "countryCode": "US",
        "currencyCode": "USD"
      }
    }
  }

Ressourcen

  • 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. Google Pay-Button hinzufügen

Die pay-Bibliothek enthält eine native Google Pay-Schaltflächenkomponente.

Aktualisieren Sie die _PaySampleAppState-Klasse in lib/main.dart mit dem folgenden Code:

class _PaySampleAppState extends State<PaySampleApp> {
  late final Future<PaymentConfiguration> _gpayConfig;

  void onGooglePayResult(paymentResult) {
    // Send 'token' to your payment service provider (PSP)
    print(paymentResult);
  }

  @override
  void initState() {
    super.initState();
    _gpayConfig = PaymentConfiguration.fromAsset('google_pay_config.json');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Google Pay Codelab')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FutureBuilder<PaymentConfiguration>(
              future: _gpayConfig,
              builder: (context, snapshot) {
                if (snapshot.connectionState != ConnectionState.done) {
                  return const Center(child: CircularProgressIndicator());
                }
                if (snapshot.hasError || !snapshot.hasData) {
                  return const Text('Error loading Google Pay config');
                }
                return GooglePayButton(
                  paymentConfiguration: snapshot.data!,
                  onPaymentResult: onGooglePayResult,
                  paymentItems: _paymentItems,
                  height: 48,
                  type: GooglePayButtonType.buy,
                  theme: GooglePayButtonTheme.dark,
                  margin: const EdgeInsets.only(top: 15.0),
                  loadingIndicator: const Center(
                    child: CircularProgressIndicator(),
                  ),
                );
              },
            ),
            const Text('Transaction info and errors will be logged to the console.'),
          ],
        ),
      ),
    );
  }
}

Codeerklärung

  1. _paymentItems beschreibt die Transaktion, die mit diesem Klick auf die Schaltfläche verarbeitet werden soll.
  2. Mit dem paymentConfigurationAsset im GooglePayButton-Widget wird die Konfiguration aus der Datei assets/google_pay_config.json geladen.
  3. Wenn GooglePayButton gedrückt wird, wird die Funktion onGooglePayResult aufgerufen. Diese Funktion empfängt das Zahlungsresultat.
  4. Sobald Sie das Zahlungs-Token aus der Antwort erhalten haben, senden Sie es zur Verarbeitung der Transaktion an Ihr Zahlungs-Gateway.

5. Zahlung bei Klick auslösen

Durch Tippen auf das GooglePayButton wird das Google Pay-Sheet geöffnet und ein Ergebnis zurückgegeben. Ein separater „make payment“-Aufruf ist nicht erforderlich. Fügen Sie Handler hinzu, um das Token zu protokollieren, Fehler anzuzeigen und optional den Tastendruck zu protokollieren.

  1. Fügen Sie den Ergebnishandler in _PaySampleAppState hinzu oder aktualisieren Sie ihn:
void onGooglePayResult(dynamic paymentResult) {
  try {
    final token = paymentResult['paymentMethodData']['tokenizationData']['token'];
    debugPrint('Google Pay payment token: $token');
  } catch (e) {
    debugPrint('Unexpected payment result: $e');
  }
}
  1. Aktualisieren Sie GooglePayButton, um Press- und Fehlerhandler einzuschließen:
GooglePayButton(
  paymentConfiguration: snapshot.data!,
  paymentItems: _paymentItems,
  onPaymentResult: onGooglePayResult,
  onError: (Object err) => debugPrint('Google Pay error: $err'),
  onPressed: () => debugPrint('Google Pay button pressed'),
  height: 48,
  type: GooglePayButtonType.buy,
  theme: GooglePayButtonTheme.dark,
  margin: const EdgeInsets.only(top: 15.0),
  loadingIndicator: const Center(child: CircularProgressIndicator()),
)

Hinweise

  • Durch das Tippen wird das Zahlungsformular aufgerufen und onPaymentResult erhält die Nutzlast.
  • Senden Sie das Token in der Produktion an Ihren Zahlungsdienstleister, um die Belastung abzuschließen.

6. Fazit

Sie haben dieses Codelab abgeschlossen. Sie haben gelernt, wie Sie die Google Pay API in eine Flutter-App für Android einbinden.

Projekt ausführen

Führen Sie den folgenden Befehl aus, um die App zu starten:

flutter run

So geht es weiter

Zusätzliche Ressourcen