Flutter支付集成插件budpay_inline_flutter的使用

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

Flutter支付集成插件budpay_inline_flutter的使用

BudPay Inline Flutter插件

一个用于在Android和iOS平台上无缝集成BudPay内联支付系统的Flutter插件。此插件通过WebView封装了现有的BudPay JavaScript内联支付解决方案,使你能够在Flutter应用程序中轻松接受付款。


目录


特性

  • 跨平台支持:在Android和iOS平台上都能无缝运行。
  • 易于集成:简单的API来发起支付。
  • 可定制:支持自定义字段、回调URL等。
  • 错误处理:提供了成功、错误和取消事件的回调。
  • 安全:使用BudPay的安全支付基础设施。

安装

在项目的pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  budpay_inline_flutter: ^0.0.1  # 请替换为最新版本

然后运行:

flutter pub get

开始使用

要开始使用该插件,请遵循以下步骤:

  1. 导入包

    import 'package:budpay_inline_flutter/budpay_inline_flutter.dart';
    
  2. 初始化支付参数

    准备BudPay所需的必要参数,例如publicKeyemailamount等。

  3. 发起支付

    使用BudpayInlinePayment小部件来启动支付过程。


使用方法

以下是使用budpay_inline_flutter插件在你的Flutter应用程序中的分步指南。

1. 导入插件

import 'package:budpay_inline_flutter/budpay_inline_flutter.dart';

2. 准备支付信息

收集或定义必要的支付信息:

  • 公钥:从你的BudPay仪表板获取公钥。
  • 客户详情:电子邮件、名字、姓氏等。
  • 交易详情:金额、货币、参考号等。

3. 创建支付小部件

使用BudpayInlinePayment小部件来启动支付过程。

BudpayInlinePayment(
  publicKey: 'YOUR_PUBLIC_KEY',
  email: 'customer@example.com',
  amount: '1000',
  firstName: 'John',
  lastName: 'Doe',
  currency: 'NGN',
  reference: 'unique_transaction_reference',
  onSuccess: (response) {
    // 处理成功的支付
    print('Payment successful: $response');
  },
  onError: (error) {
    // 处理错误
    print('Payment error: $error');
  },
  onCancel: () {
    // 处理用户取消的情况
    print('Payment cancelled by user');
  },
  customFields: {
    'custom_field_1': 'value1',
    'custom_field_2': 'value2',
  },
)

4. 导航到支付屏幕

你可以导航到一个新的屏幕以显示支付小部件。

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => BudpayInlinePayment(
      // ... 参数 ...
    ),
  ),
);

API 参考

BudpayInlinePayment

一个启动BudPay内联支付过程的小部件。

构造函数参数

参数 类型 必填 描述
publicKey String 你的BudPay公钥。
email String 客户的电子邮件地址。
amount String 收取的金额(字符串形式)。
firstName String? 客户的名字。
lastName String? 客户的姓氏。
currency String 货币代码(例如,NGNUSD)。
reference String? 唯一的交易参考。如果未提供,BudPay将生成一个。
logoUrl String? 自定义徽标URL,显示在支付弹窗中。
callbackUrl String? BudPay发送支付通知的URL。
customFields Map<String, dynamic>? 额外的自定义字段作为键值对。
onSuccess Function(dynamic) 成功支付时调用的回调函数。
onError Function(dynamic) 发生错误时调用的回调函数。
onCancel Function() 用户取消支付时调用的回调函数。

平台特定设置

Android

1. 网络权限

在你的应用的AndroidManifest.xml文件中添加以下权限以允许网络访问:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.your_app">
    <!-- 添加这一行 -->
    <uses-permission android:name="android.permission.INTERNET"/>
    <!-- 现有内容 -->
</manifest>

2. WebView初始化(可选)

如果你在Android上遇到WebView问题,可以指定WebView实现:

import 'dart:io';
import 'package:webview_flutter/webview_flutter.dart';

@override
void initState() {
  super.initState();

  if (Platform.isAndroid) {
    WebView.platform = AndroidWebView();
  }

  // 其余初始化代码
}

iOS

1. 应用传输安全性设置

为了让你的应用加载网页内容,更新Info.plist文件:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

2. WKWebView配置(可选)

确保在你的Flutter项目中正确配置WebView。大多数情况下,默认配置就足够了。


权限

确保设置了以下权限:

  • Android:互联网访问 (android.permission.INTERNET)。
  • iOS:网络访问配置 (Info.plist)。

错误处理

实现onError回调以处理支付过程中的错误。

onError: (error) {
  // 处理错误
  print('Payment error: $error');
}

可能的错误场景包括:

  • 网络问题。
  • 支付失败。
  • 意外响应。

确保向用户提供有意义的反馈并优雅地处理错误。


重要注意事项

  • 测试模式与生产模式:使用BudPay测试公钥进行测试,并在生产环境中切换到生产公钥。
  • 货币:确保提供的货币代码受支持(如NGNGHSUSD等)。
  • 金额格式amount参数应是一个字符串,表示金额的最小货币单位(如NGN中的kobo)。
  • 平台支持:此插件支持Android和iOS平台。不支持Web和桌面平台。
  • WebView内容:插件使用WebView加载BudPay的内联支付JavaScript。确保你的应用允许WebView内容执行JavaScript。

故障排查

WebView不显示

  • 确保设置了所有必需的权限。
  • 检查控制台中的任何错误。
  • 验证网络连接。

支付未处理

  • 确认你的公钥是否正确。
  • 确保金额和其他参数有效。
  • 检查BudPay的服务状态。

错误消息

  • 实现全面的错误处理。
  • 记录错误以便调试。
  • 提供用户友好的错误消息。

贡献

欢迎贡献!请遵循以下步骤:

  1. fork仓库 点击仓库页面右上角的"Fork"按钮。

  2. 创建新分支

    git checkout -b feature/your-feature
    
  3. 提交更改

    git commit -am 'Add a feature'
    
  4. 推送分支

    git push origin feature/your-feature
    

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

1 回复

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


当然,以下是如何在Flutter项目中集成并使用budpay_inline_flutter插件的示例代码。请注意,这只是一个基本示例,实际应用中可能需要根据具体需求进行调整。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加budpay_inline_flutter依赖:

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

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

2. 配置Android和iOS

Android

android/app/src/main/AndroidManifest.xml中添加必要的权限(根据插件文档可能需要):

<uses-permission android:name="android.permission.INTERNET"/>

iOS

ios/Runner/Info.plist中可能需要添加一些配置(根据插件文档)。此外,确保你的Xcode项目配置正确,特别是针对支付相关的权限和设置。

3. 初始化BudPay

在你的Flutter应用中,初始化BudPay并配置必要的参数。以下是一个简单的示例:

import 'package:flutter/material.dart';
import 'package:budpay_inline_flutter/budpay_inline_flutter.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 BudPay _budPay = BudPay();

  @override
  void initState() {
    super.initState();
    // 初始化BudPay,这里需要提供你的API密钥和其他配置信息
    _budPay.initialize(
      apiKey: '你的API密钥',  // 请替换为你的实际API密钥
      environment: 'sandbox', // 或者 'production'
      // 其他可能的配置参数...
    );
  }

  void _startPayment() async {
    try {
      // 配置支付参数
      final paymentParams = {
        'amount': '100.00', // 支付金额
        'currency': 'USD',  // 货币类型
        'description': '测试支付', // 支付描述
        // 其他可能的支付参数...
      };

      // 发起支付请求
      final result = await _budPay.startPayment(paymentParams);
      print('支付结果: $result');

      // 根据支付结果做相应处理
      if (result['status'] == 'success') {
        // 支付成功
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('支付成功'),
            content: Text('支付金额为 ${result['amount']}'),
            actions: <Widget>[
              FlatButton(
                child: Text('确定'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        );
      } else {
        // 支付失败或取消
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('支付失败'),
            content: Text('支付失败: ${result['message']}'),
            actions: <Widget>[
              FlatButton(
                child: Text('确定'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        );
      }
    } catch (e) {
      print('支付过程中发生错误: $e');
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: Text('错误'),
          content: Text('支付过程中发生错误: $e'),
          actions: <Widget>[
            FlatButton(
              child: Text('确定'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BudPay支付集成示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _startPayment,
          child: Text('发起支付'),
        ),
      ),
    );
  }
}

4. 运行应用

确保所有配置正确后,运行你的Flutter应用。点击“发起支付”按钮,应该会跳转到BudPay的支付界面。

注意事项

  • 确保你已经正确配置了BudPay后台,并且API密钥等敏感信息不要硬编码在客户端代码中。
  • 根据实际支付流程调整支付参数和结果处理逻辑。
  • 测试时请使用沙箱环境,上线前切换到生产环境。

以上代码提供了一个基本的集成示例,实际应用中可能需要根据具体需求进行更多的定制和调整。

回到顶部