Flutter支付插件actcms_flutter_vnpay的使用

Flutter支付插件actcms_flutter_vnpay的使用

简介

通过调用一个简单的函数即可显示VNPAY支付界面。

安装

在项目中添加actcms_flutter_vnpay包：

flutter pub add actcms_flutter_vnpay

使用/示例

以下是一个完整的示例代码，展示了如何使用actcms_flutter_vnpay插件进行支付操作。

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 初始化状态
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  // 设置支付URL
  final paymentUrl = 'https://sandbox.vnpayment.vn/paymentv2/vpcpay.html'; // 请替换为实际的支付URL

  // 支付成功回调
  void _onPaymentSuccess(data) {
    print("支付成功: $data");
  }

  // 支付失败回调
  void _onPaymentFailure(error) {
    print("支付失败: $error");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: OutlinedButton(
            onPressed: () {
              // 显示VNPAY支付界面
              showVNPayScreen(
                context,
                paymentUrl: paymentUrl,
                onPaymentSuccess: _onPaymentSuccess,
                onPaymentError: _onPaymentFailure,
              );
            },
            child: const Text('点击支付'),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


actcms_flutter_vnpay 是一个 Flutter 插件，用于在 Flutter 应用中集成 VNPay 支付功能。这个插件通常用于在越南的应用程序中处理支付事务。以下是如何使用 actcms_flutter_vnpay 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  actcms_flutter_vnpay: ^1.0.0  # 确保使用最新版本

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

2. 安装插件

在你需要使用 VNPay 支付的地方，导入 actcms_flutter_vnpay 插件。

import 'package:actcms_flutter_vnpay/actcms_flutter_vnpay.dart';

3. 初始化 VNPay

在使用 VNPay 支付之前，通常需要初始化插件。你可能需要提供一些配置参数，如商户ID、API密钥等。

ActcmsFlutterVnpay.initialize(
  merchantId: 'YOUR_MERCHANT_ID',
  apiKey: 'YOUR_API_KEY',
  urlScheme: 'your_app_scheme',  // 用于处理返回的URL
);

4. 发起支付请求

现在你可以发起支付请求。通常你需要提供订单信息、金额、回调URL等。

try {
  final paymentResult = await ActcmsFlutterVnpay.pay(
    amount: 100000,  // 金额
    orderId: 'ORDER123456',  // 订单ID
    orderInfo: 'Payment for order 123456',  // 订单描述
    returnUrl: 'your_app_scheme://vnpay_return',  // 返回URL
  );

  if (paymentResult['status'] == 'success') {
    // 支付成功处理
    print('Payment successful: ${paymentResult['message']}');
  } else {
    // 支付失败处理
    print('Payment failed: ${paymentResult['message']}');
  }
} catch (e) {
  // 异常处理
  print('Error occurred: $e');
}

5. 处理返回结果

支付完成后，VNPay 会通过 returnUrl 返回到你的应用。你需要在应用的主模块中处理这个返回的URL。

import 'package:flutter/material.dart';
import 'package:uni_links/uni_links.dart';  // 用于处理深度链接

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  StreamSubscription _sub;

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

  @override
  void dispose() {
    _sub.cancel();
    super.dispose();
  }

  void _handleIncomingLinks() async {
    _sub = getUriLinksStream().listen((Uri uri) {
      if (uri.host == 'vnpay_return') {
        // 处理VNPay返回的结果
        final paymentResult = uri.queryParameters;
        if (paymentResult['vnp_ResponseCode'] == '00') {
          // 支付成功
          print('Payment successful');
        } else {
          // 支付失败
          print('Payment failed');
        }
      }
    }, onError: (Object err) {
      // 处理错误
      print('Error: $err');
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('VNPay Payment Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 发起支付
              ActcmsFlutterVnpay.pay(
                amount: 100000,
                orderId: 'ORDER123456',
                orderInfo: 'Payment for order 123456',
                returnUrl: 'your_app_scheme://vnpay_return',
              );
            },
            child: Text('Pay with VNPay'),
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());

6. 配置URL Scheme

为了使 returnUrl 能够正常工作，你需要在 Info.plist (iOS) 和 AndroidManifest.xml (Android) 中配置 URL Scheme。

iOS (Info.plist):

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>your_app_scheme</string>
    </array>
  </dict>
</array>

Android (AndroidManifest.xml):

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="your_app_scheme" />
</intent-filter>
回到顶部