Flutter谷歌支付集成插件tap_google_pay_kit_flutter的使用

Flutter谷歌支付集成插件tap_google_pay_kit_flutter的使用

TapGooglePayKit-Flutter

A standalone Flutter kit for handling Google Pay™ (仅适用于Android)


开始使用

1. 安装

pubspec.yaml 文件中添加以下依赖项:

dependencies:
  tap_google_pay_kit_flutter: ^0.0.4

运行 flutter pub get 来安装插件。


2. 额外的Android配置

要使用Google Pay功能,您需要进行一些额外的配置:

  1. build.gradle 文件中添加以下依赖:

    implementation "com.google.android.gms:play-services-wallet:18.1.3"
    
  2. 确保您的 minSdkVersion 是 21 或更高版本:

    minSdkVersion 21
    targetSdkVersion 32
    
  3. AndroidManifest.xml 文件中,确保在 <application> 标签内添加以下元数据:

    <meta-data
        android:name="com.google.android.gms.wallet.api.enabled"
        android:value="true" />
    

配置您的应用

在使用 TapGooglePayKit 之前,需要进行初始化配置。请确保这些代码在任何使用 TapGooglePayKit 的地方之前被调用。

/**
 * 配置SDK。
 */
TapGooglePayKitFlutter.configureSDK(
  secretKey: "sk_test_xxxxxxxxxxxxxxxxxx", // 您的密钥
  bundleId: "com.xxx.xxxxxxx",           // 您的应用包名
  countryCode: "US",                     // 国家代码
  transactionCurrency: "USD",            // 交易货币
  sdkMode: SDKMode.Sandbox,              // 测试模式
  allowedMethods: AllowedMethods.ALL,    // 允许的方法
  allowedCardNetworks: [AllowedCardNetworks.VISA.name], // 允许的卡网络
  gatewayID: "xxxxx",                    // 网关ID
  gatewayMerchantID: "122xxxxx",         // 商户ID
  amount: "23",                          // 交易金额
);

SDK 枚举

以下是SDK中的一些常用枚举值:

SDK 模式

sdkMode: SDKMode.Sandbox
  • Sandbox(测试模式)
  • Production(生产模式)

允许的方法

allowedMethods: AllowedMethods.ALL
  • PAN_ONLY
  • CRYPTOGRAM
  • ALL

允许的卡网络

allowedCardNetworks: [AllowedCardNetworks.VISA.name]
  • AMEX
  • MASTERCARD
  • VISA

Google Pay按钮类型

googlePayButtonType: GooglePayButtonType.NORMAL_GOOGLE_PAY
  • BUY_WITH_GOOGLE_PAY
  • DONATE_WITH_GOOGLE_PAY
  • NORMAL_GOOGLE_PAY
  • PAY_WITH_GOOGLE_PAY
  • SUBSCRIBE_WITH_GOOGLE_PAY
  • CHECKOUT_WITH_GOOGLE_PAY
  • ORDER_WITH_GOOGLE_PAY
  • BOOK_WITH_GOOGLE_PAY

Google Pay按钮

TapGooglePayKitFlutter.googlePayButton(
  googlePayButtonType: GooglePayButtonType.NORMAL_GOOGLE_PAY,
  onTap: () {
    // 调用SDK方法
  },
)

SDK 方法

获取Google Pay令牌

var tapGooglePaySDKResult = await TapGooglePayKitFlutter.getGooglePayToken;

获取Tap令牌

var tapTokenSDKResult = await TapGooglePayKitFlutter.getTapToken;

完整示例

以下是一个完整的示例代码:

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:tap_google_pay_kit_flutter/models/model.dart';
import 'package:tap_google_pay_kit_flutter/tap_google_pay_kit_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var mSDKResponse;

  // 配置应用以使用TapGooglePayKitFlutter
  Future<void> configureApp() async {
    TapGooglePayKitFlutter.configureSDK(
      secretKey: "sk_test_xxxxxxxxxxxxxxxxxx",
      bundleId: "com.xxx.xxxxxxx",
      countryCode: "US",
      transactionCurrency: "USD",
      sdkMode: SDKMode.Sandbox,
      allowedMethods: AllowedMethods.ALL,
      allowedCardNetworks: [AllowedCardNetworks.VISA.name],
      gatewayID: "xxxxx",
      gatewayMerchantID: "122xxxxx",
      amount: "23",
    );
  }

  // 启动SDK并调用TapGooglePayKitFlutter的方法
  Future<void> startSDK() async {
    try {
      configureApp();
      var tapGooglePaySDKResult =
          await TapGooglePayKitFlutter.getGooglePayToken;

      setState(() {
        mSDKResponse = tapGooglePaySDKResult;
      });
    } catch (ex) {
      if (kDebugMode) {
        print("Exception >>>> ${ex.toString()}");
      }
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Google Pay 示例'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              mSDKResponse == null
                  ? "等待用户操作..."
                  : "SDK 响应: ${mSDKResponse.toString()}",
            ),
          ),
        ),
        bottomSheet: TapGooglePayKitFlutter.googlePayButton(
          googlePayButtonType: GooglePayButtonType.NORMAL_GOOGLE_PAY,
          onTap: () {
            startSDK();
          },
        ),
      ),
    );
  }
}

更多关于Flutter谷歌支付集成插件tap_google_pay_kit_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter谷歌支付集成插件tap_google_pay_kit_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


tap_google_pay_kit_flutter 是一个用于在 Flutter 应用中集成 Google Pay 功能的插件。以下是如何使用该插件的详细步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 tap_google_pay_kit_flutter 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  tap_google_pay_kit_flutter: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 配置 Android 项目

android/app/build.gradle 文件中,确保 minSdkVersion 至少为 21。

android {
    defaultConfig {
        minSdkVersion 21
        ...
    }
    ...
}

3. 初始化 Google Pay

在你的 Flutter 项目中,首先需要初始化 Google Pay。

import 'package:tap_google_pay_kit_flutter/tap_google_pay_kit_flutter.dart';

void initializeGooglePay() async {
  bool isGooglePayAvailable = await TapGooglePayKitFlutter.isGooglePayAvailable();
  if (isGooglePayAvailable) {
    // Google Pay 可用,继续初始化
    await TapGooglePayKitFlutter.initialize(
      environment: GooglePayEnvironment.Test, // 或 GooglePayEnvironment.Production
      merchantName: 'Your Merchant Name',
      countryCode: 'US', // 你的国家代码
      currencyCode: 'USD', // 你的货币代码
    );
  } else {
    // Google Pay 不可用,显示错误或备用支付方式
    print('Google Pay is not available on this device.');
  }
}

4. 创建支付请求

接下来,创建一个支付请求并启动 Google Pay 支付流程。

void makePayment() async {
  final paymentRequest = GooglePaymentRequest(
    totalPrice: '10.00', // 总金额
    transactionId: 'txn_123456', // 交易ID
    paymentMethodTokenizationParameters: PaymentMethodTokenizationParameters(
      tokenizationType: 'PAYMENT_GATEWAY',
      parameters: {
        'gateway': 'your_gateway', // 你的支付网关
        'gatewayMerchantId': 'your_merchant_id', // 你的商户ID
      },
    ),
  );

  try {
    final paymentResult = await TapGooglePayKitFlutter.requestPayment(paymentRequest);
    if (paymentResult.status == GooglePayStatus.Success) {
      // 支付成功
      print('Payment successful: ${paymentResult.paymentMethodToken}');
    } else {
      // 支付失败或取消
      print('Payment failed or cancelled: ${paymentResult.status}');
    }
  } catch (e) {
    // 处理异常
    print('Error during payment: $e');
  }
}

5. 处理支付结果

makePayment 方法中,你可以根据 paymentResult.status 来处理支付结果。如果支付成功,你可以获取到 paymentMethodToken,然后将其发送到你的服务器进行进一步处理。

6. 测试和调试

在测试环境中,确保你使用的是 GooglePayEnvironment.Test。在发布应用之前,切换到 GooglePayEnvironment.Production

7. 发布应用

在发布应用之前,确保你已经完成了所有必要的配置,并且已经测试了 Google Pay 功能。

8. 处理错误和异常

在实际应用中,可能会遇到各种错误和异常。确保你的应用能够妥善处理这些情况,并提供适当的用户反馈。

9. 参考文档

如果你在使用过程中遇到问题,可以参考插件的官方文档或 GitHub 仓库,获取更多信息和示例代码。

10. 示例代码

以下是一个完整的示例代码,展示了如何初始化 Google Pay 和发起支付请求:

import 'package:flutter/material.dart';
import 'package:tap_google_pay_kit_flutter/tap_google_pay_kit_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Pay Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              await initializeGooglePay();
              makePayment();
            },
            child: Text('Pay with Google Pay'),
          ),
        ),
      ),
    );
  }
}

void initializeGooglePay() async {
  bool isGooglePayAvailable = await TapGooglePayKitFlutter.isGooglePayAvailable();
  if (isGooglePayAvailable) {
    await TapGooglePayKitFlutter.initialize(
      environment: GooglePayEnvironment.Test,
      merchantName: 'Your Merchant Name',
      countryCode: 'US',
      currencyCode: 'USD',
    );
  } else {
    print('Google Pay is not available on this device.');
  }
}

void makePayment() async {
  final paymentRequest = GooglePaymentRequest(
    totalPrice: '10.00',
    transactionId: 'txn_123456',
    paymentMethodTokenizationParameters: PaymentMethodTokenizationParameters(
      tokenizationType: 'PAYMENT_GATEWAY',
      parameters: {
        'gateway': 'your_gateway',
        'gatewayMerchantId': 'your_merchant_id',
      },
    ),
  );

  try {
    final paymentResult = await TapGooglePayKitFlutter.requestPayment(paymentRequest);
    if (paymentResult.status == GooglePayStatus.Success) {
      print('Payment successful: ${paymentResult.paymentMethodToken}');
    } else {
      print('Payment failed or cancelled: ${paymentResult.status}');
    }
  } catch (e) {
    print('Error during payment: $e');
  }
}
回到顶部