详解基于Koa2开发微信二维码扫码支付相关流程

2020-06-17 06:55:42易采站长站整理
来请求二维码数据啦。(如果有跨域需要自己考虑解决跨域方案,可以跟Koa放在同域里,也可以开一层proxy来转发,也可以开CORS头等等)

注意, 本例里是用前端来生成二维码,其实也可以通过后端生成二维码,然后再返回给前端。不过为了简易演示,本例采用前端通过获取

code_url
后,在前端生成二维码。

展示支付二维码

前端我用的是

Vue
,当然你可以选择你喜欢的前端框架。这里关注点在于通过拿到刚才后端传过来的
code_url
来生成二维码。

在前端,我使用的是 @xkeshi/vue-qrcode 这个库来生成二维码。它调用特别简单:


import VueQrcode from '@xkeshi/vue-qrcode'
export default {
components: {
VueQrcode
},
// ...其他代码
}

然后就可以在前端里用

<vue-qrcode>
的组件来生成二维码了:


<vue-qrcode :value="codeUrl" :options="{ size: 200 }">

放到Dialog里就是这样的效果:

文本是我自己添加的

 

付款成功自动刷新页面

有两种将支付成功写入数据库的办法。

一种是在打开了扫码对话框后,不停向微信服务端轮询支付结果,如果支付成功,那么就向后端发起请求,告诉后端支付成功,让后端写入数据库。

一种是后端一直开着接口,等微信主动给后端的

notify_url
发起post请求,告诉后端支付结果,让后端写入数据库。然后此时前端向后端轮询的时候应该是去数据库取轮询该订单的支付结果,如果支付成功就关闭Dialog。

第一种比较简单但是不安全:试想万一用户支付成功的同时关闭了页面,或者用户支付成功了,但是网络有问题导致前端没法往后端发支付成功的结果,那么后端就一直没办法写入支付成功的数据。

第二种虽然麻烦,但是保证了安全。所有的支付结果都必须等微信主动向后端通知,后端存完数据库后再返回给前端消息。这样哪怕用户支付成功的同时关闭了页面,下次再打开的时候,由于数据库已经写入了,所以拿到的也是支付成功的结果。

所以

付款成功自动刷新页面
这个部分我们分为两个部分来说:

前端部分

Vue的data部分


data: {
payStatus: false, // 未支付成功
retryCount: 0, // 轮询次数,从0-200