iOS APP内集成微信h5支付踩坑记

欢迎入坑。。。

WechatIMG46 1.jpeg

*入坑原因
因为要做独立app,就是要做好多app 比如一个美容院也有个APP，APP支付难申请

*情景再现

1 .hybridApp 加载 https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx2017101716564603edf5c22a0202880123&package=396451697 本页面打开
发现加载不了 ，因为调起H5支付需要设置referer，而这时的referer为空 所以 ，去设置 ------------------------在请求网页时- 在请求头加入参数： request.setValue("商户申请H5时提交的授权域名", forHTTPHeaderField: "Referer")

2 .上面加载会链向 weixin://wap/pay?prepayid%3Dwx2017101716564603edf5c22a0202880123&package=396451697&noncestr=1508230606&sign=30564047298967a8fbe05e7a5284a34e 再本页面打开页面
其中weixin://是微信APP内部自定义的协议 使得从外部（别的app 或浏览器打开 微信）微信加载这个链接直接就是支付金额页面进行支付了

3.这个时候以为离成功不远了，其实灾难才刚开始 。。。

4.在微信页面无法返回app 了

WechatIMG48.jpeg

取消 （没有安卓的返回） 确定取消支付试试 去safari了

5. 文档说可以设置redirect_url 返回指定页面 ，叫后台在https://wx.tenpay.com/xxx 后面加参数 ：
   支付完成后跳转至https://www.wechatpay.com.cn，则可以做如下处理：
   假设您通过统一下单接口获到的MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096

则拼接后的地址为MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn

事实上redurect_url 的域名只能是商户申请H5时提交的授权域名！支付取消或完成还是会跑到safari 打开回调页！这就尴尬了。。。

6.想着加载一个自定义的协议weixinPay:// 模仿微信的weixin://从微信返回app ,现在域名只能是商户申请H5时提交的授权域名！行不通， 那就绕一下吧 先加载一个我们自己的静态页 在页面上做一个按钮 ，按钮再触发一个weixinPay://的链接 这个时候会提示是否回到app 打开 确认就能重新打开app 了

WechatIMG56.jpeg

界面有点丑，需要再优化一下， 可以进入界面直接加载weixinPay:// 但是万一点了取消呢 所以返回按钮还是要有的 。
注意： weixinPay://是我们自己约定的协议 你也可以换成其他的 设置APP支持它：

WechatIMG57.jpeg

7.最后还有个问题，由于设置redirect_url后,回跳指定页面的操作可能发生在：1,微信支付中间页调起微信收银台后超过5秒 2,用户点击“取消支付“或支付完成后点“完成”按钮。因此无法保证页面回跳时，支付流程已结束，所以商户设置的redirect_url地址不能自动执行查单操作，应让用户去点击按钮触发查单操作。回跳页面展示效果可参考下图

WechatIMG58.jpeg

这个支付状态弹框会被刷掉，所以我们加载 https://wx.tenpay.com/xxx 的时候加载一个新子页面， 检测到weixin://关掉这个子页面 ，等再次回到APP 就会停留在这个支付状态页面了。