Flutter支付插件vnpay_client的使用

VNPAY Client Package

简介

只需调用一个函数即可显示VNPAY屏幕。

安装

通过以下命令添加：

flutter pub add vnpay_client

使用/示例

showVNPayScreen(
   paymentUrl: paymentUrl,
   onPaymentSuccess: (value) {}, 
   onPaymentError: (error) {},
);

作者

参考


### 示例代码

```dart
import 'package:flutter/material.dart';
import 'package:vnpay_client/vnpay_client.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?vnp_TxnRef=TEST123456789&vnp_Amount=100000&vnp_BankCode=NCB&vnp_CreateDate=20230928103020&vnp_CurrCode=VND&vnp_IpAddr=127.0.0.1&vnp_Locale=en&vnp_OrderInfo=Test+payment+vnpay&vnp_ReturnUrl=https%3A%2F%2Fyourdomain.com%2Fvnpay_return&vnp_TmnCode=TEST123456&vnp_Version=2.1.0';

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

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

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

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中集成和使用vnpay_client插件的示例代码。vnpay_client是一个用于集成越南VNPay支付网关的Flutter插件。请注意，在实际项目中，你可能需要根据具体需求进行调整，并确保所有必要的依赖和配置都已正确设置。

1. 添加依赖

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

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

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

2. 配置Android

在android/app/src/main/AndroidManifest.xml中添加必要的权限：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <!-- 其他配置 -->

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

    <!-- 如果需要处理支付结果回调，可能还需要添加其他权限 -->

</manifest>

3. 配置iOS

在ios/Runner/Info.plist中，你可能需要添加一些必要的配置，比如网络权限等，这取决于vnpay_client的具体要求。通常，Flutter插件的README文件会详细说明需要哪些配置。

4. 初始化并使用vnpay_client

在你的Flutter项目中，你可以这样使用vnpay_client插件：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final VNPayClient _vnPayClient = VNPayClient();

  void _initPayment() async {
    try {
      // 替换为实际的支付参数
      final paymentData = VNPayData(
        returnUrl: "your_return_url", // 回调URL
        orderId: "your_order_id",     // 订单ID
        amount: 100000,               // 支付金额（越南盾）
        bankCode: "VCB",              // 银行代码，例如VCB代表越南商业银行
        // 其他可选参数
      );

      final result = await _vnPayClient.startPayment(paymentData);
      print("Payment result: $result");

      // 根据result处理支付结果
    } catch (e) {
      print("Error during payment: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _initPayment,
          child: Text('Start Payment'),
        ),
      ),
    );
  }
}

注意事项

  1. 支付参数：在实际使用中，你需要根据vnpay_client插件的文档和VNPay的API要求来正确设置支付参数。
  2. 回调处理：vnpay_client插件可能提供了处理支付回调的方法，你需要在你的应用中实现这些方法以处理支付结果。
  3. 错误处理：在实际应用中，你应该添加更详细的错误处理逻辑，以处理可能发生的各种异常情况。

以上代码提供了一个基本的集成示例，但你可能需要根据具体需求和vnpay_client插件的最新版本进行调整。务必查阅vnpay_client插件的官方文档和示例代码，以确保正确集成和使用。

回到顶部