Flutter支付集成插件razorpay

Flutter支付集成插件razorpay_turbo的使用

本Flutter插件是Razorpay自定义SDK的封装。通过该插件，开发者可以方便地在Flutter应用中集成Razorpay支付功能。

获取插件

插件可在Pub上获取：https://pub.dev/packages/razorpay_turbo

在你的应用的pubspec.yaml文件中添加以下依赖：

razorpay_turbo: ^1.0.0

注意：

对于Android，确保你的应用的最低API级别为19或更高。
对于iOS，确保你的应用的最低部署目标为iOS 10.0或更高，并启用Bitcode。

运行flutter packages get命令以安装依赖。

前提条件

学习Razorpay支付流程。
注册一个Razorpay账户，并从Razorpay控制台生成API密钥。使用测试密钥可以在沙盒环境中进行模拟支付，不会发生实际交易。当你的应用测试完毕后，可切换到生产密钥。

使用插件

导入包

import 'package:razorpay_turbo/razorpay_turbo.dart';

创建Razorpay实例

final _razorpay = Razorpay();

添加事件监听器

插件采用基于事件的通信方式，当支付成功或失败时会触发相应的事件。

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

void _handlePaymentSuccess(Map<dynamic, dynamic> response) {
  // 处理支付成功的情况
}

void _handlePaymentError(Map<dynamic, dynamic> response) {
  // 处理支付失败的情况
}

要清除事件监听器，可以使用clear方法：

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

设置选项

final options = {
  'key': '<YOUR_KEY_HERE>', // 替换为你的公钥
  'amount': 100, // 支付金额（单位：分）
  'name': 'Acme Corp.', // 商家名称
  'description': 'Fine T-Shirt', // 商品描述
  'prefill': {
    'contact': '8888888888', // 联系电话
    'email': 'test@razorpay.com' // 邮箱地址
  }
};

详细的选项列表可以参见Razorpay文档。

打开支付界面

_razorpay.open(options); // 打开支付界面

示例代码

下面是一个完整的示例代码，展示了如何在Flutter应用中集成Razorpay支付功能。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _razorpay = Razorpay();

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

  [@override](/user/override)
  void dispose() {
    super.dispose();
    _razorpay.clear();
  }

  void _handlePaymentSuccess(Map<dynamic, dynamic> response) {
    // 处理支付成功的情况
    print("Payment Successful");
    print(response);
  }

  void _handlePaymentError(Map<dynamic, dynamic> response) {
    // 处理支付失败的情况
    print("Payment Failed");
    print(response);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue.shade300,
      body: Container(
        child: Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
              top: MediaQuery.of(context).size.height * 0.3,
              child: SizedBox(
                width: MediaQuery.of(context).size.width * 0.9,
                child: Container(
                  height: 80.0,
                  color: Colors.grey.shade300,
                  child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Padding(
                      padding: EdgeInsets.all(4.0),
                      child: Text(
                        'Order #RZP',
                      ),
                    ),
                  ),
                ),
              ),
            ),
            Positioned(
              top: (MediaQuery.of(context).size.height * 0.3) + 80.0,
              child: Container(
                width: MediaQuery.of(context).size.width * 0.9,
                color: Colors.white,
                child: Padding(
                  padding: EdgeInsets.all(12.0),
                  child: Column(
                    children: [
                      Text(
                        'Razorpay T-Shirt',
                        style: TextStyle(
                          fontSize: 18.0,
                          color: Colors.grey,
                        ),
                      ),
                      SizedBox(height: 6.0),
                      Text(
                        'INR 1.00',
                        style: TextStyle(
                          fontSize: 12.0,
                          color: Colors.grey,
                        ),
                      ),
                      SizedBox(height: 6.0),
                      Text(
                        'This is a real transaction',
                        style: TextStyle(
                          fontStyle: FontStyle.italic,
                          fontSize: 12.0,
                          color: Colors.grey,
                        ),
                      ),
                      SizedBox(height: 16.0),
                      ElevatedButton(
                        onPressed: () {
                          final options = {
                            'key': '<YOUR_KEY_HERE>', // 替换为你的公钥
                            'amount': 100, // 支付金额（单位：分）
                            'name': 'Acme Corp.', // 商家名称
                            'description': 'Fine T-Shirt', // 商品描述
                            'prefill': {
                              'contact': '8888888888', // 联系电话
                              'email': 'test@razorpay.com' // 邮箱地址
                            }
                          };
                          _razorpay.open(options);
                        },
                        child: Text('Purchase'),
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.green,
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
            Positioned(
              top: (MediaQuery.of(context).size.height * 0.3) - 30.0,
              child: Container(
                height: 60.0,
                width: 60.0,
                color: Colors.white,
                child: Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.black,
                      image: DecorationImage(
                        image: AssetImage('images/rzp.png'), // 确保你有这个资源
                      ),
                    ),
                  ),
                ),
              ),
            ),
            Positioned(
              top: MediaQuery.of(context).size.height * 0.8,
              child: Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16.0),
                    border: Border.all(color: Colors.white, width: 1.0)),
                child: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text(
                    'Secure Payments by Razorpay',
                    style: TextStyle(
                      fontStyle: FontStyle.italic,
                      color: Colors.white,
                      fontSize: 10.0,
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

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

ionicwang 1楼

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

razorpay_turbo 是一个 Flutter 插件，用于快速集成 Razorpay 支付网关到你的 Flutter 应用中。它基于 razorpay_flutter 插件，但提供了更简洁的 API 和更好的性能。以下是使用 razorpay_turbo 插件集成 Razorpay 支付的步骤。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 razorpay_turbo 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  razorpay_turbo: ^1.0.0  # 请检查最新版本

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

2. 初始化 Razorpay

在你的 Dart 代码中，导入 razorpay_turbo 并初始化 Razorpay 实例。

import 'package:razorpay_turbo/razorpay_turbo.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PaymentScreen(),
    );
  }
}

class PaymentScreen extends StatefulWidget {
  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  late Razorpay _razorpay;

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

  @override
  void dispose() {
    _razorpay.clear(); // 清除监听器
    super.dispose();
  }

  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}");
  }

  void openCheckout() async {
    var options = {
      'key': 'YOUR_RAZORPAY_KEY',  // 替换为你的 Razorpay 密钥
      'amount': 100,  // 金额（以 paise 为单位，例如 100 = ₹1）
      'name': 'Test Company',
      'description': 'Test Payment',
      'prefill': {'contact': '1234567890', 'email': 'test@example.com'},
      'external': {
        'wallets': ['paytm']
      }
    };

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Razorpay Payment'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: openCheckout,
          child: Text('Pay Now'),
        ),
      ),
    );
  }
}

3. 配置 Android 和 iOS

Android

在 android/app/src/main/AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="android.permission.INTERNET"/>

iOS

在 ios/Runner/Info.plist 文件中添加以下配置：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>