微信pc端扫码支付前后端流程(Node.js)

最新推荐文章于 2024-07-23 09:36:45 发布

CaseyWei

最新推荐文章于 2024-07-23 09:36:45 发布

阅读量2.9k

点赞数

分类专栏： node.js WeChat

本文链接：https://blog.csdn.net/caseywei/article/details/94837119

版权

node.js 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

WeChat

6 篇文章 0 订阅

订阅专栏

大致流程

不必须事先微信登录, 后台发送本次交易的数据到微信联合支付接口, 返回一个微信提供的交易二维码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 +
    '&notify_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 校验微信支付通知的签名