Flutter支付集成插件flutter_monnify的使用

Flutter支付集成插件flutter_monnify的使用

Android

IOS

Flutter Monnify Package

一个用于通过Monnify支付网关进行支付的Flutter包。支持Android和iOS平台。

开始使用

要使用此包，需要在pubspec.yaml文件中添加flutter_monnify作为依赖项。

dependencies:
  flutter_monnify:

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

如何使用

import 'package:flutter_monnify/flutter_monnify.dart';

TransactionResponse? response = await Monnify().checkout(
      context, 
      monnifyPayload(),
 );

无需其他配置——该插件开箱即用。

可以通过AppConfig对象自定义应用栏以匹配项目的主题颜色。

示例

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Monnify',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PayWithMonnify(),
    );
  }
}

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

  @override
  State<PayWithMonnify> createState() => _PayWithMonnifyState();
}

class _PayWithMonnifyState extends State<PayWithMonnify> {
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
        body: SizedBox(
      width: width,
      height: height,
      child: Center(
        child: TextButton(
          child: const Text("Pay With Monnify SDK"),
          onPressed: () async {
             TransactionResponse? response = await Monnify().checkout(
                context, monnifyPayload(),
                appBar: AppBarConfig(
                    titleColor: Colors.white, backgroundColor: Colors.red),
                toast: ToastConfig(
                    color: Colors.black, backgroundColor: Colors.red));

            // 调用后端来验证交易状态后再提供价值
          },
        ),
      ),
    ));
  }

  Map<String, dynamic> monnifyPayload() {
    return {
      "amount": 100,
      "currency": "NGN",
      "reference": DateTime.now().toIso8601String(),
      "customerFullName": "John Doe",
      "customerEmail": "customer@gmail.com",
      "apiKey": "MK_TEST_595UN92CCV",
      "contractCode": "8628159341",
      "paymentDescription": "Lahray World",
      "metadata": {"name": "Damilare", "age": 45},
      // "incomeSplitConfig": [
      //   {
      //     "subAccountCode": "MFY_SUB_342113621921",
      //     "feePercentage": 50,
      //     "splitAmount": 1900,
      //     "feeBearer": true
      //   },
      //   {
      //     "subAccountCode": "MFY_SUB_342113621922",
      //     "feePercentage": 50,
      //     "splitAmount": 2100,
      //     "feeBearer": true
      //   }
      // ],
      "paymentMethod": ["CARD", "ACCOUNT_TRANSFER", "USSD", "PHONE_NUMBER"],
    };
  }
}

Monnify.checkout()返回一个带有以下字段的TransactionResponse：

  String? status;
  String? message;
  String? transactionReference;
  String? paymentReference;
  int? amount;
  String? currency;
  dynamic rawData;

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中集成并使用flutter_monnify插件的示例代码。flutter_monnify是一个用于处理支付的Flutter插件，它允许你通过Monnify平台进行支付集成。

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

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

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

接下来，配置你的Android和iOS项目以支持支付。这通常涉及在AndroidManifest.xml和Info.plist文件中添加必要的权限和配置，但具体步骤可能会根据Monnify的要求有所不同。请参考Monnify的官方文档来获取详细的配置步骤。

一旦配置完成，你可以在你的Flutter代码中使用flutter_monnify插件进行支付集成。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Monnify Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () => _initiatePayment(),
            child: Text('Initiate Payment'),
          ),
        ),
      ),
    );
  }

  Future<void> _initiatePayment() async {
    try {
      // Monnify payment parameters
      final Map<String, dynamic> paymentParams = {
        'amount': 1000, // Amount in the smallest currency unit (e.g., cents for USD)
        'currency': 'USD',
        'reference': 'unique_payment_reference_${DateTime.now().toMillis()}',
        'email': 'customer@example.com',
        'phone_number': '1234567890',
        'metadata': {
          'custom_field1': 'value1',
          'custom_field2': 'value2',
        },
        'callback_url': 'https://your-callback-url.com/success', // Replace with your actual callback URL
      };

      // Initiate payment
      final result = await FlutterMonnify.initiatePayment(paymentParams);

      // Handle the result
      if (result['status'] == 'success') {
        showSnackBar('Payment successful!', context);
      } else if (result['status'] == 'failed') {
        showSnackBar('Payment failed!', context);
      } else if (result['status'] == 'pending') {
        showSnackBar('Payment pending!', context);
      } else {
        showSnackBar('Unknown payment status: ${result['status']}', context);
      }
    } catch (e) {
      showSnackBar('Error initiating payment: ${e.toString()}', context);
    }
  }

  void showSnackBar(String message, BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(message),
        duration: Duration(seconds: 3),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮，点击该按钮将启动支付流程。我们定义了支付参数，如金额、货币、参考号、电子邮件、电话号码和元数据，并调用FlutterMonnify.initiatePayment方法来启动支付。然后，我们根据支付结果显示一个SnackBar消息。

请注意，这只是一个基本的示例，实际使用中你可能需要根据Monnify的要求和你的业务需求进行更多的配置和处理。务必参考Monnify的官方文档来获取详细的API信息和最佳实践。

回到顶部