H5微信支付记录整理
我主要是做iOS开发的,在完成app开发任务的之余也要负责公司部分项目前端开发。
对于H5的微信支付,其实做了3次了,虽然很简单,但是开发时间间隔有点久了,总是记不住流程和配置,每次都花了大量调试时间。对此做一下记录整理。(如记录整理有问题,请各位朋友及时指出!)
首先,支付分为:
微信应用内:jsApi
微信应用外:m_webUrl直接调用支付
微信应用内 (流程如下:)
- 配置步骤
- 公众平台申请账号:https://mp.weixin.qq.com/ 完善相关资料,。
- 微信商户平台账号:https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F 完善相关资料,并且申请开通各个功能,比如:JSApi支付,H5支付等。
- 公众号和商户平台绑定。
- 分别在公众平台和商户平台进行域名绑定:JSApi、H5、业务域名、授权域名。(注意:域名有个数限制,授权域名只能有2个域名)。
- 集成JSSDK参考:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
- 静默授权获取code,code大概是5分钟过期,使用后也过期。具体参考:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html (注意回调地址要encode)
- 获取wxOpenId,使用code从后台向wx授权获取wxopenId。
- 完善当前页面支付的信息,点击支付。
- 使用wxOpenId向微信下单,同样是后台去下单,后台拿到对应数据返回至前端。
- 调起支付,方法如下:window.WeixinJSBridge.invoke。具体参考:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
微信应用外
- 应用外比较简单,只需要配置好 商户平台的域名权限。前端支付使用后台返回的m_webUrl直接调用即可。
- 如果是iOSApp内的浏览器调用支付的话,微信支付完成后可能无法直接返回App,需要做一些处理。比如:调用微信支付时:将redirect_url 替换成App对应的URL Schemes ,当然这个Schemes需要使用在微信的公众平台和商户平台配置的域名。比如:online.xxxxx.com. 否则微信也无法正常返回至对应App。
备注:开发过程中,只能在配置权限域名下进行调试。所以调试过程比较麻烦,推荐一个调试工具,微信内:http://debugx5.qq.com/ 直接打开即可,注意不能用https,并且只能android设备使用。