Flutter网页支付插件flutter_razorpay_web的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter网页支付插件 flutter_razorpay_web 的使用

概述

flutter_razorpay_web 是一个专门为基于 Web 的 Flutter 应用程序设计的插件，旨在简化 Razorpay 支付网关服务的集成。

添加依赖

在你的应用的 pubspec.yaml 文件中的 dependencies 部分添加以下内容：

dependencies:
  flutter_razorpay_web: ^latest

然后运行 flutter packages get 来获取依赖包。

重要步骤

在 web 文件夹中的 index.html 文件中包含 checkout.js：

<body>
  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine().then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });
  </script>
  <!-- razorpay checkout lib -->
  <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
</body>

使用示例

导入包

首先，在 Dart 文件中导入 flutter_razorpay_web 包：

import 'package:flutter_razorpay_web/flutter_razorpay_web.dart';

创建实例并处理事件

创建 _razorpayWeb 实例，并定义成功、取消和失败时的回调函数：

late RazorpayWeb _razorpayWeb;

void _onSuccess(RpaySuccessResponse response) {
  // 成功后的逻辑
}

void _onCancel(RpayCancelResponse response) {
  // 取消后的逻辑
}

void _onFailed(RpayFailedResponse response) {
  // 失败后的逻辑
}

在 initState 方法中配置 _razorpayWeb：

@override
void initState() {
  super.initState();

  _razorpayWeb = RazorpayWeb(
    onSuccess: _onSuccess,
    onCancel: _onCancel,
    onFailed: _onFailed,
  );
}

记得在 dispose 方法中清除资源：

@override
void dispose() {
  _razorpayWeb.clear();
  super.dispose();
}

打开 Razorpay 支付网关

生成订单 ID 后，调用 _makePayment 方法打开 Razorpay 支付网关：

void getOrderId() {
  /// 在你的后端生成订单 ID
  /// 参考文档：https://razorpay.com/docs/payments/server-integration/nodejs/payment-gateway/build-integration/#13-create-an-order-in-server
  /// 生成订单 ID 后调用 _makePayment
  _makePayment(
    amount: '100',
    orderId: 'order_DaZlswtdcn9UNV',
    keyId: 'test_Lxtrdfhfvdhja',
  );
}

void _makePayment({
  required String amount,
  required String orderId,
  required String keyId,
}) {
  final Map<String, dynamic> options = {
    "key": keyId,
    "amount": amount,
    "currency": "INR",
    "order_id": orderId,
    "timeout": "240",
    "name": "Your Organization Name",
    "description": "your description",
    "prefill": {"contact": "+910000000000"},
    "readonly": {"contact": true, "email": true},
    "send_sms_hash": true,
    "remember_customer": false,
    "retry": {"enabled": false},
    "hidden": {"contact": false, "email": false}
  };

  // 配置支付方法（可选）
  options["config"] = {
    "display": {
      "blocks": {
        "utib": {
          "name": "Pay using Axis Bank",
          "instruments": [
            {"method": "card", "issuers": ["UTIB"]},
            {"method": "netbanking", "banks": ["UTIB"]}
          ]
        },
        "other": {
          "name": "Other Payment modes",
          "instruments": [
            {"method": "card"},
            {"method": "netbanking"},
            {"method": "wallet"}
          ]
        }
      },
      "hide": [{"method": "upi"}, {"method": "emi"}],
      "sequence": ["block.utib", "block.other"],
      "preferences": {"show_default_blocks": false}
    }
  };

  _razorpayWeb.open(options);
}

示例 Demo

以下是完整的示例代码，展示了如何在 Flutter 应用中集成 Razorpay 支付网关：

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late RazorpayWeb _razorpayWeb;

  @override
  void initState() {
    super.initState();
    _razorpayWeb = RazorpayWeb(
      onSuccess: (response) {
        // 成功后的逻辑
        print("Payment Success");
      },
      onCancel: (response) {
        // 取消后的逻辑
        print("Payment Cancelled");
      },
      onFailed: (response) {
        // 失败后的逻辑
        print("Payment Failed");
      },
    );
  }

  @override
  void dispose() {
    _razorpayWeb.clear();
    super.dispose();
  }

  void getOrderId() {
    _makePayment(
      amount: '100',
      orderId: 'order_DaZlswtdcn9UNV',
      keyId: 'test_Lxtrdfhfvdhja',
    );
  }

  void _makePayment({
    required String amount,
    required String orderId,
    required String keyId,
  }) {
    final Map<String, dynamic> options = {
      "key": keyId,
      "amount": amount,
      "currency": "INR",
      "order_id": orderId,
      "timeout": "240",
      "name": "Your Organization Name",
      "description": "your description",
      "prefill": {"contact": "+910000000000"},
      "readonly": {"contact": true, "email": true},
      "send_sms_hash": true,
      "remember_customer": false,
      "retry": {"enabled": false},
      "hidden": {"contact": false, "email": false}
    };

    _razorpayWeb.open(options);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Razorpay Web'),
          centerTitle: true,
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: getOrderId,
            child: const Text('Pay Now'),
          ),
        ),
      ),
    );
  }
}

通过上述步骤和示例代码，你可以在 Flutter Web 应用中顺利集成 Razorpay 支付网关。确保在实际开发过程中参考官方文档以获取最新的 API 和最佳实践。


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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中使用flutter_razorpay_web插件来实现网页支付的代码案例。这个插件主要用于在Flutter的Web应用中集成Razorpay支付网关。

步骤 1: 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_razorpay_web: ^x.y.z  # 替换为最新版本号

步骤 2: 导入插件并配置Razorpay密钥

在你的Flutter项目的主文件（通常是main.dart）中，导入flutter_razorpay_web插件，并配置你的Razorpay密钥（从Razorpay仪表板获取）。

import 'package:flutter/material.dart';
import 'package:flutter_razorpay_web/flutter_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> {
  RazorpayWeb _razorpayWeb = RazorpayWeb();

  @override
  void initState() {
    super.initState();
    _razorpayWeb.initialize({
      "key": "YOUR_RAZORPAY_KEY_HERE",  // 替换为你的Razorpay密钥
      "description": "Payment for goods",
      "image": "https://your-company-logo.com/logo.png",
      "currency": "INR",
      "amount": "1000",  // 金额，单位为最小货币单位（例如：1000代表100卢比）
    });
  }

  void openRazorpayCheckout() async {
    try {
      var options = {
        "key": "YOUR_RAZORPAY_KEY_HERE",  // 替换为你的Razorpay密钥
        "amount": "1000",
        "name": "Merchant Name",
        "description": "Payment for goods",
        "image": "https://your-company-logo.com/logo.png",
        "prefill": {
          "email": "customer@example.com",
          "contact": "1234567890",
        },
        "theme": {
          "color": "#6554C0"
        }
      };

      var response = await _razorpayWeb.openCheckout(options);
      if (response != null) {
        print("Razorpay response: ${response.toMap()}");
        // 处理支付响应，例如：更新订单状态
      }
    } catch (e) {
      print("Error: ${e.message}");
    }
  }

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

注意事项

  1. Razorpay密钥：确保你已经从Razorpay仪表板获取了正确的密钥，并替换上述代码中的YOUR_RAZORPAY_KEY_HERE。
  2. 支付金额：金额字段应该使用最小货币单位（例如：对于印度卢比，1000表示100卢比）。
  3. 支付响应：支付成功后，openCheckout方法会返回一个包含支付信息的响应。你可以根据这个响应来更新你的订单状态或执行其他逻辑。

运行项目

确保你的Flutter环境已经配置好，并且支持Web开发。然后，使用以下命令来运行你的Flutter Web应用：

flutter run -d web-server --web-port=8080

这将启动一个Web服务器，并在浏览器中打开你的Flutter Web应用。现在你应该能够看到一个支付按钮，点击它会打开Razorpay的支付界面。

希望这个代码案例能够帮助你在Flutter Web项目中成功集成Razorpay支付！

回到顶部