API Google Pay per Flutter su Android

1. Introduzione

Che cosa creerai

Al termine di questo codelab, avrai un'app Flutter minima e funzionale con un'integrazione di Google Pay funzionante per Android. Questo progetto recupera un token di pagamento che può essere inviato a un fornitore di servizi di pagamento per l'elaborazione.

Obiettivi didattici

  • Come installare e configurare la libreria Flutter di Google Pay
  • Come visualizzare il pulsante Google Pay e gestire i clic
  • Come richiedere un token di pagamento da Google Pay

Che cosa ti serve

  • Un editor di testo a tua scelta per modificare i file Dart.
  • Un ambiente di sviluppo Flutter configurato per Android.
  • Per la produzione, avrai bisogno di un Google Pay merchantId. La registrazione nella Console di Google Pay e Wallet richiede solo un minuto, quindi puoi occupartene subito.

2. Creare il progetto Flutter

Creare i file di progetto

  1. Crea un nuovo progetto Flutter denominato googlepay_flutter.
    flutter create googlepay_flutter
  2. Installa la libreria Flutter di Google Pay.
    cd googlepay_flutter
flutter pub add pay
  3. Apri lib/main.dart nell'IDE che preferisci e sostituisci i contenuti con il seguente codice:
    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. Configurare Google Pay

Una richiesta di pagamento di Google Pay richiede un oggetto della richiesta. L'oggetto definito qui come _paymentItems contiene le impostazioni comuni minime per tutte le richieste. Verranno aggiunte impostazioni aggiuntive a seconda della richiesta effettuata, che esamineremo in questo codelab.

  1. Aggiungi le costanti di configurazione di Google Pay a lib/main.dart:
import 'package:pay/pay.dart';

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '14.95',
    status: PaymentItemStatus.final_price,
  )
];
  1. Aggiungi il file JSON di configurazione di pagamento predefinito al percorso 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"
      }
    }
  }

Risorse

  • Riferimento API: documentazione sugli oggetti della richiesta dell'API Google Pay
  • Riferimento API: consulta PaymentMethod per ulteriori informazioni sui metodi di autorizzazione consentiti, sulle reti di carte consentite e sulle specifiche di tokenizzazione, incluso il valore del gateway corretto.

4. Aggiungere il pulsante Google Pay

La libreria pay include un componente del pulsante Google Pay nativo.

Aggiorna la classe _PaySampleAppState in lib/main.dart con il seguente codice:

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

Spiegazione del codice

  1. _paymentItems descrive la transazione che deve essere elaborata con questo clic sul pulsante.
  2. Il paymentConfigurationAsset nel widget GooglePayButton carica la configurazione dal file assets/google_pay_config.json.
  3. Quando viene premuto GooglePayButton, viene chiamata la funzione onGooglePayResult. Questa funzione riceve il risultato del pagamento.
  4. Una volta ottenuto il token di pagamento dalla risposta, lo invierai al tuo gateway di pagamento per l'elaborazione della transazione.

5. Attivare il pagamento al clic

Se tocchi GooglePayButton, si apre il foglio di Google Pay e viene restituito un risultato. Non è necessaria una chiamata "effettua pagamento" separata. Aggiungi gestori per registrare il token, visualizzare gli errori e, facoltativamente, registrare la pressione del pulsante.

  1. Aggiungi o aggiorna il gestore dei risultati all'interno di _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. Aggiorna GooglePayButton in modo da includere i gestori di pressione ed errori:
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()),
)

Note

  • Il tocco stesso attiva il foglio di pagamento; onPaymentResult riceve il payload.
  • In produzione, invia il token al tuo fornitore di servizi di pagamento per completare l'addebito.

6. Conclusione

Congratulazioni per aver completato questo codelab! Hai imparato a integrare l'API Google Pay in un'app Flutter per Android.

Eseguire il progetto

Esegui il seguente comando per avviare l'app:

flutter run

Come procedere

Risorse aggiuntive