API Google Pay para Flutter no Android

1. Introdução

O que você vai criar

Ao concluir este codelab, você terá um app Flutter mínimo viável com uma integração funcional do Google Pay para Android. Esse projeto recupera um token de pagamento que pode ser enviado a um provedor de serviços de pagamento para processamento.

O que você vai aprender

  • Como instalar e configurar a biblioteca do Google Pay para Flutter
  • Como mostrar o botão do Google Pay e processar cliques
  • Como solicitar um token de pagamento do Google Pay

O que é necessário

  • Um editor de texto de sua preferência para editar arquivos Dart.
  • Um ambiente de desenvolvimento do Flutter configurado para Android.
  • Para produção, você vai precisar de um Google Pay merchantId. Leva apenas um minuto para se registrar no console do Google Pay e da Carteira. Então, aproveite para fazer isso agora.

2. Criar o projeto do Flutter

Criar arquivos de projeto

  1. Crie um novo projeto do Flutter chamado googlepay_flutter.
    flutter create googlepay_flutter
  2. Instale a biblioteca do Google Pay para Flutter.
    cd googlepay_flutter
flutter pub add pay
  3. Abra lib/main.dart na sua IDE de preferência e substitua o conteúdo pelo código a seguir:
    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. Configurar o Google Pay

Uma solicitação de pagamento do Google Pay exige um objeto de solicitação. O objeto definido aqui como _paymentItems contém as configurações comuns mínimas para todas as solicitações. Outras configurações serão adicionadas dependendo da solicitação feita, que vamos analisar neste codelab.

  1. Adicione as constantes de configuração do Google Pay a lib/main.dart:
import 'package:pay/pay.dart';

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '14.95',
    status: PaymentItemStatus.final_price,
  )
];
  1. Adicione o JSON de configuração de pagamento padrão ao caminho 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"
      }
    }
  }

Recursos

4. Incluir o botão do Google Pay

A biblioteca pay inclui um componente de botão nativo do Google Pay.

Atualize a classe _PaySampleAppState em lib/main.dart com o código a seguir:

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

Explicar códigos

  1. _paymentItems descreve a transação que precisa ser processada com esse clique de botão.
  2. O paymentConfigurationAsset no widget GooglePayButton carrega a configuração do arquivo assets/google_pay_config.json.
  3. Quando o GooglePayButton é pressionado, a função onGooglePayResult é chamada. Essa função recebe o resultado do pagamento.
  4. Depois de receber o token de pagamento da resposta, envie-o ao gateway de pagamento para processar a transação.

5. Acionar o pagamento com um clique

Tocar no GooglePayButton abre a página do Google Pay e retorna um resultado. Não é necessário fazer uma chamada separada de "efetuar pagamento". Adicione gerenciadores para registrar o token, mostrar erros e, opcionalmente, registrar o pressionamento do botão.

  1. Adicione ou atualize o gerenciador de resultados em _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. Atualize o GooglePayButton para incluir gerenciadores de erros e de pressionamento:
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()),
)

Observações

  • O toque aciona a página de pagamento. onPaymentResult recebe o payload.
  • Na produção, envie o token ao provedor de serviços de pagamento para concluir a cobrança.

6. Conclusão

Parabéns por concluir este codelab. Você aprendeu a integrar a API Google Pay a um app Flutter para Android.

Executar o projeto

Execute o comando a seguir para iniciar o app:

flutter run

O que fazer depois disso

Outros recursos