Flutter支付插件vnpay_flutter的使用

Flutter支付插件vnpay_flutter的使用

简介

这是一个帮助与VNPAY进行交互的包。

安装

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

dependencies:
  vnpay_flutter: ^1.0.0

然后运行以下命令获取依赖项：

flutter pub get

使用/示例

以下是如何使用该插件生成支付URL并调用支付功能的示例代码：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

  [@override](/user/override)
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  String responseCode = '';

  Future<void> onPayment() async {
    // 生成支付URL
    final paymentUrl = VNPAYFlutter.instance.generatePaymentUrl(
      url: 'https://sandbox.vnpayment.vn/paymentv2/vpcpay.html', // VNPAY URL，默认为https://sandbox.vnpayment.vn/paymentv2/vpcpay.html
      version: '2.0.1', // VNPAY版本，默认为2.0.1
      tmnCode: 'XXXX', // VNPAY的tmn代码，从VNPAY获取
      txnRef: DateTime.now().millisecondsSinceEpoch.toString(), // 引用代码，默认为时间戳
      orderInfo: 'Pay 30.000 VND', // 订单信息，默认为Pay Order
      amount: 30000, // 金额
      returnUrl: 'https://abc.com/return', // 返回URL，参见https://sandbox.vnpayment.vn/apis/docs/huong-dan-tich-hop/#code-returnurl
      ipAdress: '192.168.10.10', // 您的IP地址
      vnpayHashKey: 'XXXXX', // VNPAY哈希密钥，从VNPAY获取
      vnPayHashType: VNPayHashType.HMACSHA512, // 哈希类型。默认为HMACSHA512，可以在https://sandbox.vnpayment.vn/merchantv2更改
      vnpayExpireDate: DateTime.now().add(const Duration(hours: 1)), // 过期日期
    );

    // 显示支付页面
    await VNPAYFlutter.instance.show(
      paymentUrl: paymentUrl,
      onPaymentSuccess: (params) {
        setState(() {
          responseCode = params['vnp_ResponseCode'];
        });
      },
      onPaymentError: (params) {
        setState(() {
          responseCode = 'Error';
        });
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Response Code: $responseCode'), // 显示响应码
            TextButton(
              onPressed: onPayment, // 触发支付操作
              child: const Text('30.000VND'), // 支付按钮文本
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用vnpay_flutter插件的示例代码。vnpay_flutter是一个用于集成越南支付网关VNPay的Flutter插件。

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

dependencies:
  flutter:
    sdk: flutter
  vnpay_flutter: ^最新版本号  # 请替换为实际发布的最新版本号

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

接下来，你可以在你的Flutter项目中按照以下步骤使用vnpay_flutter插件：

  1. 导入vnpay_flutter包：
import 'package:vnpay_flutter/vnpay_flutter.dart';
  1. 配置支付参数：

在调用支付功能之前，你需要配置支付所需的参数。这些参数通常包括商户ID、订单信息、支付金额等。

Map<String, String> paymentParams = {
  'tn': 'your_transaction_no',      // 交易号，唯一标识每一笔交易
  'vnp_Version': '2.0.0',           // 版本号
  'vnp_Tms': '20231010120000',      // 时间戳，格式为YYYYMMDDHHMMSS
  'vnp_Amount': '100000',           // 交易金额，单位为越南盾（VND），这里为100,000越南盾
  'vnp_Command': 'pay',             // 命令类型，一般为pay
  'vnp_Returnurl': 'your_return_url',// 支付成功后的回调URL
  'vnp_TestMode': '1',              // 测试模式，1为测试模式，0为正式模式
};

注意：这里的参数需要根据实际的业务逻辑和VNPay的要求进行调整。

  1. 调用支付功能：

使用vnpay_flutter插件提供的支付功能来发起支付请求。

void initiatePayment() async {
  try {
    bool result = await VNPayFlutter.startPayment(paymentParams);
    if (result) {
      print("支付成功");
      // 处理支付成功后的逻辑
    } else {
      print("支付失败");
      // 处理支付失败后的逻辑
    }
  } catch (e) {
    print("支付过程中发生错误: $e");
    // 处理异常
  }
}
  1. 在UI中调用支付功能：

你可以在按钮点击事件或其他触发条件下调用initiatePayment函数。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('VNPay Flutter Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: initiatePayment,
            child: Text('支付'),
          ),
        ),
      ),
    );
  }
}

完整的代码示例如下：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('VNPay Flutter Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              Map<String, String> paymentParams = {
                'tn': 'your_transaction_no',      // 交易号
                'vnp_Version': '2.0.0',           // 版本号
                'vnp_Tms': '20231010120000',      // 时间戳
                'vnp_Amount': '100000',           // 交易金额
                'vnp_Command': 'pay',             // 命令类型
                'vnp_Returnurl': 'your_return_url',// 支付成功后的回调URL
                'vnp_TestMode': '1',              // 测试模式
              };

              try {
                bool result = await VNPayFlutter.startPayment(paymentParams);
                if (result) {
                  print("支付成功");
                  // 处理支付成功后的逻辑
                } else {
                  print("支付失败");
                  // 处理支付失败后的逻辑
                }
              } catch (e) {
                print("支付过程中发生错误: $e");
                // 处理异常
              }
            },
            child: Text('支付'),
          ),
        ),
      ),
    );
  }
}

请确保你替换了示例代码中的your_transaction_no和your_return_url等参数为你的实际值。同时，注意在实际项目中处理好支付成功和失败的逻辑，以及异常处理。

回到顶部