API de Google Pay para Flutter en Android

1. Introducción

Qué compilarás

Al completar este codelab, tendrás una app de Flutter mínima viable con una integración de Google Pay para Android. Este proyecto recupera un token de pago que se puede enviar a un proveedor de servicios de pago para su procesamiento.

Qué aprenderás

  • Cómo instalar y configurar la biblioteca de Google Pay para Flutter
  • Cómo mostrar el botón de Google Pay y controlar los clics
  • Cómo solicitar un token de pago de Google Pay

Requisitos

  • Un editor de texto de tu elección para editar archivos de Dart
  • Un entorno de desarrollo de Flutter configurado para Android
  • Para la producción, necesitarás un Google Pay merchantId. Solo toma un minuto registrarse en Google Pay & Wallet Console, así que puedes hacerlo ahora.

2. Crea el proyecto de Flutter

Crea archivos del proyecto

  1. Crea un proyecto nuevo de Flutter llamado googlepay_flutter.
    flutter create googlepay_flutter
  2. Instala la biblioteca de Google Pay para Flutter.
    cd googlepay_flutter
flutter pub add pay
  3. Abre lib/main.dart en el IDE que prefieras y reemplaza el contenido por el siguiente código:
    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. Configura Google Pay

Una solicitud de pago de Google Pay requiere un objeto de solicitud. El objeto definido aquí como _paymentItems contiene la configuración mínima común para todas las solicitudes. Se agregarán parámetros de configuración adicionales según la solicitud realizada, que revisaremos en este codelab.

  1. Agrega las constantes de configuración de Google Pay a lib/main.dart:
import 'package:pay/pay.dart';

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '14.95',
    status: PaymentItemStatus.final_price,
  )
];
  1. Agrega el archivo JSON de configuración de pago predeterminado a la ruta de acceso 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

  • Referencia de la API: Documentación de los objetos de solicitud de la API de Google Pay
  • Referencia de la API: Consulta PaymentMethod para obtener más información sobre los métodos de autorización permitidos, las redes de tarjetas permitidas y las especificaciones de tokenización, incluido el valor de puerta de enlace adecuado.

4. Agrega el botón de Google Pay

La biblioteca pay incluye un componente nativo del botón de Google Pay.

Actualiza la clase _PaySampleAppState en lib/main.dart con el siguiente 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.'),
          ],
        ),
      ),
    );
  }
}

Explicación del código

  1. _paymentItems describe la transacción que se debe procesar con este clic en el botón.
  2. El paymentConfigurationAsset en el widget GooglePayButton carga la configuración del archivo assets/google_pay_config.json.
  3. Cuando se presiona GooglePayButton, se llama a la función onGooglePayResult. Esta función recibe el resultado del pago.
  4. Una vez que tengas el token de pago de la respuesta, lo enviarás a tu puerta de enlace de pago para procesar la transacción.

5. Activa el pago con un clic

Si presionas GooglePayButton, se abrirá la hoja de Google Pay y se mostrará un resultado. No se requiere una llamada "realizar pago" independiente. Agrega controladores para registrar el token, mostrar errores y, de manera opcional, registrar la presión del botón.

  1. Agrega o actualiza el controlador de resultados dentro de _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. Actualiza GooglePayButton para incluir controladores de presión y errores:
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()),
)

Notas

  • La presión en sí activa la hoja de pago; onPaymentResult recibe la carga útil.
  • En producción, envía el token a tu proveedor de servicios de pago para completar el cargo.

6. Conclusión

¡Felicitaciones por completar este codelab! Aprendiste a integrar la API de Google Pay en una app de Flutter para Android.

Cómo ejecutar el proyecto

Ejecuta el siguiente comando para iniciar tu app:

flutter run

Lo que vendrá

Recursos adicionales