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');
  }
}
回到顶部