前言:
公司一个远古级APP改成了“原生壳子+H5”的结构,支付模块也改成了H5的方式。其中所有的H5模块都是来源于另一个已有的H5 APP项目。
老夫高高兴兴的把远古大便代码清理的干净,还专门在之前的WebVC基础上封装了专门用于加载Web页面的模块...
一切顺利,唯独在微信支付的时候,无法返回APP,却打开了Safari浏览器来加载回调后的H5网页。
这...似曾相识,难不倒老夫。
问题总结
[描述]:
- APP内网页跳转微信支付后无法返回APP
- 且APP内的web页面变为空白页
[期望]:
- APP跳转微信后能正确返回APP
- 回调APP后,页面显示正常
思考
为什么没有唤起APP?
原生微信支付是以URL Scheme来作为跳转的。只需要APP与微信支付后台的URL Schemes配置好即可。那么H5支付的流程极可能在这里发生了变化导致两端配置不一。
为什么会打开Safari网页?
微信回调的时候并没有回调APP,而是回调的H5网页。那么很可能与无法回调APP是同一个问题,也就是微信的回调环节出了问题。
为什么跳转支付后H5页面变为空白页?
可能是H5页面处于等待回调的状态,但微信并未正确回调到APP内的H5,导致其一直处于等待状态。
开始
这个远古级的项目之前是用了一个第三方金融平台的支付SDK,由其负责APP与支付中间的各种通信。流程大致如下:
以前的支付流程交给了第三方金融平台,金融平台负责管理多个微信支付账号,并提供统一的调用接口给APP。更改为H5之后,调用支付的操作交给了服务端,由服务端调用微信H5支付。
在与后台小哥沟通后,得知:
- 微信H5的支付结果被设置为Web页面,无法更改
- 微信支付后台的配置在客户手里,无法查看,无法获取(WTF?)
- H5模块为另一个APP,最好不更改H5部分
这.......?意思就是只能在APP端解决无法唤起APP的问题
喝一罐可乐压压惊,先解决回调的问题
前面说到,微信返回APP是微信的操作,查询了微信的文档后,得知这个回调操作是H5调用支付时所配置的。具体配置在唤起微信支付的连接请求头的Referer字段,链接形式类似:
我们需要更改其请求头Headers中的“Referer”字段为APP中URL Schemes所配置的值。有一点需要注意,这个值必须与微信支付后台的配置的一致,否则在调用支付时会报类似“商家参数”的错误。
在尝试多个商户的支付操作时,发现后台所有的回调都是同一个域名,便尝试其作为我们的URL Schemes的值。
上面的代码以UIWebView为例(WKWebView同理),做了三件事:
- 拦截微信H5支付链接
- 修改其 Headers 中的 Referer 字段为我们 APP 的 URL Schemes。
- 防止微信H5支付的二次调用将值改回去造成无限循环
Tips: 需要注意的是,APP内配置的 URL Schemes 为“www.XXXX.org”,拦截修改的Referer 的值为“www.XXXX.org://”。
测试过后回调成功。
H5支付页面还没有被通知到,页面没有刷新。文档中有如下描述:
从中可知,微信可能无法回调H5网页,使得H5页面无法及时响应。需要H5页面在调用支付时,就弹框让用户操作手动查询支付结果来刷新界面。
【这~又给老夫机会跟H5妹子沟通了】
老夫:“妹子,需要加个弹框,来让用户手动查询支付回调,因为...”
H5妹子:“我加了啊”
老夫:“嗯?”
H5妹子:“你看,Android都有!”
老夫:“What?”【就在同时,我发现APP又不能唤起支付了,还报了商户参数的错误】
后台刚在URL中添加了redirect_url参数,并指定其为支付成功后的回调,
而这个回调...是H5网页...**redirect_url 与 Referer 不相同造成了报错。
【老夫把左轮枪上了膛,站在了后台汉子的身后】
“你这redirect_url加的防不胜防啊”
“那边应用喊加的,需要制定回调页面”
“那...”
“不能改”
“...”
【枪没有响,老夫也回到了座位,这难不倒我】
经过简单的替换,将URL中的 redirect_url 字段像 Headers 中的 Referer 一样替换成“www.XXXX.org://”后,就又可以成功跳转了。
这时候就剩下一个问题了...
解决APP端的H5页面未响应回调
我们知道后端给redirect_url 和 Referer 指定的链接就是跳转支付后回调(取消、成功、失败)的链接,而我们为了微信能返回APP修改了这俩的值。且在微信回调APP后,webView 的代理 shouldStartLoadWithRequest 加载了 “www.XXXX.org://” 。
这能加载成功就有鬼了。不过这也说明回调APP后,网页也确实触发了回调的方法。
那我们只需要缓存下回调的地址。将调用支付拦截下来的 redirect_url链接缓存下来,当回调APP调用“www.XXXX.org://”时再加载缓存下来的链接就可以完成整个流程了。
问题解决,按时下班~