【微信生态圈】微信支付其实很简单,没做过微信支付的你是否有这些疑惑?

1,269 阅读4分钟

hello,大家好,我是东东吖。今天又到周末了,我又有时间写文章了,于是我拿起电脑,噼里啪啦一波输出,今天给大家分享的是微信支付。

1.你是否有以下疑惑?

由于微信支付必须提供营业执照以及需要后端配合(其实可以用云开发),导致很多同学在平时的学习中没有办法接触到微信支付,对于没有做过微信支付同学,一定有很多疑惑,最大的疑惑就是那个收银台怎么弄?输入密码又是怎么调起的那个键盘?按这个思路下去,就会越想越迷惑,哈哈哈。对于做过微信支付的的人,可能已经开始发笑了,这不就是....。但是对于从没接触过微信支付的人,都会有这样的疑惑,我发现,无论是我自己还是我的朋友,在没有接触过微信支付之前,我们都有类似的疑惑。

当你看完这篇文章后,你就等于上了直达车,不用自己再去苦苦的研究了。微信支付其实很简单,今天我就解答一下你们的疑惑,一个最简单的微信支付,对于前端其实就两个步骤:一个是预下单接口(后端提供),一个是微信支付的api(微信官方)。

2.微信支付最主要的是要理解支付的流程:

微信支付的逻辑就是前端去触发后端一个预下单接口,后端接受到前端的请求后,拿前端请求的参数去调微信官方的接口下单,然后微信官方会返回一个预下单id给后端,后端拿到这个预下单id之后通过预下单接口把这个预下单id和前端调微信支付api需要的全部参数返回给前端,此时前端拿这些参数和预下单id去掉微信支付这个api,就能调起微信支付那个组件,就是那个你迷惑的收银台怎么做的,其实什么公司名称,金额,输入密码都是微信给你做好了的。只要你能调起那个收银台,后面的事,微信都帮你做好了。

3.微信支付为什么要这样设计?

微信支付为什么会是这样的逻辑呢,其实是微信会考虑安全问题,所以数据都是后端去和微信交互的,然后返回一个预下单id,这个预下单id就和我们平时查询一样,他绑定了微信支付所需金额,支付的公司等信息,当调微信支付api的时候,他自己就会返回对应这个id的数据,然后渲染到收银台上,你调那个接口就会触发,当你能调起收银台就证明成功了,在微信开发者工具上,他是会弹出一个二维码,然后我们扫码就能支付,当我们真机调试和实际上线的时候,就不会有这个支付二维码,会直接调起微信收银台。

当然这只是微信支付最简单的业务逻辑,在企业中,支付的业务流程要比这复杂哦,不过都是在这个的基础上,当你明白1+1=2的时候,1+2还会难吗?

4.微信官方的业务流程图:

35DD1FB2F379C94AFEC80AF9C68CB7F7.jpg

重点步骤说明:

步骤3 用户下单发起支付,商户可通过JSAPI下单创建支付订单。

步骤8 商户可在微信浏览器内通过JSAPI调起支付API调起微信支付,发起支付请求。

步骤15 用户支付成功后,商户可接收到微信支付支付结果通知支付结果通知API

步骤20 商户在没有接收到微信支付结果通知的情况下需要主动调用查询订单API查询支付结果。

其中微信支付接口是微信官方的wx.requestPayment(Object object),我们来看微信官方文档 developers.weixin.qq.com/miniprogram…

image.png

tips:这个支付api有很多参数,需要前端传给微信,而这些参数都是后端给你的,所以你不用操心, 不对就找后端,虽然这部分参数前端也可以做,但是考虑安全问题,一般都是后端给你,这里要主要有一个参数是预支付id,要注意他传递给微信的格式。

F6B81EFC36C43BDFE3C7AB507C64FE02.jpg

5.项目实际代码展示:

image.png

6支付成功结果展示:

253DE511C9CDF38051648E3092CA9EA5.jpg

好啦,今天的分享就到这里啦,我们下期见!

笔者往期文章:

小程序蓝牙开锁,前端是如何直接和硬件进行数据交互的?

父子组件的生命周期执行流程是怎么样的呢?

1024程序员这天,我发现了掘金官方的一个bug。