Flutter支付插件flutter_bani_checkout的使用

Flutter支付插件flutter_bani_checkout的使用

本README描述了该包。如果你将此包发布到pub.dev，那么此README的内容将会出现在你的包的首页。

安装

在工作区终端运行以下命令：

flutter pub add flutter_bani_checkout

在应用中导入该包：

import 'package:flutter_bani_checkout/flutter_bani_checkout.dart';

此包使用Riverpod。因此，我们需要用ProviderScope包装MyApp方法，如下面所示：

void main() {
  runApp(const ProviderScope(
    child: MyApp(),
  ));
}

Android要求

在android/app/build.gradle中，应将最低SDK版本设置为19。

android {
    defaultConfig {
        minSdkVersion 19
    }
}

功能

你可以单独在一个页面中使用BaniShopperCheckout小部件，或者使用BaniShopper.checkoutModalSheet底部弹窗。

BaniShopperCheckout

此小部件接受一个自定义类BaniObject作为必需属性。

final String text; // 显示给用户的文本
final String amount; // 购买的金额
final String phoneNumber; // 用户的ITU标准电话号码，例如：+234 xxx xxxx xxxx
final String merchantKey; // 商户密钥
final String ref; // 交易参考。应是一个唯一字符串
final String email; // 用户邮箱
final String firstName; // 用户名
final String lastName; // 用户姓氏
final Map<String, dynamic> metaData; // 元数据

可以提供以下可选函数以在接收到Event Response时通知你：

  • onClose: 当小部件或模态框关闭或被取消时调用此函数。
  • onSuccess: 当成功完成交易时调用此函数。
  • onCustomerExists: 当确认有效客户时调用此函数。
  • onCheckOutClose: 在成功接收付款并关闭小部件后调用此函数。

EventResponse类返回的包含事务参考和客户参考。

示例

BaniShopperCheckout(
  baniObject: BaniObject(
    text: "Pay with Bani",
    amount: "200",
    phoneNumber: "+23408039485758",
    merchantKey: "pub_test_KB9A23HSYR327H5DKW45Y",
    ref: "ref-${Random.secure().nextInt(900000) + 100000}",
    email: "usercustomer@gmail.com",
    firstName: "John",
    lastName: "Doe",
    metaData: {
      "order_ref": "fake_0rderre6",
    },
  ),
  onSuccess: (eventResponse){
    print("Success!");
  },
  onClose: (eventResponse) {
    print(eventResponse.toString());
    print("Closed!");
  },
),

await BaniShopper.checkoutModalSheet(
  context: context,
  baniObject: BaniObject(
    text: "Pay with Bani",
    amount: "200",
    phoneNumber: "+23408038475839",
    merchantKey: "pub_test_KB9A23HSYR327H5DKW45Y",
    ref: "ref-${Random.secure().nextInt(900000) + 100000}",
    email: "usercustomer@gmail.com",
    firstName: "John",
    lastName: "Doe",
    metaData: {
      "order_ref": "fake_0rderre6",
    },
  ),
  // onClose: onClose,
  // onSuccess: onSuccess,
  // onCustomerExists: onCustomerExists,
)

查看示例包以获取工作演示。

引入Bani Shopper集成

在您的应用程序中集成Bani Shopper支付功能只需三个简单的步骤！

第一步

第一步需要收集你要发送给Bani Shopper的数据。以下是你可以传递的数据变量，其中collectorRef是唯一必需的变量：

  • 收集者引用（以前称为商户部落引用）
  • 金额
  • 交易参考
  • 分支ID
  • 自定义数据
String collectorRef = "BN-e78b38qwrt4bebz514ya1dzpz9";
String amount = "5000";
String transactionReference = "dsfWDFDFddfREEGDfREw";
String branchID = "21";

第二步

第二步是将这些变量放入payInBaniShopper函数中。BaniShopper.payInBaniShopper函数负责构造字符串并启动Bani Shopper，所有你在第一步中创建的变量都将被使用：

Future<void> payInBaniShopper({
  required String? collectorRef,
  String? amount,
  String? transactionReference,
  String? branchID,
  Map<String, dynamic>? customData,
})

第三步

最后一步是最简单的！我们调用payInBaniShopper函数！这是一个异步调用，所以等待其调用非常重要：

ElevatedButton(
  onPressed: () async {
    await payInBaniShopper(
      collectorRef: collectorRef,
      amount: amount,
      branchID: branchID,        
      transactionReference: transactionReference,
      customData: {
        "is_internal": isInternal,
        "order_id": orderID,
      },
    );
  },
  child: const Text("Launch Bani Shopper"),
),

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

1 回复

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


当然，以下是如何在Flutter项目中使用flutter_bani_checkout插件的一个示例代码案例。flutter_bani_checkout插件通常用于集成支付功能，这里假设你已经在pubspec.yaml文件中添加了依赖并运行了flutter pub get。

1. 添加依赖

首先，确保你的pubspec.yaml文件中包含以下依赖：

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

2. 初始化支付插件

在你的main.dart文件中或者任何你需要初始化支付插件的地方，进行初始化：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final FlutterBaniCheckout _flutterBaniCheckout = FlutterBaniCheckout();

  @override
  void initState() {
    super.initState();
    // 初始化支付插件，如果需要配置参数可以在这里进行
    // _flutterBaniCheckout.initialize(...);
  }

  void _startPayment() async {
    try {
      final paymentResult = await _flutterBaniCheckout.startPayment(
        amount: 100.0, // 支付金额
        currencyCode: 'USD', // 货币代码
        description: 'Test Payment', // 支付描述
        // 其他可选参数根据插件文档添加
      );

      if (paymentResult.status == PaymentStatus.success) {
        // 支付成功处理逻辑
        print('Payment successful: ${paymentResult.data}');
      } else if (paymentResult.status == PaymentStatus.failed) {
        // 支付失败处理逻辑
        print('Payment failed: ${paymentResult.errorMessage}');
      } else if (paymentResult.status == PaymentStatus.canceled) {
        // 支付取消处理逻辑
        print('Payment canceled');
      }
    } catch (e) {
      // 错误处理
      print('An error occurred: $e');
    }
  }

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

3. 处理支付结果

在上面的代码中，_startPayment方法启动支付流程，并处理支付结果。根据支付结果的状态（成功、失败、取消），执行相应的逻辑。

4. 运行应用

确保你已经按照插件文档的要求配置好必要的支付参数（如API密钥等），然后运行你的Flutter应用。点击按钮将启动支付流程，并显示支付结果。

注意事项

  • API密钥和其他敏感信息：确保不要在客户端代码中硬编码API密钥或其他敏感信息。通常这些信息应该通过安全的方式（如服务器端）传递给客户端。
  • 支付环境：在开发和测试阶段，使用测试环境进行支付。在生产环境中，确保切换到正式支付环境。
  • 错误处理：在实际应用中，添加更多的错误处理和用户反馈机制，以提升用户体验。

这个示例展示了如何在Flutter应用中使用flutter_bani_checkout插件进行支付集成。根据具体需求，你可能需要调整支付参数和处理逻辑。

回到顶部