Flutter自定义组件插件flutter_mono_widget的使用

简介

flutter_mono_widget 是一个用于集成 Mono（金融数据平台）官方 Android 和 iOS SDK 的 Flutter 插件。通过该插件，开发者可以轻松地在 Flutter 应用中实现与 Mono 平台的交互。

官方网站: https://mono.co/

功能

当前支持的功能

• Mono Connect ✅
• 一次性扣款 (One-Time Debit) ✅
• 定期扣款 (Recurring Debit) ❌ （即将上线）

使用方法

1. Mono Connect

描述

Mono Connect 是 Mono 提供的一种方式，允许用户通过 Mono 平台授权访问其银行账户信息。通过 FlutterMonoConnectWidget 可以轻松集成此功能。

示例代码

TextButton(
    onPressed: () async {
    final String? code = await Navigator.of(context).push(
        MaterialPageRoute(
        builder: (_) => FlutterMonoConnectWidget(apiKey: _apiKey),
        ),
    );

    debugPrint('code is : $code');
    },
    child: const Text('connect Widget'),
),

说明

• 需要传入 apiKey 参数，这是从 Mono 官方获取的 API 密钥。
• 用户完成授权后，会返回一个 code，开发者可以通过该 code 获取用户的银行账户信息。

2. 一次性扣款 (One-Time Debit)

描述

一次性扣款功能允许用户通过 Mono 平台进行单次支付操作。通过 FlutterMonoPaymentWidget 可以实现这一功能。

示例代码

TextButton(
    onPressed: () {
    Navigator.of(context).push(
        MaterialPageRoute(
        builder: (_) => FlutterMonoPaymentWidget(
            apiKey: _apiKey,
            amountInKobo: 200 * 100, // 金额以科博为单位（1 科博 = 1 币）
            description: 'Testing payments',
            reference: '${DateTime.now().microsecondsSinceEpoch}_reference_123',
            transactionReference: '${DateTime.now().microsecondsSinceEpoch}_transactionReference_123',
            onSuccess: (Map<String, dynamic>? data) {
                log('data response: $data');
            },
        ),
        ),
    );
    },
    child: const Text('One Time Payment'),
),

说明

• 参数说明:
  • apiKey: Mono 提供的 API 密钥。
  • amountInKobo: 支付金额，单位为科博。
  • description: 支付描述。
  • reference: 每笔交易的唯一标识符。
  • transactionReference: 每笔交易的唯一交易标识符。
  • onSuccess: 支付成功后的回调函数，返回支付结果数据。
• 注意事项:
  • reference 和 transactionReference 必须对每笔交易唯一，否则可能导致支付失败。

完整示例

以下是一个完整的 Flutter 示例项目，展示了如何使用 flutter_mono_widget 实现 Mono Connect 和一次性扣款功能。

示例代码

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_mono_widget/flutter_mono_widget.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 Mono Widget',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter Mono Widget Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _apiKey = 'YOUR_MONO_KEY'; // 替换为你的 Mono API 密钥

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // Mono Connect 按钮
            TextButton(
              onPressed: () async {
                final String? code = await Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (_) => FlutterMonoConnectWidget(apiKey: _apiKey),
                  ),
                );

                debugPrint('code is : $code');
              },
              child: const Text('connect Widget'),
            ),
            const SizedBox(height: 20),
            // 一次性扣款按钮
            TextButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (_) => FlutterMonoPaymentWidget(
                      apiKey: _apiKey,
                      amountInKobo: 200 * 100, // 金额为 200 币
                      description: 'Testing payments',
                      reference: '${DateTime.now().microsecondsSinceEpoch}_reference_123',
                      transactionReference: '${DateTime.now().microsecondsSinceEpoch}_transactionReference_123',
                      onSuccess: (Map<String, dynamic>? data) {
                        log('data response: $data');
                      },
                    ),
                  ),
                );
              },
              child: const Text('One Time Payment'),
            ),
            const SizedBox(height: 20),
          ],
        ),
      ),
    );
  }
}