前端呼叫微信小程式的支付流程

鵬多多發表於2021-02-02
前端微信小程式

目錄

1，前言

分享一個完整的微信小程式支付流程中，前端要做的模組。

2，流程

在呼叫wx.requestPayment之前，需要準備一些引數，流程如下

1，呼叫 wx.login() 獲取 臨時登入憑證code ，並呼叫wx.request回傳到服務端。

2，服務端呼叫 auth.code2Session 介面，換取使用者唯一標識 OpenID 和 會話金鑰 session_key。

3，前端拿到服務端返還的引數後，呼叫wx.requestPayment。

下面是我畫的一個流程圖
流程圖

3，引數說明

引數圖
如上，一共五個引數，引數名區分大小寫，引數名寫錯或者引數型別搞錯都不行。

4，具體程式碼

pay () {
   let _this = this;
   //此處5個變數為我專案需要，與微信支付無關
   let { userId, needPay, price, walletNum, classId } = this.data;
   if(needPay === 0){ //如果還需微信支付的金額為 0 則全部走錢包支付
     HTTP.buyPay(userId , price, classId)
     .then(res => {
       if(res.status === "y"){
         FN.Alert(res.info)
         .then(() => {
           wx.navigateBack();
         })
       };
     });
   }else{//進入微信支付
     FN.wxLogin()
     .then(res => {
       this.setData({
         code:res
       },() => {
         HTTP.payCourse(userId, classId, walletNum, needPay, res)// 調服務端，拿到支付密匙
         .then(res => {
           if(res.status === "y"){
             let obj = res.infoObject.wxpayInfo;
             wx.requestPayment({// 調起微信支付
               timeStamp: obj.timestamp,
               nonceStr: obj.nonceStr,
               package: obj.wxPackage,
               signType: obj.signType,
               paySign: obj.sign,
               success (res) {
                 FN.Alert("支付成功")
                 .then(() => {
                   wx.navigateBack();
                 })
               },
               fail (res) {
                 _this.setData({
                   isShow:false,
                   payPwd:"",
                   pwdFocus:false
                 }, () => {
                   if(res.errMsg.indexOf("cancel") > -1){
                     FN.Toast("取消支付");
                   }else{
                     FN.Toast("支付失敗");
                   }
                 })
               }
             })
           }
         })
       });
     })
     .catch(res => {
       FN.Toast("獲取登入憑證失敗");
     })
   }
 }

如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；
END

面向百度程式設計

往期文章

個人主頁

相關文章