微信小程序支付流程

最新推荐文章于 2024-07-30 21:45:00 发布

努力的琦琦

最新推荐文章于 2024-07-30 21:45:00 发布

阅读量682

点赞数

分类专栏：微信小程序文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48210599/article/details/108699616

版权

13 篇文章 0 订阅

订阅专栏

其实实现微信小程序的支付的话与微信小程序的登录有异曲同工之妙，都是客户端，与服务器和微信后台进行的交互来实现的，微信小程序的支付接口需要配置微信小程序后台的配置，这个配置是需要开发者进行商户认证的，个人是不能调用这个接口的，下图就是微信小程序需要用到的一些接口和数据

在这里插入图片描述

准备工作做好后先来简单了解一下微信小程序的支付流程，它如何实现前后端与微信服务端进行处理的，下图是微信小程序的支付流程详解：

在这里插入图片描述

根据这个图的话可以看到一个与小程序登录十分相似的关系图，看起来十分的复杂，让我们慢慢捋一遍这个流程就能一清二楚了

这一步是用户通过点击客户端中的按钮来实现的，当用户点击了支付按钮后，就会向后台发送一个**请求下单的支付 **的请求，

这一步是后台接**收到请求下单的支付 **向微信服务器发送小程序登录的一个API请求，微信小程序后台收到请求后，返回给后台一个Openid

在后台生成商户订单后，这个商户订单包括了（支付类型，金额，识别用户），和商户信息，后台又将订单信息作为参数，调用微信后台的调用支付统一下单API方法，微信服务器处理后返回给后台预付单的信息

第四步---------将组合数据进行签名

后台接收到了返回的预付单的信息对这些信息进行再次加密返回给前端，前端这时候监听到了后端返回的数据后，利用这些数据调用，wx.pay（）的方法，然后在用户页面弹出确认支付的弹框
第五步---------用户确认支付

到这里为止，接下来的一些列操作都是由用户来操作的包括了微信支付密码，指纹等验证，确认支付之后执行鉴权调起支付
第六步---------鉴权调起支付

这一步没有与后台进行交互，直接在微信后台进行鉴权，微信后台直接返回给前端支付的结果，前端收到返回数据后对支付结果进行展示
第七步--------推送支付结果

微信后台在给前端返回支付的结果后，会向后台也返回一个支付结果，后台通过这个支付结果来更新订单的状态

微信小程序的大概支付流程就是这样的，前端的话实现起来比较容易，比较复杂一点的就是在后台处理那一块，前端只需要调用一个登录还有一个支付弹框，来进行返回结果再次进行渲染就可以了

前端需要实现的代码：

支付

在这里插入图片描述
以上就是前端实现微信小程序支付的过程

关注

专栏目录