位置：首页-资讯-前端开发

微信小程序调用支付接口的完整流程记录

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

当然在开发之前，我们需要有下面这些东西：

appId(小程序分配)
小程序密钥(小程序配置界面获取)
商户号
api密钥(商家后台自己设置)

首先我们要知道把大象放进冰箱拢共需要三步（不是），那么我们调起支付也是一样的

步骤如下：

wx.login获取用户临时登录凭证code，发送到后端服务器换取openId
在下单时，小程序需要将商品Id，商品数量，以及openId传送到服务器
服务器在接收到商品Id、商品数量、openId后，生成服务期订单数据，同时经过一定的签名算法，向微信支付发送请求，获取预付单信息(prepay_id)，同时将获取的数据再次进行相应规则的签名，向小程序端响应必要的信息(必须字段信息将在下文进行详细说明)
小程序端在获取对应的参数后，调用wx.requestPayment()发起微信支付，唤醒支付工作台，进行支付

1.通过wx.login拿到code，然后请求接口从后台拿去openId

 login() {
    var that=this
    wx.login({
      success(res) {
        console.log(res)
        wx.request({ url: '', 
        data: { code: res.code } })
      },
    })

2.在调起微信支付前需要保证接收到所有我们要传递的值，在这里是openId,和支付金额。openId以及相应需要的商品信息发送到后端，换取服务端的prepay_id

      let {
        money,
        openId
      } = this.data
     
      let token = wx.getStorageSync('user_token')
      let openList = await request('/接口', {
        ...需要给后端的字段
        openid: openId
      })
      this.setData({
        prepay_id: openList.data.prepay_id
      })

接下来我们就可以写一版调起微信支付接口的数据

let random = (Math.random()).toString() //这个随机数一定要变成字符串
      let timestamp = (new Date().getTime()).toString() //时间戳一定要是字符串
      let mch_key = 'FVmZcEmubX817JRKHmWo1vaVHzte2Oha'
      let obj = {
        appId: 'wxb9811d3b2e3de44c',
        nonceStr: random,
        package: "prepay_id=" + this.data.prepay_id,
        signType: 'MD5',
        timeStamp: timestamp
      }
      //参数名ASCII码从小到大排序（字典序）
      let arr = Object.keys(obj).sort().map(item => {
       return `${item}=${obj[item]}`;
      });
      //最后拼接上key（商户密钥）得到字符串
      let str = arr.join('&') + '&key=' + mch_key;
      console.log(str);
      //对str进行MD5运算，再将得到的字符串所有字符转换为大写
      let paySign = md5.hexMD5(str).toUpperCase()
      wx.requestPayment({
        "timeStamp": timestamp,
        "nonceStr": random,
        "package": "prepay_id=" + this.data.prepay_id,
        "signType": "MD5",
        "paySign": paySign,
        "success": function (res) {
          console.log('成功了');
        },
        "fail": function (res) {
          console.log(res);
          if (res.errMsg === 'requestPayment:fail cancel') {
            wx.showToast({
              title: '用户取消支付',
              icon: 'none',
              duration: 2000
            })
          } else {
            wx.showToast({
              title: res.errMsg,
              icon: 'none',
              duration: 2000
            })
          }
        },
      })

注意：以上信息中timeStamp、nonceStr、prepay_id、signType、paySign各参数均建议必须都由服务端返回（这样会尽最大可能性保证签名数据一致性），小程序端不做任何处理。大家改一下接口和传递的参数就可以啦，这已经是模板可以直接用！