大致流程
- 不必須事先微信登錄, 前端準(zhǔn)備好支付后, 告訴后端, 后臺發(fā)送本次交易的數(shù)據(jù)到微信聯(lián)合支付接口, 返回一個微信提供的交易二維碼url, 將這個url返回給前端
- 前端將這個地址轉(zhuǎn)換成一個二維碼, 并且開啟一個輪詢(或websocket)向后臺查詢本次交易是否支付; 后臺根據(jù)微信的通知狀態(tài), 校驗(yàn)簽名, 然后更新支付的狀態(tài)(是否完成支付)
- 需要準(zhǔn)備的, 微信公眾賬號的appid(注意并非是網(wǎng)頁應(yīng)用的appid), 商戶號(mchid), 支付密鑰
代碼實(shí)現(xiàn)
后端的具體流程與之前寫的一個博客類似 nodejs 獲取微信小程序支付的簽名(paySign)
但是會有一些區(qū)別, 比如 trade_type 是 NATIVE, 另外, 也不需要openid
1. 生成二維碼的 url
用戶在提交訂單后, 商戶生成一個獨(dú)一無二的訂單號, 訂單號的生成可以參考這個函數(shù)
const getTradeId = () => {
const time = new Date().getTime().toString()
const random = ((0.1 + Math.random()) * 100000 + '').slice(1, 5)
return 'gankerex' + time + '' + random
}
將本次交易有關(guān)的數(shù)據(jù)存儲到數(shù)據(jù)庫后
再去后臺調(diào)用微信支付接口, 得到本次交易二維碼url
// 一些需要用的庫
const crypto = require('crypto')
const axios = require('axios')
const xml2js = require('xml2js')
// 微信支付接口的數(shù)據(jù)都是xml, 為了方便, 需要將 xml 轉(zhuǎn)換成 json
const xmlParser = new xml2js.Parser()
// md5 加密算法
const md5 = str => {
let m = crypto.createHash('md5')
return m.update(str).digest('hex')
}
// 一些需要用的變量
// 接收支付結(jié)果通知的地址
const payNotifyUrl = 'https:xxx.com/notify'
// 微信公眾號的 appid
const appId = 'xxxxxxxx'
// 商戶號
const mchId = 'yyyyyy'
// 支付密鑰
const PAY_API_KEY = 'xyxyxyxyx'
// 接下來準(zhǔn)備一些方法
// 生成一個隨機(jī)字符串
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
}
// 生成預(yù)支付簽名, 將會發(fā)到微信支付接口
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()
}
// 按照要求的格式打包將要發(fā)送給微信的數(shù)據(jù)
const wxPcSendData = (appId, attach, productIntro, mchId, nonceStr, openId, tradeId, ip, price, sign) => {
// attach 將會在通知支付結(jié)果時返回
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()
// 交易的費(fèi)用, 單位是分
let price = 1
// 交易的描述, 將會出現(xiàn)在用戶的微信支付詳情中
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]
// 這里拿到的這個地址, 將它返回給前端同學(xué)即可
const codeUrl = success.xml.code_url[0]
}
}
})
}
}
2. 前端同學(xué)拿到了 codeUrl后
用你喜歡的方法將這個 codeUrl 轉(zhuǎn)換成一個二維碼, 并展示給用戶
由于pc端并沒有辦法直接從微信拿到用戶是否已經(jīng)掃碼支付的結(jié)果, 所以需要開啟一個輪詢, 向后端查詢結(jié)果, 判斷用戶到底是否完成支付
那么, 后端同學(xué)是如何知道用戶已經(jīng)支付了呢?
微信會向之前準(zhǔn)備的 notifyUrl 去發(fā)送支付的結(jié)果, 具體怎么做, 可以參考這篇博客 nodejs 校驗(yàn)微信支付通知的簽名
