Flutter在线支付插件razorpay_web的使用

概述

razorpay_web 是一个Flutter插件，用于在Web、Android和iOS上集成Razorpay支付网关。本文档将指导您如何安装和使用该插件，并提供一个完整的示例代码。

Live Demo

您可以在这里尝试实时演示：https://razorpayy.web.app/

demoApp demoApp demoApp

Getting Started

此Flutter插件是围绕我们的Android和iOS SDK构建的。有关更多细节，请参阅以下文档：

Android: Razorpay Android Docs
iOS: Razorpay iOS Docs
Web: 将以下脚本添加到您的web/index.html文件的<head>标签中：

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

了解更多信息，请访问Razorpay Payment Flow。

Prerequisites

了解Razorpay Payment Flow
注册一个Razorpay Account并从Razorpay仪表板生成API Keys。测试环境建议使用Test keys，正式上线时再切换为Live keys。

Installation

在您的pubspec.yaml文件中添加依赖项：

dependencies:
  razorpay_web: ^1.3.2

确保您的应用满足以下条件：
- Android: 最低API级别为19或更高。
- iOS: 最低部署目标为iOS 10.0或更高，并启用bitcode。
运行命令以获取包：
```
flutter packages get
```
如果您使用Proguard，请确保添加相应的规则（见Proguard rules）。

Proguard Rules

如果您使用Proguard，请在Proguard文件中添加以下内容：

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

Usage

以下是集成Razorpay的完整示例代码：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Razorpay Flutter Sample App',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          primary: Color(0xFF0D94FB),
          secondary: Color(0xFF012652),
        ),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Razorpay Flutter Sample App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Pay with Razorpay'),
            ElevatedButton(
              onPressed: () async {
                Razorpay razorpay = Razorpay();
                var options = {
                  'key': 'rzp_test_1DP5mmOlF5G5ag', // 使用您的Razorpay API key
                  'amount': 100, // 金额（单位为最小货币单位）
                  'name': 'Acme Corp.',
                  'description': 'Fine T-Shirt',
                  'retry': {'enabled': false, 'max_count': 1},
                  'send_sms_hash': true,
                  'prefill': {
                    'contact': '8888888888',
                    'email': 'test@razorpay.com'
                  },
                  'external': {
                    'wallets': ['paytm']
                  }
                };

                razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, handlePaymentErrorResponse);
                razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, handlePaymentSuccessResponse);
                razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, handleExternalWalletSelected);

                await razorpay.open(options);
              },
              child: const Text('Pay with Razorpay'),
            ),
          ],
        ),
      ),
    );
  }

  void handlePaymentErrorResponse(PaymentFailureResponse response) {
    showAlertDialog(
      context,
      'Payment Failed',
      'Code: ${response.code}\n'
          'Description: ${response.message}\n'
          'Metadata: ${response.error.toString()}',
    );
  }

  void handlePaymentSuccessResponse(PaymentSuccessResponse response) {
    showAlertDialog(
      context,
      'Payment Successful',
      'Payment ID: ${response.paymentId}\n'
          'Order ID: ${response.orderId}\n'
          'Signature: ${response.signature}',
    );
  }

  void handleExternalWalletSelected(ExternalWalletResponse response) {
    showAlertDialog(
      context,
      'External Wallet Selected',
      '${response.walletName}',
    );
  }

  void showAlertDialog(BuildContext context, String title, String message) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text(title),
          content: Text(message),
          actions: [
            ElevatedButton(
              onPressed: Navigator.of(context).pop,
              child: const Text('Continue'),
            ),
          ],
        );
      },
    );
  }
}

Troubleshooting

Enabling Bitcode

如果您遇到iOS编译问题，请确保在ios/Podfile中启用了Bitcode：

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

Setting Swift Version

确保设置了正确的Swift版本：

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

CocoaPods Compatibility Issue

如果遇到CocoaPods兼容性问题，请确保最低部署目标为iOS 10.0或更高：

platform :ios, '10.0'

Gradle Build Error

确保Android最低SDK版本为19或更高：

minSdkVersion 19

API

Razorpay Class

open(map<String, dynamic> options)

打开Razorpay Checkout界面。options参数必须包含key字段。

on(String eventName, Function listener)

注册支付事件监听器。支持以下事件：

EVENT_PAYMENT_SUCCESS
EVENT_PAYMENT_ERROR
EVENT_EXTERNAL_WALLET

clear()

清除所有事件监听器。

PaymentSuccessResponse

Field Name	Type	Description
paymentId	String	支付ID
orderId	String	订单ID（如果是订单支付）
signature	String	验证签名

PaymentFailureResponse

Field Name	Type	Description
code	int	错误码
message	String	错误信息

ExternalWalletResponse

Field Name	Type	Description
walletName	String	外部钱包名称

通过以上步骤，您应该能够成功地在Flutter项目中集成Razorpay支付功能。如有任何问题，请参考官方文档或联系技术支持。

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

yibo5220 1楼•2 天前

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

当然，以下是一个关于如何在Flutter项目中使用razorpay_web插件进行在线支付的示例代码。razorpay_web是一个用于在Web平台上集成Razorpay支付的Flutter插件。

首先，确保你已经在pubspec.yaml文件中添加了razorpay_web依赖：

dependencies:
  flutter:
    sdk: flutter
  razorpay_web: ^1.2.7  # 请检查最新版本号

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

接下来，在你的Flutter项目中，你需要按照以下步骤进行集成：

初始化Razorpay：

在你的主文件（例如main.dart）中，你需要导入razorpay_web包并进行初始化。

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

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

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Razorpay _razorpay = Razorpay();

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

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

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

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

  void _openCheckout() {
    var options = {
      'key': 'YOUR_RAZORPAY_KEY', // 替换为你的Razorpay Key
      'amount': '50000', // 支付金额，单位为Paise（例如50000代表500卢比）
      'currency': 'INR',
      'name': 'Merchant Name',
      'description': 'Payment Description',
      'image': 'https://example.com/your_logo.png',
      'prefill': {
        'email': 'user@example.com',
        'contact': '1234567890',
      },
      'theme': {
        'color': '#F37254',
      },
    };

    try {
      _razorpay.open(options);
    } catch (e) {
      print("Error: $e");
    }
  }

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

配置Web支持：

确保你的Flutter项目已经配置了Web支持。你可以在项目的根目录下运行以下命令来添加Web支持：

flutter config --enable-web

然后运行：

flutter create .

在Web平台上运行：

最后，使用以下命令在Chrome浏览器中运行你的Flutter Web应用：

flutter run -d chrome

当你点击“Pay Now”按钮时，Razorpay支付界面将会打开，用户可以进行支付操作。

注意事项：

请确保你已经在Razorpay仪表盘上创建了一个应用，并获取了相应的key。
金额单位为Paise，例如50000代表500卢比。
根据你的需求，调整options中的其他参数。

以上就是一个基本的Flutter Web项目中使用razorpay_web插件进行在线支付的示例代码。希望这对你有所帮助！