大致流程
- 不必須事先微信登錄, 後臺發送本次交易的數據到微信聯合支付接口, 返回一個微信提供的交易二維碼url, 將這個url返回給前端
- 前端將這個地址轉換成一個二維碼, 並且開啓一個輪詢(或websocket)向後臺查詢本次交易是否支付; 後臺根據微信的通知狀態, 校驗簽名, 然後更新支付的狀態(是否完成支付)
- 需要準備的, 微信公衆賬號的appid(注意並非是網頁應用的appid), 商戶號(mchid), 支付密鑰
代碼實現
後端的具體流程與之前寫的一個博客類似 nodejs 獲取微信小程序支付的簽名(paySign)
但是會有一些區別, 比如 trade_type 是 NATIVE, 另外, 也不需要openid
1. 生成二維碼的 url
用戶在提交訂單後, 商戶生成一個獨一無二的訂單號, 訂單號的生成可以參考這個函數
const getTradeId = () => {
const time = new Date().getTime().toString()
const random = (Math.random() * 100000000 + '').slice(1, 5)
return 'gankerex' + time + '' + random
}
將本次交易有關的數據存儲到數據庫後
再去後臺調用微信支付接口, 得到本次交易二維碼url
// 一些需要用的庫
const crypto = require('crypto')
const axios = require('axios')
const xml2js = require('xml2js')
// 微信支付接口的數據都是xml, 爲了方便, 需要將 xml 轉換成 json
const xmlParser = new xml2js.Parser()
// md5 加密算法
const md5 = str => {
let m = crypto.createHash('md5')
return m.update(str).digest('hex')
}
// 一些需要用的變量
// 接收支付結果通知的地址
const payNotifyUrl = 'https:xxx.com/notify'
// 微信公衆號的 appid
const appId = 'xxxxxxxx'
// 商戶號
const mchId = 'yyyyyy'
// 支付密鑰
const PAY_API_KEY = 'xyxyxyxyx'
// 接下來準備一些方法
// 生成一個隨機字符串
const getNonceStr = () => {
let text = ""
const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
for (let i = 0; i < 16; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length))
}
return text
}
// 生成預支付簽名, 將會發到微信支付接口
const getPcPrePaySignForWX = (appId, attach, productIntro, mchId, nonceStr, notifyUrl, openId, tradeId, ip, price, PAY_API_KEY) => {
let stringA = 'appid=' + appId +
'&attach=' + attach +
'&body=' + productIntro +
'&mch_id=' + mchId +
'&nonce_str=' + nonceStr +
'¬ify_url=' + payNotifyUrl +
'&out_trade_no=' + tradeId +
'&spbill_create_ip=' + ip +
'&total_fee=' + price +
'&trade_type=NATIVE'
let stringSignTemp = stringA + '&key=' + PAY_API_KEY
return md5(stringSignTemp).toUpperCase()
}
// 按照要求的格式打包將要發送給微信的數據
const wxPcSendData = (appId, attach, productIntro, mchId, nonceStr, openId, tradeId, ip, price, sign) => {
// attach 將會在通知支付結果時返回
const sendData = '<xml>' +
'<appid>' + appId + '</appid>' +
'<attach>' + attach + '</attach>' +
'<body>' + productIntro + '</body>' +
'<mch_id>' + mchId + '</mch_id>' +
'<nonce_str>' + nonceStr + '</nonce_str>' +
'<notify_url>' + payNotifyUrl + '</notify_url>' +
'<out_trade_no>' + tradeId + '</out_trade_no>' +
'<spbill_create_ip>' + ip + '</spbill_create_ip>' +
'<total_fee>' + price + '</total_fee>' +
'<trade_type>NATIVE</trade_type>' +
'<sign>' + sign + '</sign>' +
'</xml>'
return sendData
}
async function pcPaySign(tradeId, ip) {
const nonceStr = getNonceStr()
// 交易的費用, 單位是分
let price = 1
// 交易的描述, 將會出現在用戶的微信支付詳情中
let productIntro = 'productIntro'
const prePaySign = getPcPrePaySignForWX(appId, 'xxx', productIntro, mchId, nonceStr, payNotifyUrl, openId, tradeId, ip, price, PAY_API_KEY)
const data = wxPcSendData(appId, 'gankerex', productIntro, mchId, nonceStr, openId, tradeId, ip, price, prePaySign)
let wxResponse
try {
wxResponse = await axios.post('https://api.mch.weixin.qq.com/pay/unifiedorder', data)
xmlParser.parseString(wxResponse.data, (err, success) => {
if (err) {
//
} else {
if (success.xml.return_code[0] === 'SUCCESS') {
log('pc pay', success.xml)
const prepayId = success.xml.prepay_id[0]
// 這裏拿到的這個地址, 將它返回給前端同學即可
const codeUrl = success.xml.code_url[0]
}
}
})
}
}
2. 前端同學拿到了 codeUrl後
用你喜歡的方法將這個 codeUrl 轉換成一個二維碼（可以找相關插件）, 並展示給用戶
由於pc端並沒有辦法直接從微信拿到用戶是否已經掃碼支付的結果, 所以需要開啓一個輪詢, 向後端查詢結果, 判斷用戶到底是否完成支付
那麼, 後端同學是如何知道用戶已經支付了呢?
微信會向之前準備的 notifyUrl 去發送支付的結果, 具體怎麼做, 可以參考這篇博客 nodejs 校驗微信支付通知的簽名