API Google Pay pour Flutter sur Android

1. Introduction

Objectifs de l'atelier

À la fin de cet atelier de programmation, vous disposerez d'une application Flutter viable minimale avec une intégration Google Pay fonctionnelle pour Android. Ce projet récupère un jeton de paiement qui peut être envoyé à un fournisseur de services de paiement pour traitement.

Points abordés

  • Installer et configurer la bibliothèque Google Pay Flutter
  • Afficher le bouton Google Pay et gérer les clics
  • Demander un jeton de paiement à Google Pay

Ce dont vous avez besoin

  • Un éditeur de texte de votre choix pour modifier les fichiers Dart.
  • Un environnement de développement Flutter configuré pour Android.
  • Pour la production, vous aurez besoin d'un Google Pay merchantId. L'inscription à la Google Pay & Wallet Console ne prend qu'une minute. Vous pouvez donc le faire dès maintenant.

2. Créer le projet Flutter

Créer des fichiers de projet

  1. Créez un nouveau projet Flutter nommé googlepay_flutter.
    flutter create googlepay_flutter
  2. Installez la bibliothèque Google Pay Flutter.
    cd googlepay_flutter
flutter pub add pay
  3. Ouvrez lib/main.dart dans l'IDE de votre choix et remplacez le contenu par le code suivant :
    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. Configurer Google Pay

Une demande de paiement Google Pay nécessite un objet de requête. L'objet défini ici comme _paymentItems contient les paramètres communs minimaux pour toutes les requêtes. Des paramètres supplémentaires seront ajoutés en fonction de la requête effectuée, que nous examinerons dans cet atelier de programmation.

  1. Ajoutez les constantes de configuration Google Pay à lib/main.dart :
import 'package:pay/pay.dart';

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '14.95',
    status: PaymentItemStatus.final_price,
  )
];
  1. Ajoutez le fichier JSON de configuration de paiement par défaut au chemin d'accès 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"
      }
    }
  }

Ressources

  • Documentation de référence sur les API : documentation sur les objets de requête de l'API Google Pay
  • Documentation de référence sur les API : consultez PaymentMethod pour en savoir plus sur les méthodes d'autorisation autorisées, les réseaux de cartes autorisés et les spécifications de tokenisation, y compris la valeur de passerelle appropriée.

4. Ajouter le bouton Google Pay

La bibliothèque pay inclut un composant de bouton Google Pay natif.

Mettez à jour la classe _PaySampleAppState dans lib/main.dart avec le code suivant :

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

Explication du code

  1. _paymentItems décrit la transaction à traiter lorsque l'utilisateur clique sur ce bouton.
  2. Le paymentConfigurationAsset du widget GooglePayButton charge la configuration à partir du fichier assets/google_pay_config.json.
  3. Lorsque l'utilisateur appuie sur GooglePayButton, la fonction onGooglePayResult est appelée. Cette fonction reçoit le résultat du paiement.
  4. Une fois que vous disposez du jeton de paiement de la réponse, vous l'envoyez à votre passerelle de paiement pour traiter la transaction.

5. Déclencher le paiement en un clic

Lorsque l'utilisateur appuie sur GooglePayButton, la fiche Google Pay s'ouvre et renvoie un résultat. Aucun appel "effectuer un paiement" distinct n'est requis. Ajoutez des gestionnaires pour enregistrer le jeton, afficher les erreurs et, éventuellement, enregistrer l'appui sur le bouton.

  1. Ajoutez ou mettez à jour le gestionnaire de résultats dans _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. Mettez à jour GooglePayButton pour inclure les gestionnaires d'appui et d'erreurs :
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()),
)

Remarques

  • L'appui lui-même déclenche la fiche de paiement. onPaymentResult reçoit la charge utile.
  • En production, envoyez le jeton à votre fournisseur de services de paiement pour finaliser le débit.

6. Conclusion

Félicitations ! Vous avez terminé cet atelier de programmation. Vous avez appris à intégrer l'API Google Pay dans une application Flutter pour Android.

Exécuter le projet

Exécutez la commande suivante pour démarrer votre application :

flutter run

Étapes suivantes

Ressources supplémentaires