Android'de Flutter için Google Pay API'si

1. Giriş

Ne oluşturacaksınız?

Bu codelab'i tamamladığınızda, Android için çalışan bir Google Pay entegrasyonuna sahip minimum düzeyde işlevsel bir Flutter uygulamanız olacak. Bu proje, işlenmek üzere bir ödeme hizmeti sağlayıcısına gönderilebilecek bir ödeme jetonu alır.

Neler öğreneceksiniz?

  • Google Pay Flutter kitaplığını yükleme ve yapılandırma
  • Google Pay düğmesini görüntüleme ve tıklamaları işleme
  • Google Pay'den ödeme jetonu isteme

İhtiyacınız olanlar

  • Dart dosyalarını düzenlemek için istediğiniz bir metin düzenleyici.
  • Android için ayarlanmış bir Flutter geliştirme ortamı.
  • Üretim için Google Pay merchantId gerekir. Google Pay ve Cüzdan Konsolu'na kaydolmak yalnızca bir dakika sürer. Bu nedenle, kaydınızı hemen yapabilirsiniz.

2. Flutter projesini oluşturun

Proje dosyaları oluşturma

  1. googlepay_flutter adlı yeni bir Flutter projesi oluşturun.
    flutter create googlepay_flutter
  2. Google Pay Flutter kitaplığını yükleyin.
    cd googlepay_flutter
flutter pub add pay
  3. Tercih ettiğiniz IDE'de lib/main.dart dosyasını açın ve içeriğini aşağıdaki kodla değiştirin:
    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. Google Pay'i yapılandırma

Google Pay ödeme isteği için istek nesnesi gerekir. Burada _paymentItems olarak tanımlanan nesne, tüm istekler için minimum ortak ayarları içerir. Yapılan isteğe bağlı olarak ek ayarlar eklenecektir. Bu ayarları bu codelab'de inceleyeceğiz.

  1. Google Pay yapılandırma sabitlerini lib/main.dart'ya ekleyin:
import 'package:pay/pay.dart';

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '14.95',
    status: PaymentItemStatus.final_price,
  )
];
  1. Varsayılan ödeme yapılandırması JSON'unu assets/google_pay_config.json yoluna ekleyin:
  {
    "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"
      }
    }
  }

Kaynaklar

  • API Referansı: Google Pay API istek nesneleri dokümanları
  • API Referansı: İzin verilen yetkilendirme yöntemleri, izin verilen kart ağları ve uygun ağ geçidi değeri de dahil olmak üzere belirteç oluşturma spesifikasyonları hakkında daha fazla bilgi için PaymentMethod bölümüne bakın.

4. Google Pay düğmesini ekleme

pay kitaplığı, yerel bir Google Pay düğmesi bileşeni içerir.

lib/main.dart içindeki _PaySampleAppState sınıfını aşağıdaki kodla güncelleyin:

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

Kod açıklaması

  1. _paymentItems, bu düğme tıklamasıyla işlenmesi gereken işlemi açıklar.
  2. GooglePayButton widget'ındaki paymentConfigurationAsset, yapılandırmayı assets/google_pay_config.json dosyasından yükler.
  3. GooglePayButton tuşuna basıldığında onGooglePayResult işlevi çağrılır. Bu işlev, ödeme sonucunu alır.
  4. Yanıtla birlikte ödeme jetonunu aldıktan sonra, işlemi işlemek için ödeme ağ geçidinize gönderirsiniz.

5. Tıklamada ödemeyi tetikleme

GooglePayButton simgesine dokunulduğunda Google Pay sayfası açılır ve sonuç döndürülür. Ayrı bir "ödeme yap" çağrısı gerekmez. Jetonu kaydetmek, hataları göstermek ve isteğe bağlı olarak düğmeye basma işlemini kaydetmek için işleyiciler ekleyin.

  1. _PaySampleAppState içinde sonuç işleyiciyi ekleyin veya güncelleyin:
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. GooglePayButton öğesini, basma ve hata işleyicileri içerecek şekilde güncelleyin:
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()),
)

Notlar

  • Dokunma işlemi, ödeme sayfasını tetikler. onPaymentResult, yükü alır.
  • Üretim ortamında, ödemeyi tamamlamak için jetonu ödeme hizmeti sağlayıcınıza gönderin.

6. Sonuç

Bu Codelab'i tamamladığınız için tebrikler. Google Pay API'yi Android için bir Flutter uygulamasına nasıl entegre edeceğinizi öğrendiniz.

Projeyi yürütme

Uygulamanızı başlatmak için aşağıdaki komutu çalıştırın:

flutter run

Şimdi beni ne bekliyor?

Ek kaynaklar