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. Dieses Projekt ruft ein Zahlungstoken ab, das zur Verarbeitung an einen Zahlungsdienstleister gesendet werden kann.

Lerninhalte

  • Google Pay Flutter-Bibliothek installieren und konfigurieren
  • Google Pay-Button 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 eine Google Pay merchantId. Die Registrierung in der Google Pay & Wallet Console dauert nur eine Minute. Sie können sie also jetzt 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 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 gemeinsamen Mindesteinstellungen für alle Anfragen. Je nach Anfrage werden zusätzliche Einstellungen hinzugefügt, die wir in diesem Codelab durchgehen.

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

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '14.95',
    status: PaymentItemStatus.final_price,
  )
];
  1. Fügen Sie die JSON-Standardkonfiguration für Zahlungen zum 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 Google Pay API-Anfrageobjekten
  • API-Referenz: Unter PaymentMethod finden Sie weitere Informationen zu den zulässigen Autorisierungsmethoden, zulässigen Kartennetzwerken und Tokenisierungsspezifikationen, einschließlich des richtigen Gateway-Werts.

4. Google Pay-Button hinzufügen

Die pay Bibliothek enthält eine native Google Pay-Button-Komponente.

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.'),
          ],
        ),
      ),
    );
  }
}

Erläuterung zum Code

  1. _paymentItems beschreibt die Transaktion, die mit diesem Button-Klick verarbeitet werden soll.
  2. Mit paymentConfigurationAsset im Widget GooglePayButton wird die Konfiguration aus der Datei assets/google_pay_config.json geladen.
  3. Wenn auf GooglePayButton geklickt wird, wird die Funktion onGooglePayResult aufgerufen. Diese Funktion empfängt das Zahlungsergebnis.
  4. Sobald Sie das Zahlungstoken aus der Antwort haben, senden Sie es an Ihr Zahlungsgateway, um die Transaktion zu verarbeiten.

5. Zahlung per Klick auslösen

Wenn Sie auf GooglePayButton tippen, wird das Google Pay-Sheet geöffnet und ein Ergebnis zurückgegeben. Ein separater Aufruf zum Ausführen der Zahlung ist nicht erforderlich. Fügen Sie Handler hinzu, um das Token zu protokollieren, Fehler anzuzeigen und optional den Button-Klick 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 Handler für Klicks und Fehler einzufügen:
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 selbst wird das Zahlungs-Sheet ausgelöst. onPaymentResult empfängt 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 Ihre App zu starten:

flutter run

So geht es weiter

Zusätzliche Ressourcen