Flutter支付集成插件harbor_pay的使用

harbor_pay

harbor_pay 是一个用于接受移动支付的 Flutter 插件。

开始使用

首先，在 pubspec.yaml 文件中添加 harbor_pay 包作为依赖项。

导入 HarborPay

import 'package:harbor_pay/harbor_pay.dart';

创建 HarborPay 对象

HPay hp = new HPay(
    clientId: '123456', // 替换为您的实际 Client ID
    buttonColors: Colors.black, // 支付按钮的颜色
    bottomSheetBackgroundColor: Colors.white // 底部弹窗的背景颜色
);

处理支付

var paymentResponse = await
hp.processPayment(
    context: context, // 当前上下文
    amount: 14.00, // 支付金额
    customerNumber: '2330000000' // 客户手机号码
);
print(paymentResponse.toString());

// 可选参数：customerName 和 extra 数据

响应示例

{
  "success": true,
  "message": ""
}

如果 success 的值为 true，则表示支付已成功处理，无需进一步操作。

完整示例代码

以下是一个完整的示例代码，展示如何在 Flutter 中使用 harbor_pay 插件进行支付。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HarborPay Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'HarborPay Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  HPay hp = new HPay(
    clientId: '123456', // 替换为您的实际 Client ID
    buttonColors: Colors.black, // 支付按钮的颜色
    bottomSheetBackgroundColor: Colors.white, // 底部弹窗的背景颜色
    callback: 'https://' // 可选回调 URL
  );

  void doProcessPayment() async {
    var paymentResponse = await hp.processPayment(
        context: context, // 当前上下文
        amount: 1.00, // 支付金额
        customerNumber: '233249713683'); // 客户手机号码
    print(paymentResponse.toString()); // 打印支付结果
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // 设置应用标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              width: 200,
              child: TextButton(
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(
                          ThemeData.light().primaryColor)), // 按钮背景颜色
                  onPressed: doProcessPayment, // 点击事件
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        'Request Money', // 按钮文字
                        style: TextStyle(color: Colors.white), // 文字颜色
                      ),
                      Icon(Icons.call_received, color: Colors.white), // 图标
                    ],
                  )),
            ),
          ],
        ),
      ),
    );
  }
}

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

caililin 1楼•8 天前

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

harbor_pay 是一个 Flutter 插件，旨在简化支付集成的过程，支持多种支付方式，如支付宝、微信支付等。使用这个插件，开发者可以更快速地集成支付功能到他们的 Flutter 应用中。

以下是如何使用 harbor_pay 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 harbor_pay 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  harbor_pay: ^0.0.1  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 配置支付平台

根据你使用的支付平台（如支付宝、微信支付等），你可能需要进行一些平台特定的配置。

Android

在 android/app/src/main/AndroidManifest.xml 文件中，添加以下权限和配置：

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

iOS

在 ios/Runner/Info.plist 文件中，添加以下配置：

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

3. 初始化插件

在你的 Flutter 应用中初始化 harbor_pay 插件。通常你可以在 main.dart 文件中进行初始化：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await HarborPay.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Harbor Pay Demo',
      home: PaymentScreen(),
    );
  }
}

4. 发起支付

在需要发起支付的地方，使用 HarborPay 提供的方法来发起支付请求。例如：

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

class PaymentScreen extends StatelessWidget {
  Future<void> _startPayment() async {
    try {
      // 发起支付请求
      final result = await HarborPay.startPayment(
        paymentType: PaymentType.alipay,  // 支付类型
        orderInfo: 'your_order_info',     // 订单信息
      );

      // 处理支付结果
      if (result.status == PaymentStatus.success) {
        print('Payment successful: ${result.message}');
      } else {
        print('Payment failed: ${result.message}');
      }
    } catch (e) {
      print('Error: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Harbor Pay Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _startPayment,
          child: Text('Start Payment'),
        ),
      ),
    );
  }
}