Google Pay API untuk Flutter di Android

1. Pengantar

Yang akan Anda build

Setelah menyelesaikan codelab ini, Anda akan memiliki aplikasi Flutter yang layak minimum dengan integrasi Google Pay yang berfungsi untuk Android. Project ini mengambil token pembayaran yang dapat dikirim ke penyedia layanan pembayaran untuk diproses.

Yang akan Anda pelajari

  • Cara menginstal dan mengonfigurasi library Google Pay Flutter
  • Cara menampilkan tombol Google Pay dan menangani klik
  • Cara meminta token pembayaran dari Google Pay

Yang Anda butuhkan

  • Editor teks pilihan Anda untuk mengedit file Dart.
  • Lingkungan pengembangan Flutter yang disiapkan untuk Android.
  • Untuk produksi, Anda memerlukan merchantId Google Pay. Hanya perlu satu menit untuk mendaftar di Konsol Google Pay & Wallet, jadi sebaiknya selesaikan sekarang.

2. Buat project Flutter

Membuat file project

  1. Buat project Flutter baru bernama googlepay_flutter.
    flutter create googlepay_flutter
  2. Instal library Google Pay Flutter.
    cd googlepay_flutter
flutter pub add pay
  3. Buka lib/main.dart di IDE pilihan Anda dan ganti kontennya dengan kode berikut:
    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. Mengonfigurasi Google Pay

Permintaan pembayaran Google Pay memerlukan objek permintaan. Objek yang ditentukan di sini sebagai _paymentItems berisi setelan umum minimum untuk semua permintaan. Setelan tambahan akan ditambahkan bergantung pada permintaan yang dibuat dan akan kita tinjau dalam codelab ini.

  1. Tambahkan konstanta konfigurasi Google Pay ke lib/main.dart:
import 'package:pay/pay.dart';

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '14.95',
    status: PaymentItemStatus.final_price,
  )
];
  1. Tambahkan json konfigurasi pembayaran default ke jalur 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"
      }
    }
  }

Resource

  • Referensi API: Dokumentasi objek permintaan Google Pay API
  • Referensi API: Lihat PaymentMethod untuk mengetahui informasi selengkapnya tentang metode otorisasi yang diizinkan, jaringan kartu yang diizinkan, dan spesifikasi tokenisasi termasuk nilai gateway yang tepat.

4. Menambahkan tombol Google Pay

Library pay mencakup komponen tombol Google Pay native.

Perbarui class _PaySampleAppState di lib/main.dart dengan kode berikut:

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

Penjelasan kode

  1. _paymentItems menjelaskan transaksi yang harus diproses dengan klik tombol ini.
  2. paymentConfigurationAsset di widget GooglePayButton memuat konfigurasi dari file assets/google_pay_config.json.
  3. Saat GooglePayButton ditekan, fungsi onGooglePayResult dipanggil. Fungsi ini menerima hasil pembayaran.
  4. Setelah mendapatkan token pembayaran dari respons, Anda akan mengirimkannya ke gateway pembayaran untuk memproses transaksi.

5. Memicu pembayaran saat diklik

Mengetuk GooglePayButton akan membuka halaman Google Pay dan menampilkan hasil — tidak diperlukan panggilan "lakukan pembayaran" terpisah. Tambahkan pengendali untuk mencatat token, menampilkan error, dan secara opsional mencatat penekanan tombol.

  1. Tambahkan atau perbarui pengendali hasil di dalam _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. Perbarui GooglePayButton untuk menyertakan handler error dan tekan:
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()),
)

Catatan

  • Ketukan itu sendiri memicu lembar pembayaran; onPaymentResult menerima payload.
  • Dalam produksi, kirim token ke penyedia layanan pembayaran Anda untuk menyelesaikan tagihan.

6. Kesimpulan

Selamat, Anda telah menyelesaikan Codelab ini. Anda telah mempelajari cara mengintegrasikan Google Pay API ke aplikasi Flutter untuk Android.

Menjalankan project

Jalankan perintah berikut untuk memulai aplikasi Anda:

flutter run

Tujuan berikutnya

Referensi lainnya