API Google Pay para Flutter no Android

1. Introdução

O que você vai criar

Ao concluir este codelab, você terá um app do 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 escolha para editar arquivos Dart.
  • Um ambiente de desenvolvimento do Flutter configurado para Android.
  • Para produção, você vai precisar de um merchantId do Google Pay. Leva apenas um minuto para se registrar no Console do Google Pay e da Carteira. Então, faça isso agora.

2. Criar o projeto do Flutter

Criar arquivos de projeto

  1. Crie um 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 no ambiente de desenvolvimento integrado de sua 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

  • Referência da API: documentação dos objetos de solicitação da API Google Pay
  • Referência da API: consulte PaymentMethod para mais informações sobre os métodos de autorização e as redes de cartão permitidos, além das especificações de tokenização, incluindo o valor de gateway adequado.

4. Adicionar o botão do Google Pay

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

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

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 deve ser processada com o clique nesse 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 pagamento com um clique

Ao tocar em GooglePayButton, a página do Google Pay é aberta e um resultado é retornado. Não é necessário fazer uma chamada separada de "fazer 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 manipuladores 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, e onPaymentResult recebe o payload.
  • Em 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 seguinte comando para iniciar o app:

flutter run

O que fazer depois disso

Outros recursos