面试官:说说微信小程序的支付流程?

开发 前端
小程序支付和以往的网页、APP微信支付大同小异,可以说小程序的支付变得更加简洁,不需要设置支付目录、域名授权等操作。

[[431075]]

一、前言

微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能

在小程序内可调用微信的API完成支付功能,方便、快捷

场景如下图所示:

  • 用户通过分享或扫描二维码进入商户小程序,用户选择购买,完成选购流程
  • 调起微信支付控件,用户开始输入支付密码
  • 密码验证通过,支付成功。商户后台得到支付成功的通知
  • 返回商户小程序,显示购买成功
  • 微信支付公众号下发支付凭证

二、流程

以电商小程序为例

支付流程图如下所示:

具体的做法:

  • 打开某小程序,点击直接下单
  • wx.login获取用户临时登录凭证code,发送到后端服务器换取openId
  • 在下单时,小程序需要将购买的商品Id,商品数量,以及用户的openId传送到服务器
  • 服务器在接收到商品Id、商品数量、openId后,生成服务期订单数据,同时经过一定的签名算法,向微信支付发送请求,获取预付单信息(prepay_id),同时将获取的数据再次进行相应规则的签名,向小程序端响应必要的信息
  • 小程序端在获取对应的参数后,调用wx.requestPayment()发起微信支付,唤醒支付工作台,进行支付
  • 接下来的一些列操作都是由用户来操作的包括了微信支付密码,指纹等验证,确认支付之后执行鉴权调起支付
  • 鉴权调起支付:在微信后台进行鉴权,微信后台直接返回给前端支付的结果,前端收到返回数据后对支付结果进行展示
  • 推送支付结果:微信后台在给前端返回支付的结果后,也会向后台也返回一个支付结果,后台通过这个支付结果来更新订单的状态

其中后端响应数据必要的信息则是wx.requestPayment方法所需要的参数,大致如下:

  1. wx.requestPayment({ 
  2.   // 时间戳 
  3.   timeStamp''
  4.   // 随机字符串 
  5.   nonceStr: ''
  6.   // 统一下单接口返回的 prepay_id 参数值 
  7.   package: ''
  8.   // 签名类型 
  9.   signType: ''
  10.   // 签名 
  11.   paySign: ''
  12.   // 调用成功回调 
  13.   success () {}, 
  14.   // 失败回调 
  15.   fail () {}, 
  16.   // 接口调用结束回调 
  17.   complete () {} 
  18. }) 

参数表如下所示:

三、结束

小程序支付和以往的网页、APP微信支付大同小异,可以说小程序的支付变得更加简洁,不需要设置支付目录、域名授权等操作

参考文献

https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_8_0.shtml

https://juejin.cn/post/6844903895970349064

 

责任编辑:武晓燕 来源: JS每日一题
相关推荐

2021-10-27 10:27:36

微信小程序流程

2021-10-26 00:25:14

程序登录流程

2021-10-28 19:32:16

微信原理程序

2021-10-19 08:07:21

微信小程序代码

2021-10-20 07:18:51

微信小程序函数

2021-10-21 07:18:02

微信程序方式

2023-12-27 18:16:39

MVCC隔离级别幻读

2024-03-05 10:33:39

AOPSpring编程

2024-03-11 18:18:58

项目Spring线程池

2021-08-09 07:47:40

Git面试版本

2020-07-02 07:52:11

RedisHash映射

2024-03-22 06:56:24

零拷贝技术数据传输数据拷贝

2024-02-20 08:13:35

类加载引用Class

2024-03-14 14:56:22

反射Java数据库连接

2021-11-25 10:18:42

RESTfulJava互联网

2024-02-29 16:49:20

volatileJava并发编程

2020-02-05 14:12:19

微信淘宝开端

2024-03-01 11:33:31

2021-06-30 07:19:36

React事件机制

2021-08-11 08:53:23

Git命令面试
点赞
收藏

51CTO技术栈公众号