微信小程序支付流程

清香的orange
1,101 阅读3分钟

支付大致流程

  • 通过小程序的 wx.login 获取临时登陆凭证 code
  • 通过临时凭证 code 依据 auth.code2Session 接口完成登录流程获取 openid
  • 调用商户后台「预支付接口」，上传需要的参数（openid，商品描述，价格等）
  • 商户后台通过微信的 统一下单 ，获取 prepay_id （预支付交易标识）
  • 对微信统一下单接口返回的参数进行二次签名后，将微信支付 API 所需要用到的参数返回给小程序端
  • 小程序获取到参数，通过 wx.requestPayment 方法调起微信支付
  • 用户操作支付后，微信后台返回给前端支付的结果，同时也会向后台返回支付结果，后台通过这个支付结果来更新订单的状态

流程描述

准备工作

  • 小程序 AppId
  • 小程序密钥 AppSecret
  • 与小程序一对一绑定的商户号 MchId
  • 商户号密钥 key

小程序 AppId 和 AppSecret

小程序 AppId 与密钥 AppSecret 在小程序管理后台的「设置」>「开发设置」>「开发者ID」中获取

image-20220610154449707.png

商户号 MchId 和密钥 key

  • 商户号 MchId 可以在微信商户平台的「账户中心」>「账户设置」>「商户信息」>「账户信息」中获取
  • 商户号密钥需要在「API安全」>「API密钥中」进行设置，设置 API 密钥需要由商户平台账户的超级管理员来操作，密钥要求为长度为 32 位的字符串（值允许包含数字，大小写字母），设置前一定要保存好自己设置的 API 密钥。设置成功之后，商户平台不提供密钥查询，只能够修改密钥。

获取 openId

  • 通过小程序的 wx.login 获取临时登陆凭证 code
  • 通过临时凭证 code 依据 auth.code2Session 接口完成登录流程获取 openid

示例代码：

//使用 login 接口获取临时登陆凭证 code
wx.login({
  success: function(res) {
    console.log(res.code);
    // 通过 jscode 获取 openid
     wx.request({
      url: 'https://api.weixin.qq.com/sns/jscode2session?' + 
      'appid=「小程序 AppId」'+
      '&secret=「小程序密钥 AppSecret」'+
      '&js_code=' + res.code +
      '&grant_type=authorization_code',
      success: function(res){
        console.log(res.data.openid);
      }
    })
  }
})

预支付下单、微信支付

商户：微信商户/银联商户 或者其他商户

商户所需如下等参数信息：

  • 小程序 openid
  • 交易描述 body
  • 交易支付的金额 total_fee （无符号整型，单位「分」）

以微信商户为例：

  • 后端通过对微信 统一下单 封装预下单接口，获取小程序 支付下单 接口参数等信息
  • 前端调用 预下单接口 获取信息【订单号、微信支付参数等】，再调用微信支付 API wx.requestPayment 唤起微信支付
  • 微信支付回调函数内跳转至支付结果页面【携带订单单号： trandNo】
  • 结果页面通过订单单号调用接口获取订单支付状态等信息

PS：

  • 微信支付操作后，会执行 wx.requestPayment 对应的回调函数；同时也会向后台返回支付结果用于更新订单的状态
  • 出于 安全性 问题，微信支付 API 所需要的参数等属于私密信息，显然放于后端服务器是更加安全的
avatar
文章
阅读
粉丝