知识就是力量，但更重要的是运用知识的能力---网页端微信扫码支付-技术设计

2022-07-07 20:54:55

网页端微信扫码支付流程

1. 用户在网页上支持的支付方式里选择“微信支付”

2. 网页根据微信通道返回的支付链接生成微信支付码

3. 用户通过手机扫码支付

4. 网页根据用户付款结果，进行跳转或提示。

12306网站上购买火车票，可以用微信扫码支付，北漂的兄弟们应该都体验过。

如下是一个产品交互原型，便于直观理解。

再介绍一下网页端微信扫码支付的时序。我方先调用三方接口拿到qrcode展示到前端页面上，然后等待用户使用手机微信扫码支付。微信收到支付请求并处理完毕会主动通知我方系统，我方系统会修改支付单状态，这个过程通常会在极短时间内完成（一般不超过5s）。三方也提供支付结果查询接口，供我方主动发起查询。

而用户界面上这个人机交互的难点，就在于页面展示付款码之后，怎么知道用户是否扫码支付完成了呢？因为页面展示了付款码之后，会存在两种情况，一种情况是用户用手机扫码支付了，一种情况是用户并没有扫码，或者是扫码了也没有支付。

最简单也是最常用的方式是：服务端提供一个查询支付结果的接口。页面在展示了支付码以后，设置interval，比如每间隔2秒钟，就调一下服务端的接口，看看是否支付完成。

接下来，我们来看看服务端接口和页面交互的详细设计。

✅ 服务端接口：查询支付状态

方案：先查本地库，判断是否已经支付，如果已经支付，则直接返回。如果未支付，则同步调用三方接口请求支付结果，然后如果是终态，则改支付单记录，再返回。

这个方案的缺点很明显：① 连接db做查询或修改操作；② 调用外部接口。这两点会导致响应慢，尤其是②，会增加因网络导致的不可控的因素。

优化方案：改为查redis。就是说，当三方回调我方支付结果时，我们将支付状态保存在redis里。直接查redis，5s内即使无终态，也不主动调用三方接口；5s后，则可以考虑异步触发调用三方接口。

这样会极大提高接口响应速度。

✅ 页面端交互

页面设置interval，每隔2秒查支付结果，拿到结果后，跳转页面，给出对应提示。

特殊情况下，页面不能一直傻傻地轮询查，可以再设置一个阈值，比如如果超过30秒还没有拿到支付结果，则跳转页面，给出支付超时的提示，并引导用户重新发起支付。

微信返回的付款二维码是有时效的，一般最长2小时。

如果页面上支持重新获取付款码，这时一定要首先校验订单是否支付完成，如果已经支付完成，则引导用户进入付款成功的页面。如果未支付，则调用微信取消支付接口将当前付款码置为无效，然后重新生成支付订单号，然后调用三方微信支付接口，重新获取qrcode地址并在付款页面展示付款二维码。