前端
面试题
前端
面试题

一 说说微信⼩程序的⽀付流程

1.1 前⾔

微信⼩程序为电商类⼩程序，提供了⾮常完善、优秀、安全的⽀付功能

在⼩程序内可调⽤微信的 API 完成⽀付功能，⽅便、快捷

场景如下图所⽰：

  • ⽤⼾通过分享或扫描⼆维码进⼊商⼾⼩程序，⽤⼾选择购买，完成选购流程
  • 调起微信⽀付控件，⽤⼾开始输⼊⽀付密码
  • 密码验证通过，⽀付成功。商⼾后台得到⽀付成功的通知
  • 返回商⼾⼩程序，显⽰购买成功
  • 微信⽀付公众号下发⽀付凭证

1.2 流程

以电商⼩程序为例

⽀付流程图如下所⽰：

具体的做法：

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

其中后端响应数据必要的信息则是 wx.requestPayment ⽅法所需要的参数，⼤致如下：

wx.requestPayment({
// 时间戳
timeStamp: '',
// 随机字符串
nonceStr: '',
// 统⼀下单接⼝返回的 prepay_id 参数值
package: '',
// 签名类型
signType: '',
 // 签名
 paySign: '',
 // 调⽤成功回调
 success () {},
 // 失败回调
 fail () {},
 // 接⼝调⽤结束回调
 complete () {}
 })

参数表如下所⽰：

1.3 结束

⼩程序⽀付和以往的⽹⻚、APP微信⽀付⼤同⼩异，可以说⼩程序的⽀付变得更加简洁，不需要设置⽀ 付⽬录、域名授权等操作