Flutter支付集成插件paybox的使用

Flutter支付集成插件paybox的使用

paybox

A new Flutter plugin.

集成

Android支付宝

  1. 由于alipay sdk使用的本地依赖，而且近期的gradle版本不推荐将android modules内的本地依赖直接编译到app工程中，所以需要配合修改原生工程

步骤：

  1. 打开目录 ./flutterappxx/android/app/，并创建目录 /libs

  2. 下载 alipaysdk-15.8.03.210428205839.aar 或在支付宝官方网站下载 alipaysdk-15.8.03.210428205839，并拷贝到 /libs 目录。

  3. 在 /app/build.gradle 中添加如下代码：

    // 替换
android{
    defaultConfig{
        //minSdkVersion 16
        minSdkVersion 19
    }
}

// 添加
// 表示使用libs中的库
repositories {
    flatDir(
            dirs: "libs"
    )
}

iOS支付宝

  1. 插件使用 cocodspod AlipaySDK-iOS，拷贝静态文件到app项目中，所以需要修改 ios/Podfile

    # 注释掉 use_frameworks!
target 'Runner' do
  # use_frameworks!
  use_modular_headers!

  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

  2. 在原生工程中添加相关依赖：

    • 在 Build Phases 选项卡的 Link Binary With Libraries 中，增加以下依赖：
      • libc++.tbd
      • libz.tbd
      • SystemConfiguration.framework
      • CoreTelephony.framework
      • QuartzCore.framework
      • CoreText.framework
      • CoreGraphics.framework
      • UIKit.framework
      • Foundation.framework
      • CFNetwork.framework
      • CoreMotion.framework
    • 最后还需要把 AlipaySDK.framework 也加入依赖库。

  3. 添加 app scheme url
    在发起支付的时候需要传入，用户支付宝处理完成逻辑之后返回app。

  4. 添加后台能力
    （似乎是在唤醒微信的似乎需要，没有测试）

  5. 支付回调
    在 AppDelegate.swift 中实现回调逻辑：

    // Runner-Bridging-Header.h
#include <AlipaySDK/AlipaySDK.h>

// appDelegate.swift
import UIKit
import Flutter

[@UIApplicationMain](/user/UIApplicationMain)
[@objc](/user/objc) class AppDelegate: FlutterAppDelegate {
    // method channel
    var channel: FlutterMethodChannel?

    override func application(
      _ application: UIApplication,
      didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
      GeneratedPluginRegistrant.register(with: self)
      // 注册channel
      channel = FlutterMethodChannel(name: "paybox", binaryMessenger: window.rootViewController as! FlutterViewController as! FlutterBinaryMessenger)
      return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

    override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
        if(url.host == "safepay") {
            AlipaySDK.defaultService().processOrder(withPaymentResult: url, standbyCallback: { result in
                // standbyCallback 为nil时使用默认处理
                // 自定义处理，使用method channel 通知支付结果
                self.channel?.invokeMethod("payResult", arguments: result)
            })
        }
        return true
    }
}

Android微信

无需操作。

iOS微信

  1. 在 Info.plist 中添加 LSApplicationQueriesSchemes array类型，包含 weixinULAPI, wechat, weixin

    <key>LSApplicationQueriesSchemes</key>
<array>
  <string>weixinULAPI</string>
  <string>wechat</string>
  <string>weixin</string>
</array>

  2. swift代码实现：

    // Runner-Bridging-Header.h
#include "WXApi.h"

// AppDelegate.swift
import UIKit
import Flutter

[@UIApplicationMain](/user/UIApplicationMain)
[@objc](/user/objc) class AppDelegate: FlutterAppDelegate, WXApiDelegate {
    var channel: FlutterMethodChannel?

    override func application(
      _ application: UIApplication,
      didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
      GeneratedPluginRegistrant.register(with: self)
      channel = FlutterMethodChannel(name: "paybox", binaryMessenger: window.rootViewController as! FlutterViewController as! FlutterBinaryMessenger)
      return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

    override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
        // 支付宝回调
        if(url.host == "safepay") {
            // standbyCallback 为nil时使用默认paybox回调
            AlipaySDK.defaultService().processOrder(withPaymentResult: url, standbyCallback: nil)
        }
        return true
    }

    // 微信支付回调
    // appdelegate 需要继承 WXApiDelegate
    func onResp(_ resp: BaseResp) {
        let map = NSDictionary()
        var result = ""
        switch resp.type {
        case 0:
            result = "成功"
        case -1:
            result = "一般错误"
        case -2:
            result = "用户取消"
        case -3:
            result = "发送失败"
        case -4:
            result = "认证失败"
        case -5:
            result = "不支持错误"
        case -6:
            result = "被屏蔽所有操作，可能由于签名不正确或无权限"
        default:
            result = "未知错误"
        }
        map.setValue(result, forKey: "result")
        map.setValue(resp.errCode, forKey: "status")
        map.setValue(resp.errStr, forKey: "memo")
        channel?.invokeMethod("wxpayResult", arguments: resp)
    }
}

使用

dart代码实现支付功能：

// 支付宝支付, orderInfo 拼接为字符串
Paybox.aliPay("appid=123&orderId=233", urlScheme: "alipaydemo");

// 初始化微信支付，传入appid，universalLink替代scheme (ios only)
Paybox.wxpayInit("123123132", universalLink: "");

// 使用微信支付
Paybox.wxPay(WxPayConfig(
    appId: "appId",
    partnerId: "partnerId",
    prepayId: "prepayId",
    nonceStr: "nonceStr",
    timeStamp: "123131",
    sign: "sign"));

回调

使用 eventBus 回调需要在 pubspec.yaml 中添加 event_bus 库：

dependencies:
  event_bus: ^2.0.0

借助 methodChannel 可以实现 promise 方式回调，但原生实现各不相同（支付宝android Runnable Thread，微信注册了activity需要借助广播通知，ios需要在入口 appdelegate.swift 接收）。

示例代码：

// 支付宝支付回调
var alipayListen = Paybox.eventBus.on<AlipayResult>().listen((event) {
  print("ali:" + event.memo + event.status);
});

// 微信支付回调
var wxpayListen = Paybox.eventBus.on<WxPayResult>().listen((event) {
  print("wx:" + event.result + event.status);
});

示例代码

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:paybox/paybox.dart';
import './payDialog.dart';

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  late StreamSubscription alipayListen;
  late StreamSubscription wxpayListen;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 支付宝支付回调
    alipayListen = Paybox.eventBus.on<AlipayResult>().listen((event) {
      print("ali:" + event.memo + event.status);
    });

    wxpayListen = Paybox.eventBus.on<WxPayResult>().listen((event) {
      print("wx:" + event.result + event.status);
    });

    Paybox.wxpayInit("123123132", universalLink: "https://example.com/appStoreLink");
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    alipayListen.cancel();
    wxpayListen.cancel();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: SingleChildScrollView(
        child: Container(
          margin: EdgeInsets.all(10),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  MaterialButton(
                    color: Theme.of(context).primaryColor,
                    onPressed: () {
                      ShowDialog(context);
                    },
                    child: Text(
                      "提交订单",
                      style: Theme.of(context)
                          .textTheme
                          .bodyText1!
                          .copyWith(color: Colors.white),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


PayBox 是一个用于 Flutter 的支付集成插件，它支持多种支付方式，如信用卡、支付宝、微信支付等。通过 PayBox，你可以轻松地在 Flutter 应用中集成支付功能。

1. 安装 paybox 插件

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

dependencies:
  flutter:
    sdk: flutter
  paybox: ^1.0.0  # 请确保使用最新版本

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

2. 配置 paybox 插件

在 main.dart 文件中初始化 PayBox 插件。你需要提供一些必要的配置，比如商户 ID、支付网关等。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 PayBox
  await PayBox.initialize(
    merchantId: 'YOUR_MERCHANT_ID',
    gateway: 'https://your-payment-gateway.com',
    // 其他配置项
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PayBox Example',
      home: PaymentScreen(),
    );
  }
}

3. 创建支付页面

在你的应用中创建一个支付页面，用户可以在该页面选择支付方式并完成支付。

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

class PaymentScreen extends StatelessWidget {
  Future<void> _makePayment() async {
    try {
      // 创建支付请求
      PaymentRequest request = PaymentRequest(
        amount: 100.0, // 支付金额
        currency: 'USD', // 货币类型
        orderId: 'ORDER_12345', // 订单ID
        description: 'Test Payment', // 订单描述
      );

      // 发起支付
      PaymentResponse response = await PayBox.makePayment(request);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PayBox Payment'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _makePayment,
          child: Text('Make Payment'),
        ),
      ),
    );
  }
}

4. 处理支付结果

在 _makePayment 方法中，你可以根据 PaymentResponse 的状态来处理支付结果。如果支付成功，你可以更新订单状态或显示成功信息；如果支付失败，你可以提示用户重新尝试或选择其他支付方式。

5. 支持的支付方式

PayBox 插件支持多种支付方式，你可以根据需要在 PaymentRequest 中指定支付方式：

PaymentRequest request = PaymentRequest(
  amount: 100.0,
  currency: 'USD',
  orderId: 'ORDER_12345',
  description: 'Test Payment',
  paymentMethod: PaymentMethod.creditCard, // 指定支付方式
);
回到顶部