Google Pay API for Flutter na Androida

1. Wprowadzenie

Co utworzysz

Po ukończeniu tego ćwiczenia będziesz mieć działającą aplikację Flutter z zintegrowaną usługą Google Pay na Androida. Ten projekt pobiera token płatności, który może zostać wysłany do dostawcy usług płatniczych w celu przetworzenia.

Czego się nauczysz

  • Instalowanie i konfigurowanie biblioteki Google Pay Flutter
  • Wyświetlanie przycisku Google Pay i obsługa kliknięć
  • Jak poprosić o token płatności w Google Pay

Czego potrzebujesz

  • dowolny edytor tekstu do edytowania plików Dart;
  • Środowisko programistyczne Fluttera skonfigurowane pod kątem Androida.
  • W przypadku środowiska produkcyjnego potrzebujesz merchantId Google Pay. Rejestracja w Konsoli usług Google Pay i Portfela Google zajmuje tylko minutę, więc warto to zrobić od razu.

2. Tworzenie projektu Fluttera

Tworzenie plików projektu

  1. Utwórz nowy projekt Flutter o nazwie googlepay_flutter.
    flutter create googlepay_flutter
  2. Zainstaluj bibliotekę Google Pay Flutter.
    cd googlepay_flutter
flutter pub add pay
  3. Otwórz plik lib/main.dart w wybranym IDE i zastąp jego zawartość tym kodem:
    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. Konfigurowanie Google Pay

Żądanie płatności Google Pay wymaga obiektu żądania. Obiekt zdefiniowany tutaj jako _paymentItems zawiera minimalne wspólne ustawienia wszystkich żądań. W zależności od zgłoszenia zostaną dodane dodatkowe ustawienia, które omówimy w tym laboratorium.

  1. Dodaj stałe konfiguracji Google Pay do parametru lib/main.dart:
import 'package:pay/pay.dart';

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '14.95',
    status: PaymentItemStatus.final_price,
  )
];
  1. Dodaj domyślną konfigurację płatności w formacie JSON do ścieżki assets/google_pay_config.json:
  {
    "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"
      }
    }
  }

Zasoby

  • Dokumentacja API: dokumentacja obiektów żądań interfejsu Google Pay API
  • Dokumentacja interfejsu API: więcej informacji o dozwolonych metodach autoryzacji, dozwolonych sieciach kart i specyfikacjach tokenizacji, w tym o prawidłowej wartości bramy, znajdziesz w PaymentMethod.

4. Dodawanie przycisku Google Pay

Biblioteka pay zawiera natywny komponent przycisku Google Pay.

Zaktualizuj klasę _PaySampleAppState w pliku lib/main.dart za pomocą tego kodu:

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

Wyjaśnienie kodu

  1. _paymentItems opisuje transakcję, która powinna zostać przetworzona po kliknięciu tego przycisku.
  2. Widżet paymentConfigurationAsset w GooglePayButton wczytuje konfigurację z pliku assets/google_pay_config.json.
  3. Gdy naciśniesz GooglePayButton, wywoływana jest funkcja onGooglePayResult. Ta funkcja otrzymuje wynik płatności.
  4. Gdy uzyskasz token płatności z odpowiedzi, wyślij go do bramy płatności w celu przetworzenia transakcji.

5. Wywoływanie płatności po kliknięciu

Kliknięcie ikony GooglePayButton otwiera arkusz Google Pay i zwraca wynik – nie jest wymagane osobne wywołanie „dokonaj płatności”. Dodaj moduły obsługi, aby rejestrować token, wyświetlać błędy i opcjonalnie rejestrować naciśnięcia przycisku.

  1. Dodaj lub zaktualizuj moduł obsługi wyników w sekcji _PaySampleAppState:
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. Zaktualizuj GooglePayButton, aby uwzględnić obsługę naciśnięć i błędów:
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()),
)

Uwagi

  • Kliknięcie powoduje wyświetlenie arkusza płatności, a onPaymentResult otrzymuje ładunek.
  • W środowisku produkcyjnym wyślij token do dostawcy usług płatniczych, aby dokończyć obciążenie.

6. Podsumowanie

Gratulujemy ukończenia tego ćwiczenia! Wiesz już, jak zintegrować Google Pay API z aplikacją Flutter na Androida.

Uruchamianie projektu

Aby uruchomić aplikację, wpisz to polecenie:

flutter run

Co dalej

Dodatkowe materiały