微信小程序調(diào)用支付接口的完整流程記錄

更新時間：2022年02月14日 15:06:21 作者：lilUnicorn

我們在做小程序支付相關(guān)的開發(fā)時,總會遇到這些難題,下面這篇文章主要給大家介紹了關(guān)于微信小程序調(diào)用支付接口的完整流程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

當然在開發(fā)之前，我們需要有下面這些東西：

appId(小程序分配)
小程序密鑰(小程序配置界面獲取)
商戶號
api密鑰(商家后臺自己設(shè)置)

首先我們要知道把大象放進冰箱攏共需要三步（不是），那么我們調(diào)起支付也是一樣的

步驟如下：

wx.login獲取用戶臨時登錄憑證code，發(fā)送到后端服務(wù)器換取openId
在下單時，小程序需要將商品Id，商品數(shù)量，以及openId傳送到服務(wù)器
服務(wù)器在接收到商品Id、商品數(shù)量、openId后，生成服務(wù)期訂單數(shù)據(jù)，同時經(jīng)過一定的簽名算法，向微信支付發(fā)送請求，獲取預(yù)付單信息(prepay_id)，同時將獲取的數(shù)據(jù)再次進行相應(yīng)規(guī)則的簽名，向小程序端響應(yīng)必要的信息(必須字段信息將在下文進行詳細說明)
小程序端在獲取對應(yīng)的參數(shù)后，調(diào)用wx.requestPayment()發(fā)起微信支付，喚醒支付工作臺，進行支付

1.通過wx.login拿到code，然后請求接口從后臺拿去openId

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

2.在調(diào)起微信支付前需要保證接收到所有我們要傳遞的值，在這里是openId,和支付金額。openId以及相應(yīng)需要的商品信息發(fā)送到后端，換取服務(wù)端的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
      })

接下來我們就可以寫一版調(diào)起微信支付接口的數(shù)據(jù)

let random = (Math.random()).toString() //這個隨機數(shù)一定要變成字符串
      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
      }
      //參數(shù)名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運算，再將得到的字符串所有字符轉(zhuǎn)換為大寫
      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各參數(shù)均建議必須都由服務(wù)端返回（這樣會盡最大可能性保證簽名數(shù)據(jù)一致性），小程序端不做任何處理。大家改一下接口和傳遞的參數(shù)就可以啦，這已經(jīng)是模板可以直接用！