Flutter支付
公司近期将收费的功能排期了,由于项目做的是线上教育,提供的服务属于虚拟物品。根据iOS官方的规定,虚拟物品交易只能使用iOS应用内支付,其他类似微信、支付宝官方都是明文规定不允许存在的。(注:虚拟物品才有此规定,且iOS官方收税30%;而有实体物品交易的,官方允许在提供应用内支付的前提下,提供其他支付方式供用户选择。)
结合相关平台规定,我们最终确定支付方式为:Android端使用微信支付,iOS使用IAP应用内支付。
微信支付
不得不说我们这一代程序员是幸运的,得益于国内移动支付的迅猛发展,微信支付的流程闭环比iOS完善了N倍(iOS的槽点一篇文章都写不完,稍后我再来吐);同时微信官方所提供的服务,至少在国内网络中,可以认定为是百分百可靠的。
- 微信支付的流程相对简单:
- 客户端向业务后台发起一个购买请求
- 业务后台到微信服务端生成一个订单
- 将微信订单信息和自身系统所需的业务数据整合后返回给客户端
- 客户端拿到微信支付信息后,通过WeChatOpensdk调起支付
- 在页面中订阅支付回调,接受支付信息并做业务流程处理**(如:进入支付结果页等流程)**
- 最后请求后台,由后台主动去微信系统中查询最终支付状态,交回给前端显示结果。
(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,
);
}
}
页面端是这样调用的
WechatPayment paymentUtils = new WechatPayment();
paymentUtils.wxPay(
state.model.wxPayModel,
onError: (String err) {
if (!mounted) return;
// 微信支付错误,设置支付状态为false,弹框即可
_isPaying = false;
SchedulerBinding.instance.addPostFrameCallback((_) {
CommonUtils.showToast(err, backgroundColor: Theme.of(context).errorColor);
});
},
onSuccess:(){
_isPaying = true;
},
onWxPaying: () {
// 启动微信支付,设置支付状态为true,关闭加载框
_isPaying = true;