Эта страница переведена с помощью Cloud Translation API.

API Google Pay для Flutter на Android

1. Введение

Что вы построите

По завершении этого практического занятия у вас будет минимально жизнеспособное Flutter-приложение с работающей интеграцией Google Pay для Android. В этом проекте вы получите платежный токен, который можно отправить поставщику платежных услуг для обработки.

Что вы узнаете

Как установить и настроить библиотеку Google Pay Flutter
Как отобразить кнопку Google Pay и обрабатывать клики.
Как запросить платежный токен в Google Pay

Что вам понадобится

Текстовый редактор на ваш выбор для редактирования файлов Dart.
Среда разработки Flutter для Android.
Для запуска в производство вам потребуется merchantId Google Pay. Регистрация в консоли Google Pay & Wallet займет всего минуту, так что можете позаботиться об этом прямо сейчас.

2. Создайте проект Flutter.

Создайте файлы проекта

Создайте новый проект Flutter с именем googlepay_flutter .
```
flutter create googlepay_flutter
```
Установите библиотеку Google Pay Flutter.
```
cd googlepay_flutter
flutter pub add pay
```

Откройте lib/main.dart в вашей IDE и замените его содержимое следующим кодом:

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

Для отправки платежа через Google Pay требуется объект запроса. Объект, определенный здесь как _paymentItems содержит минимальный набор общих настроек для всех запросов. Дополнительные настройки будут добавляться в зависимости от сделанного запроса, что мы рассмотрим в этом практическом занятии.

Добавьте константы конфигурации Google Pay в lib/main.dart :

import 'package:pay/pay.dart';

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '14.95',
    status: PaymentItemStatus.final_price,
  )
];

Добавьте JSON-файл конфигурации платежей по умолчанию в путь 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"
      }
    }
  }

Ресурсы

Справочник по API : документация по объектам запросов API Google Pay.
Справочник API : Для получения дополнительной информации о разрешенных методах авторизации, разрешенных платежных сетях и спецификациях токенизации, включая правильное значение платежного шлюза, обратитесь к разделу PaymentMethod

4. Добавьте кнопку Google Pay.

Библиотека pay включает в себя встроенный компонент кнопки Google Pay.

Обновите класс _PaySampleAppState в lib/main.dart , добавив следующий код:

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

пояснение к коду

_paymentItems описывает транзакцию, которая должна быть обработана при нажатии этой кнопки.
Компонент paymentConfigurationAsset в виджете GooglePayButton загружает конфигурацию из файла assets/google_pay_config.json .
При нажатии GooglePayButton вызывается функция onGooglePayResult . Эта функция получает результат платежа.
Получив токен платежа из ответа, вы отправляете его в свой платежный шлюз для обработки транзакции.

5. Запуск платежа по клику.

Нажатие на GooglePayButton открывает окно Google Pay и возвращает результат — отдельный вызов функции «совершить платеж» не требуется. Добавьте обработчики для регистрации токена, отображения ошибок и, при необходимости, регистрации нажатия кнопки.

Добавьте или обновите обработчик результатов внутри _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');
  }
}

Обновите GooglePayButton , добавив обработчики нажатий и ошибок:

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()),
)

Примечания

Само нажатие кнопки запускает платежную форму; onPaymentResult получает данные платежа.
В процессе эксплуатации отправьте токен своему поставщику платежных услуг для завершения транзакции.

6. Заключение

Поздравляем с завершением этого практического занятия! Вы научились интегрировать API Google Pay в приложение Flutter для Android.

Запустите проект

Выполните следующую команду, чтобы запустить приложение:

flutter run

Что делать дальше?

Ознакомьтесь с контрольным списком интеграции.

Дополнительные ресурсы

Присоединяйтесь к обсуждению в канале #payments в Discord.
Подписывайтесь на @GooglePayDevs в X
Смотрите видеоролики, посвященные Google Pay, на YouTube.