藤原とうふ店(自家用)iOS开发

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

2017-10-18  本文已影响729人  杜小秦

欢迎入坑。。。


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了

  1. 文档说可以设置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 就会停留在这个支付状态页面了。
上一篇下一篇

猜你喜欢

热点阅读