基於Koa2開發微信二維碼掃碼支付相關流程

Molunerfinn發表於2018-05-16

原文首發於我的部落格，歡迎檢視~

前段時間在開發一個功能，要求是通過微信二維碼進行掃碼支付。這個情景我們屢見不鮮了，各種電子商城、線下的自動販賣機等等都會有這個功能。平時只是使用者，如今變為開發者，也是有不小的坑。所以特此寫一篇部落格記錄一下。

注： 要開發微信二維碼支付，你必須要有相應的商戶號的許可權，否則你是無法開發的。若無相應許可權，本文不推薦閱讀。

兩種模式

開啟微信支付的文件，我們可以看到兩種支付模式：模式一和模式二。這二者的流程圖微信的文件裡都給出了（不過說實話畫得真的有點醜）。

文件裡指出了二者的區別：

模式一開發前，商戶必須在公眾平臺後臺設定支付回撥URL。URL實現的功能：接收使用者掃碼後微信支付系統回撥的productid和openid。

模式二與模式一相比，流程更為簡單，不依賴設定的回撥支付URL。商戶後臺系統先呼叫微信支付的統一下單介面，微信後臺系統返回連結引數code_url，商戶後臺系統將code_url值生成二維碼圖片，使用者使用微信客戶端掃碼後發起支付。注意：code_url有效期為2小時，過期後掃碼不能再發起支付。

模式一是我們平時在網購的時候比較常見的，會彈出一個專門的頁面用於掃碼支付，然後支付成功後這個頁面會再次跳轉回回撥頁面，通知你支付成功。第二種的話想對少一些，不過第二種開發起來相對簡單點。本文主要介紹模式二的開發。

搭建Koa2的簡單開發環境

快速搭建Koa2的開發環境我推薦可以使用koa-generator。腳手架能幫我們省去Koa專案一開始的一些基本中介軟體的書寫步驟。（如果你想學習Koa最好自己搭建一個。如果你已經會Koa了就可以使用一些快速腳手架了。）

首先全域性安裝koa-generator：

npm install -g koa-generator

#or

yarn global add koa-generator
複製程式碼

然後找一個目錄用來存放Koa專案，我們打算給這個專案取個名字叫做koa-wechatpay，然後就可以輸入koa2 koa-wechatpay。然後腳手架會自動建立相應資料夾koa-wechatpay，並生成基本骨架。進入這個資料夾，安裝相應的外掛。輸入：

npm install

#or

yarn
複製程式碼

接著你可以輸入npm start 或者 yarn start來執行專案（預設監聽在3000埠）。

如果不出意外，你的專案跑起來了，然後我們用postman測試一下：

這條路由是在routes/index.js裡。

基於Koa2開發微信二維碼掃碼支付相關流程

如果你看到了

{
  "title": "koa2 json"
}
複製程式碼

就說明沒問題。（如果有問題，檢查一下是不是埠被佔用了等等。）

接下來在routes資料夾裡我們新建一個wechatpay.js的檔案用來書寫我們的流程。

簽名

跟微信的伺服器交流很關鍵的一環是簽名必須正確，如果簽名不正確，那麼一切都白搭。

首先我們需要去公眾號的後臺獲取我們所需要的如下相應的id或者key的資訊。其中notify_url和server_ip是用於當我們支付成功後，微信會主動往這個urlpost支付成功的資訊。

簽名演算法如下：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=4_3

為了簽名正確，我們需要安裝一下md5。

npm install md5 --save

#or

yarn add md5
複製程式碼
const md5 = require('md5')
const appid = 'xxx'
const mch_id = 'yyy'
const mch_api_key = 'zzz'
const notify_url = 'http://xxx/api/notify' // 服務端可訪問的域名和介面
const server_ip = 'xx.xx.xx.xx' // 服務端的ip地址
const trade_type = 'NATIVE' // NATIVE對應的是二維碼掃碼支付
let body = 'XXX的充值支付' // 用於顯示在支付介面的提示詞
複製程式碼

然後開始寫簽名函式：

const signString = (fee, ip, nonce) => {
  let tempString = `appid=${appid}&body=${body}&mch_id=${mch_id}&nonce_str=${nonce}&notify_url=${notify_url}&out_trade_no=${nonce}&spbill_create_ip=${ip}&total_fee=${fee}&trade_type=${trade_type}&key=${mch_api_key}`
  return md5(tempString).toUpperCase()
}
複製程式碼

其中fee是要充值的費用，以分為單位。比如要充值1塊錢，fee就是100。ip是個比較隨意的選項，只要符合規則的ip經過測試都是可以的，下文裡我用的是server_ip。nonce就是微信要求的不重複的32位以內的字串，通常可以使用訂單號等唯一標識的字串。

由於跟微信的伺服器交流都是用xml來交流，所以現在我們要手動組裝一下post請求的xml:

const xmlBody = (fee, nonce_str) => {
  const xml = `
    <xml>
    <appid>${appid}</appid>
    <body>${body}</body>
    <mch_id>${mch_id}</mch_id>
    <nonce_str>${nonce_str}</nonce_str>
    <notify_url>${notify_url}</notify_url>
    <out_trade_no>${nonce_str}</out_trade_no>
    <total_fee>${fee}</total_fee>
    <spbill_create_ip>${server_ip}</spbill_create_ip>
    <trade_type>NATIVE</trade_type>
    <sign>${signString(fee, server_ip, nonce_str)}</sign>
    </xml>
  `
  return {
    xml,
    out_trade_no: nonce_str
  }
}
複製程式碼

如果你怕自己的簽名的xml串有問題，可以提前在微信提供的簽名校驗工具裡先校驗一遍，看看是否能通過。

傳送請求

因為需要跟微信服務端發請求，所以我選擇了axios這個在瀏覽器端和node端都能發起ajax請求的庫。

安裝過程不再贅述。繼續在wechatpay.js寫發請求的邏輯。

由於微信給我們返回的也將是一個xml格式的字串。所以我們需要預先寫好解析函式，將xml解析成js物件。為此你可以安裝一個xml2js。安裝過程跟上面的類似，不再贅述。

微信會給我們返回一個諸如下面格式的xml字串：

<xml><return_code><![CDATA[SUCCESS]]></return_code>
<return_msg><![CDATA[OK]]></return_msg>
<appid><![CDATA[wx742xxxxxxxxxxxxx]]></appid>
<mch_id><![CDATA[14899xxxxx]]></mch_id>
<nonce_str><![CDATA[R69QXXXXXXXX6O]]></nonce_str>
<sign><![CDATA[79F0891XXXXXX189507A184XXXXXXXXX]]></sign>
<result_code><![CDATA[SUCCESS]]></result_code>
<prepay_id><![CDATA[wx152316xxxxxxxxxxxxxxxxxxxxxxxxxxx]]></prepay_id>
<trade_type><![CDATA[NATIVE]]></trade_type>
<code_url><![CDATA[weixin://wxpay/xxxurl?pr=dQNakHH]]></code_url>
</xml>
複製程式碼

我們的目標是轉為如下的js物件，好讓我們用js來運算元據：

{
  return_code: 'SUCCESS', // SUCCESS 或者 FAIL
  return_msg: 'OK',
  appid: 'wx742xxxxxxxxxxxxx',
  mch_id: '14899xxxxx',
  nonce_str: 'R69QXXXXXXXX6O',
  sign: '79F0891XXXXXX189507A184XXXXXXXXX',
  result_code: 'SUCCESS',
  prepay_id: 'wx152316xxxxxxxxxxxxxxxxxxxxxxxxxxx',
  trade_type: 'NATIVE',
  code_url: 'weixin://wxpay/xxxurl?pr=dQNakHH' // 用於生成支付二維碼的連結
}
複製程式碼

於是我們寫一個函式，呼叫xml2js來解析xml：

// 將XML轉為JS物件
const parseXML = (xml) => {
  return new Promise((res, rej) => {
    xml2js.parseString(xml, {trim: true, explicitArray: false}, (err, json) => {
      if (err) {
        rej(err)
      } else {
        res(json.xml)
      }
    })
  })
}
複製程式碼

上面的程式碼返回了一個Promise物件，因為xml2js的操作是在回撥函式裡返回的結果，所以為了配合Koa2的async、await，我們可以將其封裝成一個Promise物件，將解析完的結果通過resolve返回回去。這樣就能用await來取資料了：

const axios = require('axios')
const url = 'https://api.mch.weixin.qq.com/pay/unifiedorder' // 微信服務端地址
const pay = async (ctx) => {
  const form = ctx.request.body // 通過前端傳來的資料

  const orderNo = 'XXXXXXXXXXXXXXXX' // 不重複的訂單號
  const fee = form.fee // 通過前端傳來的費用值

  const data = xmlBody(fee, orderNo) // fee是費用，orderNo是訂單號（唯一）
  const res = await axios.post(url, {
    data: data.xml
  }).then(async res => {
    const resJson = await parseXML(res.data)
    return resJson // 拿到返回的資料
  }).catch(err => {
    console.log(err)
  })
  if (res.return_code === 'SUCCESS') { // 如果返回的
    return ctx.body = {
      success: true,
      message: '請求成功',
      code_url: res.code_url, // code_url就是用於生成支付二維碼的連結
      order_no: orderNo // 訂單號
    }
  }
  ctx.body = {
    success: false,
    message: '請求失敗'
  }
}

router.post('/api/pay', pay)

module.exports = router
複製程式碼

然後我們要將這個router掛載到根目錄的app.js裡去。

找到之前預設的兩個路由，一個index，一個user：

const index = require('./routes/index')
const users = require('./routes/users')
const wechatpay = require('./routes/wechatpay') // 加在這裡
複製程式碼

然後到頁面底下掛載這個路由：

// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())
app.use(wechatpay.routes(), users.allowedMethods()) // 加在這裡
複製程式碼

於是你就可以通過傳送/api/pay來請求二維碼資料啦。（如果有跨域需要自己考慮解決跨域方案，可以跟Koa放在同域裡，也可以開一層proxy來轉發，也可以開CORS頭等等）

注意， 本例裡是用前端來生成二維碼，其實也可以通過後端生成二維碼，然後再返回給前端。不過為了簡易演示，本例採用前端通過獲取code_url後，在前端生成二維碼。

展示支付二維碼

前端我用的是Vue，當然你可以選擇你喜歡的前端框架。這裡關注點在於通過拿到剛才後端傳過來的code_url來生成二維碼。

在前端，我使用的是@xkeshi/vue-qrcode這個庫來生成二維碼。它呼叫特別簡單：

import VueQrcode from '@xkeshi/vue-qrcode'
export default {
  components: {
    VueQrcode
  },
  // ...其他程式碼
}
複製程式碼

然後就可以在前端裡用<vue-qrcode>的元件來生成二維碼了：

<vue-qrcode :value="codeUrl" :options="{ size: 200 }">
複製程式碼

放到Dialog裡就是這樣的效果：

文字是我自己新增的

基於Koa2開發微信二維碼掃碼支付相關流程

付款成功自動重新整理頁面

有兩種將支付成功寫入資料庫的辦法。

一種是在開啟了掃碼對話方塊後，不停向微信服務端輪詢支付結果，如果支付成功，那麼就向後端發起請求，告訴後端支付成功，讓後端寫入資料庫。

一種是後端一直開著介面，等微信主動給後端的notify_url發起post請求，告訴後端支付結果，讓後端寫入資料庫。然後此時前端向後端輪詢的時候應該是去資料庫取輪詢該訂單的支付結果，如果支付成功就關閉Dialog。

第一種比較簡單但是不安全：試想萬一使用者支付成功的同時關閉了頁面，或者使用者支付成功了，但是網路有問題導致前端沒法往後端發支付成功的結果，那麼後端就一直沒辦法寫入支付成功的資料。

第二種雖然麻煩，但是保證了安全。所有的支付結果都必須等微信主動向後端通知，後端存完資料庫後再返回給前端訊息。這樣哪怕使用者支付成功的同時關閉了頁面，下次再開啟的時候，由於資料庫已經寫入了，所以拿到的也是支付成功的結果。

所以付款成功自動重新整理頁面這個部分我們分為兩個部分來說：

前端部分

Vue的data部分

data: {
  payStatus: false, // 未支付成功
  retryCount: 0, // 輪詢次數，從0-200
  orderNo: 'xxx', // 從後端傳來的order_no
  codeUrl: 'xxx' // 從後端傳來的code_url
}
複製程式碼

在methods裡寫一個查詢訂單資訊的方法：


// ...

handleCheckBill () {
  return setTimeout(() => {
    if (!this.payStatus && this.retryCount < 120) {
      this.retryCount += 1
      axios.post('/api/check-bill', { // 向後端請求訂單支付資訊
        orderNo: this.orderNo
      })
        .then(res => {
          if (res.data.success) {
            this.payStatus = true
            location.reload() // 偷懶就用reload重新重新整理頁面
          } else {
            this.handleCheckBill()
          }
        }).catch(err => {
          console.log(err)
        })
    } else {
      location.reload()
    }
  }, 1000)
}
複製程式碼

在開啟二維碼Dialog的時候，這個方法就啟用了。然後就開始輪詢。我訂了一個時間，200s後如果還是沒有付款資訊也自動重新整理頁面。實際上你可以自己根據專案的需要來定義這個時間。

後端部分

前端到後端只有一個介面，但是後端有兩個介面。一個是用來接收微信的推送，一個是用來接收前端的查詢請求。

先來寫最關鍵的微信的推送請求處理。由於我們接收微信的請求是在Koa的路由裡，並且是以流的形式傳輸的。需要讓Koa支援解析xml格式的body，所以需要安裝一個rawbody來獲取xml格式的body。

// 處理微信支付回傳notify
// 如果收到訊息要跟微信回傳是否接收到
const handleNotify = async (ctx) => {
  const xml = await rawbody(ctx.req, {
    length: ctx.request.length,
    limit: '1mb',
    encoding: ctx.request.charset || 'utf-8'
  })

  const res = await parseXML(xml) // 解析xml

  if (res.return_code === 'SUCCESS') {
    if (res.result_code === 'SUCCESS') { // 如果都為SUCCESS代表支付成功
      // ... 這裡是寫入資料庫的相關操作

      // 開始回傳微信
      ctx.type = 'application/xml' // 指定傳送的請求型別是xml
      // 回傳微信，告訴已經收到
      return ctx.body = `<xml>
        <return_code><![CDATA[SUCCESS]]></return_code>
        <return_msg><![CDATA[OK]]></return_msg>
      </xml>
      `
    }
  }

  // 如果支付失敗，也回傳微信
  ctx.status = 400
  ctx.type = 'application/xml'
  ctx.body = `<xml>
    <return_code><![CDATA[FAIL]]></return_code>
    <return_msg><![CDATA[OK]]></return_msg>
  </xml>
  `
}

router.post('/api/notify', handleNotify)
複製程式碼

這裡的坑就是Koa處理微信回傳的xml。如果不知道是以raw-body的形式回傳的，會除錯半天。。

接下來這個就是比較簡單的給前端回傳的了。

const checkBill = async (ctx) => {
  const form = ctx.request.body
  const orderNo = form.orderNo
  const result = await 資料庫操作

  if (result) { // 如果訂單支付成功
    return ctx.body = {
      success: true
    }
  }

  ctx.status = 400
  ctx.body = {
    success: false
  }
}

router.post('/api/check-bill', checkBill)
複製程式碼

總結

至此，一整個基於Koa2的微信二維碼支付流程就簡單演示完了，由於不是公開的專案，所以沒有實際的GitHub倉庫。不過基本上關鍵的程式碼我都已經註釋出來啦。我參考了不少人的實現，曾考慮過用一些比如wechatpay的npm庫，不過最終還是自己解決了。這裡面感謝很多前人的分享，也希望我這篇文章能給你一些幫助。

參考文章

微信支付文章

https://www.itbaby.me/blog/59e21af45d21b31fcd4e02c6

https://juejin.im/post/5a8e84faf265da4e7e10c92f

返回介面

http://webcache.googleusercontent.com/search?q=cache:iFC0HZuFB1gJ:jeffdeng.me/wx/2017/03/13/wx-platform-conect.html+&cd=4&hl=zh-CN&ct=clnk&gl=us

XML流處理

https://blog.csdn.net/yxz1025/article/details/52313221

https://juejin.im/post/5a6c558ef265da3e4b77030f

相關文章