大致流程
- 不必须事先微信登录, 前端准备好支付后, 告诉后端, 后台发送本次交易的数据到微信联合支付接口, 返回一个微信提供的交易二维码url, 将这个url返回给前端
- 前端将这个地址转换成一个二维码, 并且开启一个轮询(或websocket)向后台查询本次交易是否支付; 后台根据微信的通知状态, 校验签名, 然后更新支付的状态(是否完成支付)
- 需要准备的, 微信公众账号的appid(注意并非是网页应用的appid), 商户号(mchid), 支付密钥
代码实现
后端的具体流程与之前写的一个博客类似 nodejs 获取微信小程序支付的签名(paySign)
但是会有一些区别, 比如 trade_type 是 NATIVE, 另外, 也不需要openid
1. 生成二维码的 url
用户在提交订单后, 商户生成一个独一无二的订单号, 订单号的生成可以参考这个函数
const getTradeId = () => {
const time = new Date().getTime().toString()
const random = ((0.1 + Math.random()) * 100000 + '').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 校验微信支付通知的签名
