MPay Flutter 插件使用文档 #

MPay Flutter 插件 提供了 MPay、AliPay 和 WeChatPay 等支付渠道的集成，允许在 Flutter 应用中实现支付功能。

目录 #

1. 安装
2. 初始化
3. 支付方法
   • MPay 支付
   • AliPay 支付
   • WeChatPay 支付
4. 环境配置
5. 示例代码

1. 安装 #

在 pubspec.yaml 文件中添加插件依赖：

dependencies:
  mpay_plugin: ^lastversion

2. 初始化 #

在使用支付功能之前，需要先进行插件的初始化设置：

初始化过程：

void initState() {
  super.initState();

  // 注册微信支付
  registerWeChat();

  // 初始化插件，设置支付环境
  _mPayPlugin.init(
    aliPayEnv: AliPayEnv.ONLINE, // 设置 AliPay 环境为在线 (可选：SANDBOX 用于测试)
    mPayEnv: MPayEnv.UAT,        // 设置 MPay 环境为 UAT (可选：PRODUCTION 或 SIT)
  );
}

3. 支付方法 #

MPay 支付

在 MPay 支付方法中，我们不再通过传入不同的支付渠道来切换支付方式datas要换为你后台所需的支付请求参数，根据返回结果支付信息调用 MPay 的支付方法。

Future<void> payWithMPay() async {
  EasyLoading.show(status: "支付中...", maskType: EasyLoadingMaskType.black);

  // 准备支付数据
  Map<String, dynamic> datas = {
    "payChannel": "mpay",  
    "totalFee": "5",      
    "currency": "MOP",     
    "subject": "测试订单", 
    "body": "测试支付"      
  };

  // 从后端获取签名数据
  var response = await dio.post("test/merchantSign", data: FormData.fromMap(datas));
  String jsonString = json.encode(response.data["data"]["signData"]);
  Logger().i(jsonString);

  try {
    // 调用插件的 mPay 方法进行支付
    var result = await _mPayPlugin.mPay(jsonString, PayChannel.mPay);
    if (result.resultStatus == "9000") {
      EasyLoading.showSuccess("支付成功");
    } else {
      EasyLoading.showError(result.result ?? "支付失败");
    }
  } catch (e) {
    EasyLoading.dismiss();
    Logger().e("支付失败: $e");
  }
}

AliPay 支付

AliPay 支付需要传入签名数据，这些数据通常是从后端接口获取。com.mpay_plugin.demo

Future<void> payWithAliPay() async {
  try {
    // 调用插件的 aliPay 方法进行支付
    var result = await _mPayPlugin.aliPay(payInfo, "YOUR_IOS_SCHEME");
    if (result.resultStatus == "9000") {
      EasyLoading.showSuccess("支付成功");
    } else {
      EasyLoading.showError(result.result ?? "支付失败");
    }
  } catch (e) {
    EasyLoading.dismiss();
    Logger().e("支付失败: $e");
  }
}

WeChatPay 支付

WeChatPay 需要注册并且传入正确的支付数据，请注意，向后台发起支付的参数应该按照你的后台所需的参数，不用和案例一样。以下是支付方法的实现：

Future<void> payWithWeChat() async {
  var response = await dio.post(
    "/appApi/payment",
    data: {
      "orderNo": "2024052717420001",
      "mechanism": "CHINAUMS",
      "channel": "wechat",
      "terminal": "APP",
      "wallet": "HK",
      "currency": "CNY"
    },
  );

  var paymentNo = findKeyAsString(response.data, "paymentNo");
  var errCode = findKeyAsString(response.data, "errCode");

  if (errCode == "SUCCESS") {
    var result = json.decode(response.data["data"]["result"]["payInfo"]);
    Payment payType = Payment(
      appId: findKeyAsString(result, "appid") ?? '',
      partnerId: findKeyAsString(result, "partnerid") ?? '',
      prepayId: findKeyAsString(result, "prepayid") ?? '',
      packageValue: findKeyAsString(result, "package") ?? '',
      nonceStr: findKeyAsString(result, "noncestr") ?? '',
      timestamp: int.tryParse(findKeyAsString(result, "timestamp") ?? '0') ?? 0,
      sign: findKeyAsString(result, "sign") ?? ''
    );

    // 调用插件的 wechatPay 方法进行支付
    var payWechat = await _mPayPlugin.wechatPay(payType);
    Logger().d("微信支付回调结果: ${payWechat.toJson()}");
  }
}

4. 环境配置 #

AliPay 环境

• ONLINE: 生产环境
• SANDBOX: 沙箱环境，用于测试

MPay 环境

• PRODUCTION: 生产环境
• SIT: 系统集成测试环境
• UAT: 用户验收测试环境

5. 示例代码 #

以下是一个完整的示例，展示了如何调用不同支付方式的支付方法。

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.indigo,
    ),
    home: Scaffold(
      appBar: AppBar(
        title: const Text('MPay 插件示例'),
      ),
      body: SingleChildScrollView(
        child: SizedBox(
          height: MediaQuery.of(context).size.height -
              MediaQuery.of(context).padding.top - kToolbarHeight,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => payWithMPay(),
                child: const Text("MPay 支付"),
              ),
              ElevatedButton(
                onPressed: () => payWithAliPay(),
                child: const Text("AliPay 支付"),
              ),
              ElevatedButton(
                onPressed: () => payWithWeChat(),
                child: const Text("WeChatPay 支付"),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}