Flutter实现微信支付和iOS IAP支付

// ① 弹出支付框后使用系统返回键关闭;
// ② 进入微信支付密码框后不输入使用系统导航切回app或者系统返回键返回;
// ③ 进入微信后直接返回桌面再回到应用;
// ④ 弹出支付框后锁屏再开屏;
// ⑤ 弹出支付款后下拉任务栏;
// ⑥ 输入密码成功后,直接返回桌面或者使用系统导航或者使用返回键返回app
// ⑦ 退出微信登录,进行支付后直接登录微信,在登录过程中回到app
// ⑧ 在系统应用管理中双开微信后,调起支付后不点击任一个微信端,而是点击取消

现在主流的做法是再支付页面监听app的生命周期,即由后台切回前台的时候,检测下状态,若还在支付中,直接进入查询结果页面,由后台去检验订单,拿到结果显示即可。(后台主动查询理论上还是存在微信服务端延时的问题,因此后台进行查询的时候,建议采取轮询机制,若是没有支付成功的话,延时5秒后再确认下更保险)

class _XXXPageState extends State with WidgetsBindingObserver {
@override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this); //添加观察者
}

@override
void dispose() {
WidgetsBinding.instance.removeObserver(this); //销毁观察者
super.dispose();
}

/// 应用状态监听
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
switch (state) {
case AppLifecycleState.resumed:
{
if (Platform.isAndroid && _isPaying) {
_isPaying = false;
// 监听到时安卓设备并且支付还在进行中,程序员要根据业务做一下处理
break;
}
default:
break;
}
super.didChangeAppLifecycleState(state);
}
}

到此,微信支付很愉快的解决了,以上代码是抽象出来的工具类,可以直接使用;但是不涉及任何业务流程的开发,这个需要使用者自己去补充。 综上,微信支付流程主线可简单粗暴总结为:服务端生成订单 → 客户端调起支付 → 客户端通知服务端核验订单 → 客户端拿到最终结果 → 客户端final支付。 整个过程形成闭环,有理有据,数据都由后端去操作安全合理。(最重点是前端工作量简直不要太少)。

可是,iOS就不一样了,简直不要太恶心!

iOS IAP应用内支付

  • IAP,即in-app Purchase,苹果推出的App内购买虚拟商品的方式,基于AppStore账户的支付方式。由于iOS整个体系都是基于自己的一套系统的(不像上面的微信支付,是第三方支付平台),因此在开发之前,我们需要到Apple开发者中心完成以下步骤:

1. 签署协议和银行业务 2. 在后台创建App内购买项目,这里所有的价格都是Apple规定好的,我们只有选择的资格,没办法自定价格。创建完成后,每个项目会有sku和productId 3. 添加沙盒测试员Apple 以上步骤参考内容引自站内大神:Geniune

  • 支付流程:应用通过sku向服务端获取商品列表 → 列表中取出对应产品请求支付 → 进入appStore支付 → 页面监听支付回调拿到验证票据 → 业务后台拿到应用接收到的票据后去Apple官网进行校验即可。

流程很简单,简单到几乎不用跟业务后台打交代,但是坑却随之而来:

① 支付数据完全依赖前端应用,很难跟业务后台的订单系统一一对应;
② 针对①的问题,IAP支付支持传递skPayment对象,里面的applicationUsername经常用来保存系统的OrderId;
但是应用支付成功后收到的回调中,applicationUsername却偶尔会出现为null的情况,没有了对应关系,就没办法核销业务系统中的订单从而为用户充值;
③ iOS支付回调非常不稳定,有时延迟严重;且没有任何注定查询的方法;
④ iOS应用内支付有很多异常情况要处理,最常见的就是没有登录、没有同意最新的iOS支付协议等,都会发送给app支付失败的回调;
但是当用户登录或是同意后,iOS系统又会触发新的支付,导致旧的附带业务订单号的支付无效,莫名又多出一个没有订单号的新支付;
⑤ 国内网上资料极度缺乏,基本都是19年以前的,Flutter的文章更是少的可怜,可参考性不强。
⑥ 测试文档对于中断购买的测试流程有巨坑,后面菜单一定不要错过~

通过查看文档和不断调试,我们发现:

① 支付错误的回调,基本能马上收到; ② 上面流程说到IAP支付需要手动结束支付流程。同时iOS规定不能对同一个skuId重复发起多次支付的,只要当前skuId有没有final的支付,再次发起都会失败; ② 无论支付成功或失败,只要app没有主动对当前支付进行final,每次启动app后,app都会收到这个支付信息的通知; ③ 关于applicationUsername,只有在支付完成马上收到回调的情况下,回调信息才会有这个信息;到②中的情况,肯定不会返回applicationUsername; ④ 没有applicationUsername就意味着订单对不上,因此我们需要进行凑单机制。

综上,我们对异常处理有了确定方案:

① app发起支付后,需要将业务OrderId和skuId进行持久化存储(即卸载应用都不会删除的数据); ②只要持久化存储不为空,启动app就需要马上启动监听,以接收iOS系统的订单推送; ③ 支付出错可以final当前支付,但是支付成功必须明确接收到iOS推送并且后台核验成功后,才能final,并删除持久化存储。


最终,结合到业务系统和特殊情况的处理后,支付流程应该如下:

  1. 业务后台返回商品列表时,需要附加返回对应的skuId
  2. app通过skuId请appStore请求商品信息
  3. app对商品发起支付,并将业务订单号存储在applicationUsername中,发起成功写入持久化存储,状态为pending
  4. 接收iOS系统回调,失败马上final支付,更改对应持久化存储状态为cancle;成功拿到票据和业务OrderId发送给后台
  5. 后台调取Apple服务端接口,传入票据(票据其实储存着最新的时间,appStore用户信息等)
  6. 后台获取到Apple返回的当前appStore用户所有支付的前100条记录,拿到productId到数据库有中匹配该用户是否有未核销的订单,并对应修改业务订单状态
  7. app确认核销成功,final支付,并且删除持久化存储

同时还需要做一些特殊处理:

  1. app刚启动时,若是持久化存储不为空,需要马上启动iOS支付订阅监听,以接收iOS对未完成订单的推送;
  2. 由于iOS限制了同一个skuId不能重复发起支付,因此持久化存储中,一个skuId永远只会有一条记录。因此当app接收到的支付推送applicationUsername为null,采取凑单机制,原则是:通过skuId找到存储记录,拿到其对应的OrderId,发给后台核验。
  • 接下来进入开发,Futter采用的是in_app_purchase插件,官方提供的,支持google和IAP支付;而持久化存储用的是flutter_secure_storage插件。

依据上面的流程,我同样封装了工具类。而且由于可能会在多个地方调用起监听,所有必须是单例模式,代码如下:

import ‘dart:async’;

import ‘package:flutter_secure_storage/flutter_secure_storage.dart’;
import ‘package:in_app_purchase/in_app_purchase.dart’;

// iOS支付单一实例
final iOSPayment = IOSPayment();

class IOSPayment {
/// 单例模式
static final IOSPayment _iosPayment = IOSPayment.init();

factory IOSPayment() {
return _iosPayment;
}

IOSPayment.init();

// 应用内支付实例
InAppPurchaseConnection purchaseConnection = InAppPurchaseConnection.instance;
FlutterSecureStorage storage = new FlutterSecureStorage();

// iOS订阅监听
StreamSubscription<List> subscription;

/// 判断是否可以使用支付
Future isAvailable() async => await purchaseConnection.isAvailable();

// 开始订阅
void startSubscription() async {
if (subscription != null) return;
print(‘>>> start subscription’);
// 支付消息订阅
Stream purchaseUpdates = purchaseConnection.purchaseUpdatedStream;
subscription = purchaseUpdates.listen(
(purchaseDetailsList) {
purchaseDetailsList.forEach((PurchaseDetails purchaseDetails) async {
if (purchaseDetails.status == PurchaseStatus.pending) {
print(‘>>> pending’);
// 业务代码略:有订单开始支付,向外部发出通知,并记录到缓存中;
} else {
if (purchaseDetails.status == PurchaseStatus.error) {
print(‘>>> error’);
// 业务代码略:有订单支付错误,向外部发出通知
// 下面是删除
String value = await storage.read(key: purchaseDetails.productID);
String orderId = value.split(‘¥’)[0];
writeStorage(purchaseDetails.productID, orderId, ‘cancel’);
finalTransaction(purchaseDetails);
} else if (purchaseDetails.status == PurchaseStatus.purchased) {
print(‘>>> purchased’);
String orderId = purchaseDetails.skPaymentTransaction.payment.applicationUsername;
if (orderId == null || orderId.isEmpty) {
// 如果applicationUsername为空,执行凑单
orderId = await foundRecentOrder(purchaseDetails.productID);
}
if (orderId.isEmpty) {
// 凑单失败,找不到业务单号,结束
finalTransaction(purchaseDetails);
BlocProvider.of(Application.navigatorState.currentContext).add(IosPayFailureEvent(errorMessage: ‘支付出错啦,请稍后再试~’));
return;
}
// 业务代码略:支付成功,向外部发出通知
// 业务代码略:开始核验订单,核验结果由外部监听
);
}
}
});
},
onDone: () {
stopListen();
},
onError: (error) {
stopListen();
},
);
}

/// 检查sku是否有对应商品
Future checkProductBySku(String sku, {Function(String err) onError}) async {
if (!await isAvailable()) {
onError?.call(‘无法连接AppStore,请稍后再试’);
return false;
}
ProductDetailsResponse appStoreProducts = await purchaseConnection.queryProductDetails([sku].toSet());
if (appStoreProducts.productDetails.length == 0) {
onError?.call(‘没有找到相关产品,请联系管理员’);
return false;
}
return true;
}

/// 启动支付
void iosPay(String sku, String orderId, {Function(String err) onError}) async {
// 获取商品列表
ProductDetailsResponse appStoreProducts = await purchaseConnection.queryProductDetails([sku].toSet());
// 发起支付
purchaseConnection
.buyNonConsumable(
purchaseParam: PurchaseParam(
productDetails: appStoreProducts.productDetails.first,
applicationUserName: orderId,
),
)
.then((value) {
if (value) {
// 只要能发起,就写入
writeStorage(sku, orderId, ‘pending’);
}
}).catchError((err) {
onError?.call(‘当前商品您有未完成的交易,请等待iOS系统核验后再次发起购买。’);
print(err);
});
}

writeStorage(String key, String value, String status) {
storage.write(key: key, value: ‘ v a l u e ¥ value¥ valuestatus’);
}

// 关闭交易
void finalTransaction(PurchaseDetails purchaseDetails) async {
await purchaseConnection.completePurchase(purchaseDetails);
// 每完成一张订单进行缓存的清除
if (!await checkStorage()) {
stopListen();
}
}

// 凑单机制
Future foundRecentOrder(String sku) async {
String orderId = ‘’;
String values = await storage.read(key: sku);

if (values != null) {
orderId = values.split(‘¥’)[0];
}
return orderId;
}

// 校验是否还有缓存
Future checkStorage() async {
Map<String, String> remainingValues = await storage.readAll();
return remainingValues.isNotEmpty;
}

// 关闭监听
stopListen() async {
subscription?.cancel();
subscription = null;
}
}

页面调用时,建议启用定时器,因为iOS回调不稳定,所以监听到应用回到前台时开始30秒计时;30秒内没有收到支付回调,需要做对应提示,这一块也是存业务流程,我这里不做代码展示。 下面代码是如何调用上面工具类的:

iOSPayment.startSubscription();
iOSPayment.iosPay(
state.skuId,
state.model.orderId,
onError: (String err) {
if (!mounted) return;
// 支付遇到错误,马上停止定时器,并且关掉弹框
},
);

// 应用启动时
if (Platform.isIOS && await iOSPayment.checkStorage()) {
// 启动订阅:支付缓存未清除完毕、机型可使用应用内支付
iOSPayment.startSubscription(needDelayed: true);
}

测试IAP中断购买的测试

  • 这个测试是模拟用户点击购买协议的操作,当弹出系统协议弹框时,iOS会发出一个支付错误的消息;这个时候我们的代码会final这个支付,并且将持久化中对应skuId的信息状态改为cancel;
  • 然后用户同意后,iOS会再发起一个同样的不带OdrerId(是的,被弄丢了。。。。)的订单,用户支付成功后,我们的代码就会收到支付成功的没有OdrerId的推送,在持久化存储中执行凑单机制后,再发给后台核销。

如何模拟这个流程呢?看看官方文档描述,下面是译文:

设置测试

总结

最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识,这里放上相关的我搜集整理的Android开发中高级必知必会核心笔记,共计2968页PDF、58w字,囊括Android开发648个知识点,我把技术点整理成了视频和PDF(实际上比预期多花了不少精力),包知识脉络 + 诸多细节。

网上学习 Android的资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。

2021年虽然路途坎坷,都在说Android要没落,但是,不要慌,做自己的计划,学自己的习,竞争无处不在,每个行业都是如此。相信自己,没有做不到的,只有想不到的。

虽然面试失败了,但我也不会放弃入职字节跳动的决心的!建议大家面试之前都要有充分的准备,顺顺利利的拿到自己心仪的offer。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门,即可获取!
只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。

2021年虽然路途坎坷,都在说Android要没落,但是,不要慌,做自己的计划,学自己的习,竞争无处不在,每个行业都是如此。相信自己,没有做不到的,只有想不到的。

虽然面试失败了,但我也不会放弃入职字节跳动的决心的!建议大家面试之前都要有充分的准备,顺顺利利的拿到自己心仪的offer。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门,即可获取!

  • 24
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过flutter的webview_flutter插件,我们可以在应用中嵌入支付宝和微信支付,并实现支付功能。使用webview_flutter的步骤如下: 1. 首先,在`pubspec.yaml`文件中引入webview_flutter插件。可以在dependencies部分添加`webview_flutter: ^2.0.0`,然后运行`flutter pub get`命令进行依赖安装。 2. 在需要嵌入支付功能的页面中,导入webview_flutter插件。在页面的顶部引入`import 'package:webview_flutter/webview_flutter.dart';`。 3. 在页面的主体中,创建一个WebView组件,并指定需要加载的URL。例如,在Container中使用WebView组件,可以使用如下代码: ```dart Container( child: WebView( initialUrl: 'https://www.alipay.com/', javascriptMode: JavascriptMode.unrestricted, ), ) ``` 4. 在支付宝和微信支付的URL中,传递相关的支付参数,例如订单号、支付金额等。 5. 在WebView组件中,可以通过注册一个JavaScript channel来监听网页中的支付回调信息。例如,在页面初始加载完成后,可以通过使用`onPageFinished`回调方法来执行一段JavaScript代码,监听支付结果。在该代码中,可以通过调用与原生平台交互的方法,将支付结果返回到Flutter中进行处理。 6. 在Flutter中,可以根据支付结果展示相关的提示信息,例如支付成功、支付失败等。 需要注意的是,支付宝和微信支付的具体接口和参数可能会根据版本的更新而有所变化,所以在代码实现中需要根据最新的文档进行调整。同时,为了确保支付过程的安全性,建议在应用中对支付接口进行适当的安全设置,例如使用HTTPS协议,并对支付参数进行加密处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值