Flutter实现微信支付和iOS IAP支付_fluttr ios 切支付

公司近期将收费的功能排期了，由于项目做的是线上教育，提供的服务属于虚拟物品。根据iOS官方的规定，虚拟物品交易只能使用iOS应用内支付，其他类似微信、支付宝官方都是明文规定不允许存在的。(注：虚拟物品才有此规定，且iOS官方收税30%；而有实体物品交易的，官方允许在提供应用内支付的前提下，提供其他支付方式供用户选择。)

结合相关平台规定，我们最终确定支付方式为：Android端使用微信支付，iOS使用IAP应用内支付。

微信支付

不得不说我们这一代程序员是幸运的，得益于国内移动支付的迅猛发展，微信支付的流程闭环比iOS完善了N倍（iOS的槽点一篇文章都写不完，稍后我再来吐）；同时微信官方所提供的服务，至少在国内网络中，可以认定为是百分百可靠的。

• 微信支付的流程相对简单：

1. 客户端向业务后台发起一个购买请求
2. 业务后台到微信服务端生成一个订单
3. 将微信订单信息和自身系统所需的业务数据整合后返回给客户端
4. 客户端拿到微信支付信息后，通过WeChatOpensdk调起支付
5. 在页面中订阅支付回调，接受支付信息并做业务流程处理**（如：进入支付结果页等流程）**
6. 最后请求后台，由后台主动去微信系统中查询最终支付状态，交回给前端显示结果。
   （ps：后端在微信系统中主动查询订单转态是同步的，可以马上拿到支付结果）

• 接下来讲讲开发，Flutter使用的是fluwx插件，简单易用。在项目中，我对微信支付进行了封装，代码见下：

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:fluwx/fluwx.dart' as fluwx;

class WechatPayment {
  StreamSubscription _wxPay;

  /// 关闭微信消息订阅
  void wxSubscriptionClose() => _wxPay?.cancel();

  /// 调起微信支付面板 
  /// 这里的WxPayModel是业务层的数据，即后台返回的有关微信支付订单的信息
  void wxPay(WxPayModel wxPayModel, {VoidCallback onWxPaying, VoidCallback onSuccess, Function(String data) onError}) async {
    // 跳转微信支付前，告诉页面进入微信支付，页面层可以做一些关闭加载框等的操作
    onWxPaying?.call();
    // 一些异常情况的处理
    if (!await fluwx.isWeChatInstalled) return onError?.call('请安装微信完成支付或使用苹果手机支付');
    if (wxPayModel.appId != Config.WX_APP_ID) return onError?.call('AppID不一致，请联系管理员');
    // 此方法笔者没有做单例，因此支付前尝试注销监听，避免重复回调
    _wxPay?.cancel();
    // 支付回调
    _wxPay = fluwx.weChatResponseEventHandler.listen((event) {
      _wxPay?.cancel();
      if (event is fluwx.WeChatPaymentResponse) {
        if (event.isSuccessful) {
          return onSuccess?.call();
        } else {
          return onError?.call(event.errCode == -1 ? '系统错误，请联系管理员' : '您取消了支付');
        }
      }
    });

    // 发起支付
    fluwx.payWithWeChat(
      appId: wxPayModel.appId,
      partnerId: wxPayModel.partnerId,
      prepayId: wxPayModel.prepayId,
      packageValue: wxPayModel.packageValue,
      nonceStr: wxPayModel.nonceStr,
      timeStamp: wxPayModel.timeStamp,
      sign: wxPayModel.sign,
      signType: wxPayModel.signType,
      extData: wxPayModel.extData,
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

页面端是这样调用的

WechatPayment paymentUtils = new WechatPayment();
paymentUtils.wxPay(
    state.model.wxPayModel,
    onError: (String err) {
        if (!mounted) return;
        // 微信支付错误，设置支付状态为false，弹框即可
         _isPaying = false;
         SchedulerBinding.instance.addPostFrameCallback((_) {
           CommonUtils.sh
1
2
3
4
5
6
7
8