微信jssdk 調用微信支付

支付目錄配置

設置支付目錄

請確保實際支付時的請求目錄與後臺配置的目錄一致，否則將無法成功喚起微信支付。
在微信商戶平臺（pay.weixin.qq.com）設置您的公眾號支付支付目錄，設置路徑：商戶平臺→產品中心→開發配置。公眾號支付在請求支付的時候會校驗請求來源是否有在商戶平臺做了配置，所以必須確保支付目錄已經正確的被配置，否則將驗證失敗，請求支付不成功。

支付目錄配置

設置授權域名

開發公眾號支付時，在統一下單接口中要求必傳用戶openid，而獲取openid則需要您在公眾平臺設置獲取openid的域名，只有被設置過的域名才是一個有效的獲取openid的域名，否則將獲取失敗。具體界面如圖7.8所示：

微信網頁授權域名 微信網頁授權域名

發起一個微信支付請求

wx.chooseWXPay({    timestamp: 0, // 支付籤名時間戳，注意微信jssdk中的所有使用timestamp欄位均為小寫。但最新版的支付後臺生成籤名使用的timeStamp欄位名需大寫其中的S字符    nonceStr: '', // 支付籤名隨機串，不長於 32 位    package: '', // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=***）    signType: '', // 籤名方式，默認為'SHA1'，使用新版支付需傳入'MD5'    paySign: '', // 支付籤名    success: function (res) {        // 支付成功後的回調函數    }});

備註：prepay_id 通過微信支付統一下單接口拿到，paySign 採用統一的微信支付 Sign 籤名生成方法，注意這裡 appId 也要參與籤名，appId 與 config 中傳入的 appId 一致，即最後參與籤名的參數有appId, timeStamp, nonceStr, package, signType。
微信支付開發文檔：https://pay.weixin.qq.com/wiki/doc/api/index.html

微信支付的處理流程

創建商戶訂單，生成商戶訂單號（ out_trade_no ）

統一下單，商戶系統先調用該接口在微信支付服務後臺生成預支付交易單，返回正確的預支付交易回話標識

生成微信支付的config參數

伺服器處理方法頁面設置請求，獲取微信支付的配置

發起請求，去伺服器獲取相應的配置信息，然後配置 chooseWXPay

this.$http.post(LIVE_ORDER_URL, {    live_id: 1,    order_type: 1,    order_money: 1}).then((response) => {    if (response.status == 200) {         const result = response.data         if (result.code == 0) {               const configResult = result.data               this.$wechat.chooseWXPay({                    timestamp: configResult.timeStamp, // 支付籤名時間戳，注意微信jssdk中的所有使用timestamp欄位均為小寫。但最新版的支付後臺生成籤名使用的timeStamp欄位名需大寫其中的S字符                    nonceStr: configResult.nonceStr, // 支付籤名隨機串，不長於 32 位                    package: configResult.package, // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=***）                    signType: configResult.signType, // 籤名方式，默認為'SHA1'，使用新版支付需傳入'MD5'                    paySign: configResult.paySign, // 支付籤名                    success: function(res) {                          // 支付成功後的回調函數                            console.log("res: "+JSON.stringify(res))                    }                });         }    }})

生成商戶訂單號

const userInfo = await userServices.getUserInfo(userId)            const out_trade_no = Date.now() + wxUtil.getNonceStr(5);postData.out_trade_no = out_trade_noconst result = await orderServices.createOrder(userId, postData)

統一下單

配置統一下單的參數，然後調用統一下單的接口
參考連結：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

let orderParams = {    appid: config.wxAppID,    mch_id: config.mch_id,    device_info: 'WEB',    nonce_str: wxUtil.getNonceStr(32),    body: 'test',    out_trade_no: out_trade_no,    total_fee: 100,    spbill_create_ip: '127.0.0.1',    notify_url: constant.WECHAT_NOTICE_URL,    openid: openid,    trade_type: 'JSAPI'}const orderSign = wxUtil.wxOrderSign(orderParams, config.wxkey)orderParams.sign = orderSignconst orderXml = wxUtil.json2xml(orderParams)console.log("orderXml:" + orderXml)const fetchResult = await fetch('https://api.mch.weixin.qq.com/pay/unifiedorder', {     method: 'POST',     body: orderXml,     headers: {          'Accept': 'text/xml',          'Content-Type': 'text/xml',    }})const unifiedResult = await fetchResult.text()

設置支付的配置信息

//設置支付的配置信息let apyconfig = {    appId: config.wxAppID,    timeStamp: parseInt(Date.now() / 1000),    nonceStr: wxUtil.getNonceStr(32),    package: "prepay_id=" + json.prepay_id,    signType: "MD5"}let apySign = wxUtil.wxOrderSign(apyconfig, config.wxkey)apyconfig.paySign = apySigndelete apyconfig.appIdreturnResult.data = apyconfig

遇到的問題分析

調用支付jsapi缺少參數total_fee

解決方法：

由於一開始配置 package出現問題，直接將prepay_id賦值給package（ package: json.prepay_id ）,正確的做法為：package: "prepay_id=" + json.prepay_id,

全棧部落區塊鏈部落