微信小程序接入微信支付實現(xiàn)過程詳解

更新時間：2022年12月26日 10:11:39 作者：落雪小軒韓

這篇文章主要介紹了微信小程序接入微信支付實現(xiàn)過程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

一、基本介紹

1、支付場景：點擊支付按鈕喚起微信支付彈窗，輸入正確密碼后完成支付。

2、基本流程：點擊支付按鈕首先生成一個訂單，然后在后端調(diào)用微信api接口進行統(tǒng)一下單，將接口返回的數(shù)據(jù)回傳到前端拉起支付操作，然后異步通知支付結(jié)果。

二、配置信息

1、微信公眾平臺配置

點擊功能 – 微信支付，關(guān)聯(lián)一下注冊好的微信商戶平臺

1、微信商戶平臺配置

（1）設(shè)置證書和密鑰

登錄微信商戶平臺，點擊賬戶中心 – API安全，設(shè)置證書和兩個密鑰（此處兩個密鑰設(shè)置為相同的。

（2）申請JSAPI支付

①點擊產(chǎn)品中心 – 我的產(chǎn)品，點擊申請JSAPI支付。

②填寫支付授權(quán)目錄

開發(fā)配置中需要填寫支付授權(quán)目錄（后端服務(wù)器域名）

三、編碼實現(xiàn)

1、獲取用戶的openId

必須要有微信用戶的openid才可以喚醒支付功能。openid由微信公眾號提供，是對于消費者微信產(chǎn)生的唯一用戶身份標(biāo)識。

獲取方法：傳送門

2、獲取prepay_id和支付簽名驗證paySign

商戶在小程序中先調(diào)用接口在微信支付服務(wù)后臺生成預(yù)支付交易單，返回正確的預(yù)支付交易后調(diào)起支付。

（1）調(diào)用接口生成預(yù)支付訂單拿到訂單id

orderInsert(data).then(res => {
  if (res.data.code === 1) {
     this.getPayInfo(res.data.data.id)
   } else {
     wx.showToast({
       title: res.data.msg,
       icon: 'none'
     })
   }
})

（2）通過訂單id調(diào)用接口獲取用戶支付所需參數(shù)

getPayInfo(id) {
  unifiedOrder({id}).then(res => {
		if(res.data.code === 1) {
			this.payMoney(res.data.data)
		} else {
      wx.showToast({
         title: res.data.msg,
         icon: "error"
       })
     }
  }
}

（3）通過wx.requestPayment方法調(diào)用起支付功能

payMoney(moneyData) {
	wx.requestPayment({
      timeStamp: moneyData.timeStamp,
      nonceStr: moneyData.nonceStr,
      package: moneyData.packageValue,
      signType: moneyData.signType,
      paySign: moneyData.paySign,
      success(res) {
      },
      fail(res) {
        wx.showToast({
          title: "支付失??！",
          icon: "error"
        })
      }
   })
}