Flutter支付插件binoxuspay的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter支付插件binoxuspay的使用

Logo Binoxus Pay

此插件允许您通过多种方式收集付款：银行卡[借记|信用卡], Bin-Wallet, 移动支付。 您需要在 https://pay.binoxus.com 注册一个商户账户，以获取您的认证信息。

使用步骤

使用该插件非常简单，只需遵循以下步骤：

  1. 在服务器端初始化支付
  2. 获取 systemRef 和 token
  3. 将这些信息传递给 BinoxusPayCheckout 组件
  4. 实现等待支付回调的逻辑
  5. 支付回调可以是 IBinoxusPayOnResponse 或者在出现意外错误时为 IBinoxusPayOnError

必备条件

要使插件正常工作，需要满足一些前提条件。

Android

  1. 在文件 <strong><em>android/app/src/main/AndroidManifest.xml</em></strong> 中添加以下权限：
<application
 ...
    android:usesCleartextTraffic="true">
    ...
</application>
...
<uses-permission android:name="android.permission.INTERNET"/>
  1. 修改文件 <strong><em>android/app/src/build.gradle</strong></em> 中的 <strong><em>minSdkVersion</em></strong> 版本：
minSdkVersion 17

iOS

  1. 在文件 <strong><em>ios/Runner/Info.plist</em></strong> 中添加以下权限：
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

支付初始化

首先，在服务器端初始化支付。您将收到包含以下数据的响应：

  • <strong>bin_status</strong> | 类型 EApiResponseStatusCode | 初始化操作的状态，如果为 <code>BIN000</code>，则操作成功，否则出现问题；
  • <strong>system_ref</strong> | 支付系统中的支付标识符；
  • <strong>customer_ref</strong> | 您的支付标识符；
  • <strong>token</strong> | 在调用支付组件时使用的令牌；

支付回调

当支付被触发后，插件会等待支付状态的最终结果。支付完成后，插件将返回一个类型为 <strong>IBinoxusPayOnResponse</strong> 的回调：

  • <strong>amount</strong> | 类型：Double | 支付金额；
  • <strong>currency</strong> | 类型：String | 支付货币；
  • <strong>binStatus</strong> | 支付操作状态 (BIN000 表示操作成功，但需要验证 <strong>paymentStatus</strong> 确保支付成功，从 <code>BIN001</code> 开始表示操作失败) | 字符串；
  • <strong>paymentStatus</strong> | 类型：IPaymentStatus | 支付操作状态 (APPROVED 或 FAIL) | 字符串；
  • <strong>customRef</strong> | 类型：String | 您的支付标识符；
  • <strong>title</strong> | 类型：String | 对应支付状态的标题；
  • <strong>systemRef</strong> | 类型：String | 支付在 Binoxus Pay 中的标识符；

处理错误回调

在处理过程中，可能会发生某些类型的错误，例如缺少某些支付参数。预期的返回格式如下：

  • <strong>message</strong> | 字符串：描述失败的原因；
  • <strong>title</strong> | 字符串：失败的标题；

插件使用

总结来说，插件通过调用一个组件来使用：

// 配置
var configs =  IBinoxusPayConfigs(
    token:  'ONE_TIME_TOKEN',
);
var paymentBody =  IBinoxusPaymentBody(
    systemRef:  'SYSTEM_REF',
);
Navigator.of(context).push(
// 打开支付页面
MaterialPageRoute(
    builder: (context) =>  BinoxusPayCheckout(
    title:  "Binoxus Pay",
    titleBackgroundColor:  Colors.blue.shade900,
                titleStyle:  const  TextStyle(color:  Colors.white),
    configs: configs,
    paymentBody: paymentBody,
    onResponse: (value) {
        debugPrint("onResponse : $value");
        if (value.binStatus == EApiResponseStatusCode.bIN000) {
        // 支付成功

        } else {
        // 支付失败
        }
    },
    onError: (value) {
        debugPrint("onError : $value");
        // 支付失败
    },
    ),
));

完整示例

以下是完整的示例代码：

import 'package:binoxuspay/model/binoxuspay_response.dart';
import 'package:binoxuspay/widgets/server_less_binoxuspay.dart';
import 'package:flutter/material.dart';

// 项目导入
import 'package:binoxuspay/binoxuspay.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Binoxus Payment Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'BinoxusPay Demo Page'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '开始支付',
            ),
            const SizedBox(
              height: 20.0,
            ),
            TextButton.icon(
                style: OutlinedButton.styleFrom(
                  foregroundColor: Colors.blue,
                  side: const BorderSide(
                      color: Colors.blue, width: 1), // 边框颜色
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12), // 圆角半径
                  ),
                  padding: const EdgeInsets.symmetric(
                      horizontal: 24, vertical: 12), // 文字颜色
                ),
                onPressed: () {
                  // 配置
                  var configs = IBinoxusPayConfigs(
                    token: 'ONE_TIME_TOKEN',
                  );
                  var paymentBody = IBinoxusPaymentBody(
                    systemRef: '66fe6faa804a97fc60faae19',
                  );

                  Navigator.of(context).push(
                    // 打开支付页面
                    MaterialPageRoute(
                      builder: (context) => ServerLessBinoxusPayCheckout(
                        title: "Binoxus Pay",
                        titleBackgroundColor: Colors.blue.shade900,
                        titleStyle: const TextStyle(color: Colors.white),
                        configs: configs,
                        paymentBody: paymentBody,
                        onResponse: (responseValue) {
                          debugPrint("onResponse : $responseValue");
                          if (responseValue.binStatus ==
                              EApiResponseStatusCode.bIN000) {
                            // 检查支付状态
                            if (responseValue.paymentStatus ==
                                IPaymentStatus.approved) {
                              // 支付成功
                            } else {
                              // 支付失败
                            }
                          } else {
                            // 支付失败
                          }
                        },
                        onError: (errorValue) {
                          debugPrint("onError : $errorValue");
                          // 支付失败
                        },
                      ),
                    ),
                  );
                },
                label: const Text("支付"),
                icon: const Icon(
                  Icons.monetization_on,
                  color: Colors.blue,
                ))
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter应用中使用binoxuspay支付插件的示例代码。这个示例将展示如何集成binoxuspay插件，并调用支付功能。

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

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

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

接下来，在你的Flutter项目中，你可以按照以下步骤使用binoxuspay插件：

  1. 初始化插件并配置支付参数

在你的主文件（例如main.dart）或者支付功能相关的Dart文件中，导入binoxuspay插件并进行初始化。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BinoxusPay Payment Example'),
        ),
        body: Center(
          child: PaymentButton(),
        ),
      ),
    );
  }
}

class PaymentButton extends StatefulWidget {
  @override
  _PaymentButtonState createState() => _PaymentButtonState();
}

class _PaymentButtonState extends State<PaymentButton> {
  final BinoxusPay _binoxusPay = BinoxusPay();

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        // 配置支付参数
        final Map<String, dynamic> paymentData = {
          'publicKey': '你的公钥',  // 替换为你的公钥
          'amount': '100.00',       // 支付金额
          'currency': 'USD',        // 货币类型
          'description': '商品描述', // 商品描述
          'orderId': '123456',       // 订单ID
          // 添加其他必要的支付参数
        };

        try {
          // 调用支付方法
          final result = await _binoxusPay.startPayment(paymentData);
          if (result['status'] == 'success') {
            // 支付成功处理
            showDialog(
              context: context,
              builder: (context) => AlertDialog(
                title: Text('支付成功'),
                content: Text('支付金额: ${result['amount']}'),
              ),
            );
          } else {
            // 支付失败处理
            showDialog(
              context: context,
              builder: (context) => AlertDialog(
                title: Text('支付失败'),
                content: Text('错误信息: ${result['message']}'),
              ),
            );
          }
        } catch (e) {
          // 错误处理
          showDialog(
            context: context,
            builder: (context) => AlertDialog(
              title: Text('错误'),
              content: Text('发生错误: $e'),
            ),
          );
        }
      },
      child: Text('支付'),
    );
  }
}
  1. 处理支付回调

binoxuspay插件通常会在支付完成后通过某种方式（如Activity Result回调或平台通道）返回支付结果。然而，由于具体实现细节可能因插件版本和平台（iOS/Android）而异，这里不展示具体的回调处理代码。

在实际项目中，你需要查阅binoxuspay插件的官方文档，了解如何在Android和iOS平台上处理支付回调，并根据需要进行相应的配置和代码实现。

请注意，上述代码仅为示例，实际使用时需要根据binoxuspay插件的API文档进行适当调整。特别是支付参数、公钥和订单ID等信息，需要根据你的实际业务逻辑进行配置。

另外，由于支付功能涉及敏感信息和资金安全，强烈建议在正式上线前进行充分的测试和验证，并确保符合相关法律法规和支付平台的要求。

回到顶部