Flutter支付集成插件hubble_razorpay_flutter的使用

Flutter支付集成插件hubble_razorpay_flutter的使用

Razorpay Flutter

Flutter插件用于Razorpay SDK。

pub package

开始使用

该Flutter插件是对我们的Android和iOS SDK的封装。
以下文档仅专注于对原生Android和iOS SDK的封装。若要了解更多关于SDK及其在项目中的集成方式，请参考以下文档：

如需了解Razorpay支付流程及步骤，请访问: https://razorpay.com/docs/.

前置条件

  1. 学习Razorpay支付流程。
  2. 注册一个Razorpay账户，并在Razorpay仪表板中生成API密钥。使用测试密钥可以模拟沙箱环境，使用测试密钥时不会发生实际的资金交易。在彻底测试应用并准备上线后，切换到生产密钥。

安装

该插件可以在Pub上找到: https://pub.dev/packages/razorpay_flutter

在项目的pubspec.yaml文件中添加以下依赖项：

razorpay_flutter: ^1.3.4

Android注意事项：

确保应用程序的最低API级别为19或更高。

ProGuard规则

如果使用ProGuard进行构建，请在ProGuard文件中添加以下内容：

-keepattributes *Annotation*
-dontwarn com.razorpay.**
-keep class com.razorpay.** {*;}
-optimizations !method/inlining/
-keepclasseswithmembers class * {
  public void onPayment*(...);
}

更多详情可参考: https://github.com/razorpay/razorpay-flutter/issues/42#issuecomment-550161626

iOS注意事项：

确保应用程序的最低部署目标为iOS 10.0或更高版本。同时，别忘了为项目启用Bitcode。

在应用程序根目录运行以下命令以获取依赖项:

flutter packages get

使用

可以在示例文件example/lib/main.dart中找到集成的示例代码。

导入包

import 'package:razorpay_flutter/razorpay_flutter.dart';

创建Razorpay实例

_razorpay = Razorpay();

添加事件监听器

插件基于事件通信，当支付成功或失败时会发出事件。

事件名称通过Razorpay类中的常量EVENT_PAYMENT_SUCCESS、EVENT_PAYMENT_ERROR和EVENT_EXTERNAL_WALLET暴露。

使用Razorpay实例上的on(String event, Function handler)方法附加事件监听器。

_razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
_razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);
_razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);

定义处理程序如下：

void _handlePaymentSuccess(PaymentSuccessResponse response) {
  // 支付成功时执行的操作
}

void _handlePaymentError(PaymentFailureResponse response) {
  // 支付失败时执行的操作
}

void _handleExternalWallet(ExternalWalletResponse response) {
  // 当选择外部钱包时执行的操作
}

清除事件监听器可以使用Razorpay实例上的clear方法。

_razorpay.clear(); // 移除所有监听器

设置选项

var options = {
  'key': '<YOUR_KEY_HERE>',
  'amount': 100, // 金额（单位为分）
  'name': 'Acme Corp.',
  'description': 'Fine T-Shirt',
  'prefill': {
    'contact': '8888888888',
    'email': 'test@razorpay.com'
  }
};

完整的选项列表可查看: https://razorpay.com/docs/payment-gateway/integrations-guide/checkout/standard/#checkout-form

打开支付界面

_razorpay.open(options);

故障排查

启用Bitcode

打开ios/Podfile并找到以下部分：

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['ENABLE_BITCODE'] = 'NO'
    end
  end
end

将config.build_settings['ENABLE_BITCODE'] = 'NO'修改为YES。

设置Swift版本

在config.build_settings['ENABLE_BITCODE'] = 'YES'下添加以下行：

config.build_settings['SWIFT_VERSION'] = '5.0'

CocoaPods无法找到兼容版本

错误信息如下：

Specs satisfying the `razorpay_flutter (from `.symlinks/plugins/razorpay_flutter/ios`)` dependency were found, but they required a higher minimum deployment target.

这是由于您的最低部署目标低于iOS 10.0。要解决此问题，请打开ios/Podfile并将以下行：

# platform :ios, '9.0'

修改为：

platform :ios, '10.0'

然后在ios目录下再次运行pod install。

iOS构建失败

错误信息如下：

'razorpay_flutter/razorpay_flutter-Swift.h' file not found

在ios/Podfile中添加use_frameworks!，然后在ios目录下运行pod install。

Gradle构建失败

错误信息如下：

Error: uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:razorpay_flutter]

这是由于您的Android最低SDK版本低于19。要解决此问题，请打开android/app/build.gradle，在defaultConfig中的minSdkVersion设置为至少19。

类型错误

错误信息如下：

Type 'xxxx' is not a subtype of type 'xxxx' of 'response' in `Razorpay.on.<anonymous closure>`

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

1 回复

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


hubble_razorpay_flutter 是一个用于在 Flutter 应用中集成 Razorpay 支付的插件。通过这个插件，你可以轻松地在你的 Flutter 应用中实现 Razorpay 支付功能。以下是如何使用 hubble_razorpay_flutter 插件的详细步骤：

1. 添加依赖

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

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

然后，运行 flutter pub get 来获取依赖。

2. 初始化 Razorpay

在你的 Dart 代码中，导入 hubble_razorpay_flutter 插件，并初始化 Razorpay。

import 'package:hubble_razorpay_flutter/hubble_razorpay_flutter.dart';

final _razorpay = Razorpay();

3. 设置事件监听器

Razorpay 插件通过事件监听器来处理支付结果。你可以设置一个事件监听器来监听支付成功、支付失败和外部钱包支付等事件。

void _handlePaymentSuccess(PaymentSuccessResponse response) {
  // 处理支付成功
  print("Payment success: ${response.paymentId}");
}

void _handlePaymentError(PaymentFailureResponse response) {
  // 处理支付失败
  print("Payment error: ${response.code} - ${response.message}");
}

void _handleExternalWallet(ExternalWalletResponse response) {
  // 处理外部钱包支付
  print("External wallet: ${response.walletName}");
}

[@override](/user/override)
void initState() {
  super.initState();
  _razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
  _razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);
  _razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);
}

[@override](/user/override)
void dispose() {
  super.dispose();
  _razorpay.clear(); // 清除事件监听器
}

4. 发起支付

使用 Razorpay 实例的 open 方法来发起支付。你需要传递一个包含支付信息的 Map 对象。

void openCheckout() {
  var options = {
    'key': 'YOUR_RAZORPAY_KEY', // 你的 Razorpay API Key
    'amount': 1000, // 金额（以 paise 为单位，100 paise = 1 INR）
    'name': 'Acme Corp.',
    'description': 'Fine T-Shirt',
    'prefill': {
      'contact': '9876543210',
      'email': 'test@example.com'
    },
    'external': {
      'wallets': ['paytm'] // 外部钱包
    }
  };

  try {
    _razorpay.open(options);
  } catch (e) {
    print(e);
  }
}

5. 在 UI 中触发支付

你可以在按钮的 onPressed 事件中调用 openCheckout 方法来触发支付。

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Razorpay Payment'),
    ),
    body: Center(
      child: ElevatedButton(
        onPressed: openCheckout,
        child: Text('Pay Now'),
      ),
    ),
  );
}
回到顶部