Google Pay API cho Flutter trên Android

1. Giới thiệu

Sản phẩm bạn sẽ tạo ra

Khi hoàn tất lớp học lập trình này, bạn sẽ có một ứng dụng Flutter tối thiểu có thể hoạt động với tính năng tích hợp Google Pay cho Android. Dự án này truy xuất một mã thông báo thanh toán có thể được gửi đến một nhà cung cấp dịch vụ thanh toán để xử lý.

Kiến thức bạn sẽ học được

Cách cài đặt và định cấu hình thư viện Google Pay Flutter
Cách hiển thị nút Google Pay và xử lý các lượt nhấp
Cách yêu cầu mã thông báo thanh toán từ Google Pay

Bạn cần có

Trình chỉnh sửa văn bản mà bạn chọn để chỉnh sửa các tệp Dart.
Môi trường phát triển Flutter được thiết lập cho Android.
Đối với bản phát hành công khai, bạn sẽ cần có một merchantId Google Pay. Bạn chỉ mất một phút để đăng ký tại Google Pay & Wallet Console, vậy nên bạn có thể thực hiện ngay bây giờ.

2. Tạo dự án Flutter

Tạo tệp dự án

Tạo một dự án Flutter mới có tên là googlepay_flutter.
```
flutter create googlepay_flutter
```
Cài đặt thư viện Google Pay Flutter.
```
cd googlepay_flutter
flutter pub add pay
```

Mở lib/main.dart trong IDE mà bạn chọn rồi thay thế nội dung bằng đoạn mã sau:

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. Định cấu hình Google Pay

Yêu cầu thanh toán bằng Google Pay cần có một đối tượng yêu cầu. Đối tượng được xác định ở đây là _paymentItems chứa các chế độ cài đặt chung tối thiểu cho tất cả các yêu cầu. Các chế độ cài đặt bổ sung sẽ được thêm vào tuỳ thuộc vào yêu cầu được đưa ra mà chúng ta sẽ xem xét trong lớp học lập trình này.

Thêm hằng số cấu hình Google Pay vào lib/main.dart:

import 'package:pay/pay.dart';

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '14.95',
    status: PaymentItemStatus.final_price,
  )
];

Thêm tệp json cấu hình thanh toán mặc định vào đường dẫn 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"
      }
    }
  }

Tài nguyên

Tài liệu tham khảo API: Tài liệu về các đối tượng yêu cầu của Google Pay API
Tài liệu tham khảo về API: Tham khảo PaymentMethod để biết thêm thông tin về các phương thức uỷ quyền được phép, mạng thẻ được phép và quy cách mã hoá bao gồm cả giá trị cổng phù hợp.

4. Thêm nút Google Pay

Thư viện pay bao gồm một thành phần nút Google Pay gốc.

Cập nhật lớp _PaySampleAppState trong lib/main.dart bằng mã sau:

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

Giải thích mã

_paymentItems mô tả giao dịch cần được xử lý khi người dùng nhấp vào nút này.
paymentConfigurationAsset trong tiện ích GooglePayButton sẽ tải cấu hình từ tệp assets/google_pay_config.json.
Khi nhấn GooglePayButton, hàm onGooglePayResult sẽ được gọi. Hàm này nhận kết quả thanh toán.
Sau khi nhận được mã thông báo thanh toán từ phản hồi, bạn sẽ gửi mã thông báo đó đến cổng thanh toán để xử lý giao dịch.

5. Kích hoạt thanh toán khi nhấp

Khi nhấn vào GooglePayButton, trang Google Pay sẽ mở ra và trả về một kết quả. Bạn không cần thực hiện lệnh gọi "thanh toán" riêng biệt. Thêm trình xử lý để ghi lại mã thông báo, lỗi bề mặt và tuỳ ý ghi lại thao tác nhấn nút.

Thêm hoặc cập nhật trình xử lý kết quả bên trong _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');
  }
}

Cập nhật GooglePayButton để thêm trình xử lý thao tác nhấn và lỗi:

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()),
)

Ghi chú

Thao tác nhấn sẽ kích hoạt trang thanh toán; onPaymentResult nhận tải trọng.
Trong quá trình phát hành công khai, hãy gửi mã thông báo đến nhà cung cấp dịch vụ thanh toán của bạn để hoàn tất việc tính phí.

6. Kết luận

Chúc mừng bạn đã hoàn thành Lớp học lập trình này! Bạn đã tìm hiểu cách tích hợp Google Pay API vào một ứng dụng Flutter cho Android.

Chạy dự án

Chạy lệnh sau để khởi động ứng dụng:

flutter run

Nội dung tiếp theo nên tìm hiểu

Xem danh sách kiểm tra tích hợp

Tài nguyên khác

Tham gia cuộc trò chuyện trong kênh#payments trên Discord
Theo dõi @GooglePayDevs trên X
Xem các video liên quan đến Google Pay trên YouTube

Google Pay API cho Flutter trên Android Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.