阿牛博客

微信支付——微信相关的一些开发经验4

1.微信公众号支付(微信浏览器)

微信公众号支付api:请戳这~
很久之前重构了公司的支付中心,感觉微信浏览器支付挺简单,不用过多介绍,直接来干货,贴代码吧(附赠了余额宝的支付,开发的童鞋可以参考参考,哈哈~):

//调用

当然,实际支付页面比这里列取要复杂得多,时间有限,就不一一细说了。
获取openid的教程之前有介绍,请看这里:请戳这~

2.微信H5、web支付

突然有一天,我们的产品经理发现我们的h5在非微信浏览器中没有微信支付,他突然说:这个用户体验不好啊,为毛我的uc浏览器里面不能进行微信支付啊!我的零钱全在微信!于是,他觉得该搞搞事情了。。。o(╯□╰)o
于是需求接踵而至:
1.非微信浏览器需要支持微信支付;2.app里面也需要支付微信h5支付(原本我们的app是用微信原生sdk支持支付的,但产品觉得h5应该是无所不能的(囧),webview也应该支持微信支付,我…);
直接上开发代码吧,个人觉得比较实用点。
api参考:[H5支付]请戳这~

上面只贴了部分代码,有的童鞋就会问了,为毛微信代码辣么多啊,你看看支付宝就那么几句话。好吧,微信支付,简直一把辛酸泪啊:
先说下上面代码中,微信支付大概流程(非微信浏览器的):
用户选择微信支付,点击提交,前端拼接订单、支付方式等,发送ajax请求给后端(上面的wxPay ),后端返回一个微信的跳转地址,前端跳转到微信(在手机里会直接打开微信app,在pc浏览器会直接是一个二维码页面),用户支付成功后,微信跳转回支付页面,然后前端在支付页面再请求一个订单状态的查询接口,进行轮询(上面的wxPayInit),若判断用户支付成功了,跳去支付成功的回调页(用户订单列表等),到这里,流程基本结束了…
微信的跳转链接是长这样的:

而支付宝呢:
同样,用户选择支付宝支付,前端也是拼接各种参数,点击提交,后端会返回一个form表单,然后前端提交该form表单(form表单里面有支付参数等等),跳去支付宝,用户完成后支付后,跳到我们的一个支付中心页,支付中心再进行跳转(这里也可以直接把支付成功的回调页丢进支付宝的form表单的return_url参数里面去,但我们公司的项目比较多,业务比较复杂,由支付中心统一处理后再跳会更好),然后支付流程也基本结束了…
支付宝的表单长这样的:

有人在这里就会疑问了,为什么微信不能像支付宝一样,传一个支付成功后的地址给微信,用户支付成功后,跳去支付成功页不就ok了啊,图样图森破啊,微信这个大佬,不是那么好对付的:微信规定–微信支付的成功回调页必须是跟支付域名一样的一个回调地址;不过我们做的是一个支付中心,各个业务系统支付最后都跳转到我们的这个中心页面这里。恩,这个也好办,给一个支付中心建一个公共空白的支付回跳页不就好了–>微信支付完成–>跳回支付中心的一个公共页面–>这个公共页面在请求接口拿到相应的支付成功回跳页–>前端重定向跳去支付成功的回调页。起初我们确实是这样做的,本地浏览器调试也ok,本人的小米机调试了下也很正常,然后兴冲冲的丢给了测试童鞋。
几分钟后,测试童鞋就跑回来了:你们做的是什么鬼啊,我在公司的app支付成功后,怎么跳回到我的手机浏览器里面去了啊!程序老哥看看测试手上的水果机,果断甩出一句:先去找找ios开发同事吧。
两个小时后,ios红着眼,骂骂咧咧得跑了过来…
然后,丢给了我们这个提问 [iOS webView 微信H5支付返回问题?]请戳这~
及这个教程 [iOS 解决微信h5支付无法直接返回APP的问题]请戳这~
最后的最后,微信支付就是搞出了上面说的流程了。。(o(╯□╰)o)

给个赞() 踩一下()

温馨提示:本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知 识的误导,同时有更好的阅读体验。

本文链接: http://aniublog.com/archives/420

上一篇: 微信分享、扫码——微信相关的一些开发经验3 » 下一篇: vue双向数据绑定之sync和v-model »