Flutter支付结算插件flutter_vella_checkout的使用

Flutter支付结算插件flutter_vella_checkout的使用

概述

flutter_vella_checkout 是一个用于在 Flutter 应用中集成支付功能的插件。通过该插件，您可以轻松实现支付结算流程。以下是如何安装和使用该插件的详细步骤。

安装

要使用此插件，请在项目的 pubspec.yaml 文件中添加 flutter_vella_checkout 作为依赖项。

dependencies:
  flutter_vella_checkout: ^版本号

然后运行以下命令以更新依赖项：

flutter pub get

使用示例

以下是一个完整的示例代码，展示如何在 Flutter 应用中使用 flutter_vella_checkout 插件。

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

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 初始化 Flutter 环境
  runApp(VellaPayExample()); // 启动应用
}

const String appName = 'VellaPayExample'; // 应用名称

// 主应用类
class VellaPayExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appName,
      home: HomePage(), // 设置主页
    );
  }
}

// 主页状态类
class HomePage extends StatefulWidget {
  [@override](/user/override)
  HomePageState createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  String email = 'taj@example.com'; // 用户邮箱
  double amount = 10.00; // 支付金额
  String message = ''; // 提示信息
  String name = 'Taje'; // 用户姓名
  String vellaKey = ''; // Vella 密钥
  String reference = 'PAYXFBFBGYTJTTYJTTJ'; // 支付参考编号
  String merchantId = ''; // 商户 ID
  String currency = 'NGN'; // 币种（例如尼日利亚奈拉）
  final Map<String, dynamic> metaData = { // 元数据
    'name': 'John Doe',
    'age': 25,
    'email': 'john.doe@example.com',
  };

  dynamic callbackResult; // 回调结果
  void callback(dynamic response) {
    callbackResult = response; // 存储回调结果
    message = response.message; // 更新提示信息
  }

  bool isClosed = false; // 是否关闭窗口
  void close() {
    isClosed = true; // 设置为已关闭
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Vella 示例'), // 设置应用标题
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(
          horizontal: MediaQuery.of(context).size.width / 8, // 设置水平内边距
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 垂直居中对齐
          children: [
            Text(message), // 显示提示信息
            const SizedBox(height: 20), // 添加间距
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => VellaCheckout(
                      name: name, // 用户姓名
                      email: email, // 用户邮箱
                      amount: amount, // 支付金额
                      reference: reference, // 支付参考编号
                      merchantId: merchantId, // 商户 ID
                      currency: currency, // 币种
                      metadata: metaData, // 元数据
                      vellakey: vellaKey, // Vella 密钥
                      onSuccess: (response) {
                        print('Success: $response'); // 成功回调
                        // 处理成功事件
                      },
                      onError: (error) {
                        print('Error: $error'); // 错误回调
                        // 处理错误事件
                      },
                      onClose: () {
                        print('Widget closed'); // 关闭回调
                        // 处理关闭事件
                      },
                    ),
                  ),
                );
              },
              child: Text(
                'Pay', // 按钮文本
                style: TextStyle(
                  color: Colors.white, // 文本颜色
                  fontSize: 16.0, // 字体大小
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}