這篇文章主要介紹基于Koa2開發(fā)微信二維碼掃碼支付的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
為黑龍江等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù),及黑龍江網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、黑龍江網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!兩種模式
打開微信支付的文檔,我們可以看到兩種支付模式:模式一和模式二。這二者的流程圖微信的文檔里都給出了(不過說實(shí)話畫得真的有點(diǎn)丑)。
文檔里指出了二者的區(qū)別:
模式一開發(fā)前,商戶必須在公眾平臺(tái)后臺(tái)設(shè)置支付回調(diào)URL。URL實(shí)現(xiàn)的功能:接收用戶掃碼后微信支付系統(tǒng)回調(diào)的productid和openid。
模式二與模式一相比,流程更為簡(jiǎn)單,不依賴設(shè)置的回調(diào)支付URL。商戶后臺(tái)系統(tǒng)先調(diào)用微信支付的統(tǒng)一下單接口,微信后臺(tái)系統(tǒng)返回鏈接參數(shù)code_url,商戶后臺(tái)系統(tǒng)將code_url值生成二維碼圖片,用戶使用微信客戶端掃碼后發(fā)起支付。注意:code_url有效期為2小時(shí),過期后掃碼不能再發(fā)起支付。
模式一是我們平時(shí)在網(wǎng)購(gòu)的時(shí)候比較常見的,會(huì)彈出一個(gè)專門的頁面用于掃碼支付,然后支付成功后這個(gè)頁面會(huì)再次跳轉(zhuǎn)回回調(diào)頁面,通知你支付成功。第二種的話想對(duì)少一些,不過第二種開發(fā)起來相對(duì)簡(jiǎn)單點(diǎn)。 本文主要介紹模式二的開發(fā) 。
搭建Koa2的簡(jiǎn)單開發(fā)環(huán)境
快速搭建Koa2的開發(fā)環(huán)境我推薦可以使用koa-generator 。腳手架能幫我們省去Koa項(xiàng)目一開始的一些基本中間件的書寫步驟。(如果你想學(xué)習(xí)Koa最好自己搭建一個(gè)。如果你已經(jīng)會(huì)Koa了就可以使用一些快速腳手架了。)
首先全局安裝 koa-generator
:
npm install -g koa-generator #or yarn global add koa-generator
然后找一個(gè)目錄用來存放Koa項(xiàng)目,我們打算給這個(gè)項(xiàng)目取個(gè)名字叫做 koa-wechatpay
,然后就可以輸入 koa2 koa-wechatpay
。然后腳手架會(huì)自動(dòng)創(chuàng)建相應(yīng)文件夾 koa-wechatpay
,并生成基本骨架。進(jìn)入這個(gè)文件夾,安裝相應(yīng)的插件。輸入:
npm install #or yarn
接著你可以輸入 npm start
或者 yarn start
來運(yùn)行項(xiàng)目(默認(rèn)監(jiān)聽在3000端口)。
如果不出意外,你的項(xiàng)目跑起來了,然后我們用postman測(cè)試一下:
這條路由是在 routes/index.js
里。
如果你看到了
{ "title": "koa2 json" }
就說明沒問題。(如果有問題,檢查一下是不是端口被占用了等等。)
接下來在 routes
文件夾里我們新建一個(gè) wechatpay.js
的文件用來書寫我們的流程。
簽名
跟微信的服務(wù)器交流很關(guān)鍵的一環(huán)是簽名必須正確,如果簽名不正確,那么一切都白搭。
首先我們需要去公眾號(hào)的后臺(tái)獲取我們所需要的如下相應(yīng)的id或者key的信息。其中 notify_url
和 server_ip
是用于當(dāng)我們支付成功后,微信會(huì)主動(dòng)往這個(gè)url post
支付成功的信息。
簽名算法如下: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' // 服務(wù)端可訪問的域名和接口 const server_ip = 'xx.xx.xx.xx' // 服務(wù)端的ip地址 const trade_type = 'NATIVE' // NATIVE對(duì)應(yīng)的是二維碼掃碼支付 let body = 'XXX的充值支付' // 用于顯示在支付界面的提示詞
然后開始寫簽名函數(shù):
const signString = (fee, ip, nonce) => { let tempString = `appid=${appid}&body=${body}&mch_id=${mch_id}&nonce_str=${nonce}¬ify_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
是要充值的費(fèi)用,以分為單位。比如要充值1塊錢, fee
就是100。ip是個(gè)比較隨意的選項(xiàng),只要符合規(guī)則的ip經(jīng)過測(cè)試都是可以的,下文里我用的是 server_ip
。 nonce
就是微信要求的不重復(fù)的32位以內(nèi)的字符串,通??梢允褂糜唵翁?hào)等唯一標(biāo)識(shí)的字符串。
由于跟微信的服務(wù)器交流都是用xml來交流,所以現(xiàn)在我們要手動(dòng)組裝一下post請(qǐng)求的 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
串有問題,可以提前在微信提供的簽名校驗(yàn)工具里先校驗(yàn)一遍,看看是否能通過。
發(fā)送請(qǐng)求
因?yàn)樾枰⑿欧?wù)端發(fā)請(qǐng)求,所以我選擇了 axios
這個(gè)在瀏覽器端和node端都能發(fā)起ajax請(qǐng)求的庫(kù)。
安裝過程不再贅述。繼續(xù)在 wechatpay.js
寫發(fā)請(qǐng)求的邏輯。
由于微信給我們返回的也將是一個(gè)xml格式的字符串。所以我們需要預(yù)先寫好解析函數(shù),將xml解析成js對(duì)象。為此你可以安裝一個(gè) xml2js 。安裝過程跟上面的類似,不再贅述。
微信會(huì)給我們返回一個(gè)諸如下面格式的 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>
我們的目標(biāo)是轉(zhuǎn)為如下的js對(duì)象,好讓我們用js來操作數(shù)據(jù):
{ 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' // 用于生成支付二維碼的鏈接 }
于是我們寫一個(gè)函數(shù),調(diào)用 xml2js
來解析xml:
// 將XML轉(zhuǎn)為JS對(duì)象 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) } }) }) }
上面的代碼返回了一個(gè) Promise
對(duì)象,因?yàn)?xml2js
的操作是在回調(diào)函數(shù)里返回的結(jié)果,所以為了配合Koa2的 async
、 await
,我們可以將其封裝成一個(gè) Promise
對(duì)象,將解析完的結(jié)果通過 resolve
返回回去。這樣就能用 await
來取數(shù)據(jù)了:
const axios = require('axios') const url = 'https://api.mch.weixin.qq.com/pay/unifiedorder' // 微信服務(wù)端地址 const pay = async (ctx) => { const form = ctx.request.body // 通過前端傳來的數(shù)據(jù) const orderNo = 'XXXXXXXXXXXXXXXX' // 不重復(fù)的訂單號(hào) const fee = form.fee // 通過前端傳來的費(fèi)用值 const data = xmlBody(fee, orderNo) // fee是費(fèi)用,orderNo是訂單號(hào)(唯一) const res = await axios.post(url, { data: data.xml }).then(async res => { const resJson = await parseXML(res.data) return resJson // 拿到返回的數(shù)據(jù) }).catch(err => { console.log(err) }) if (res.return_code === 'SUCCESS') { // 如果返回的 return ctx.body = { success: true, message: '請(qǐng)求成功', code_url: res.code_url, // code_url就是用于生成支付二維碼的鏈接 order_no: orderNo // 訂單號(hào) } } ctx.body = { success: false, message: '請(qǐng)求失敗' } } router.post('/api/pay', pay) module.exports = router
然后我們要將這個(gè)router掛載到根目錄的 app.js
里去。
找到之前默認(rèn)的兩個(gè)路由,一個(gè) index
,一個(gè) user
:
const index = require('./routes/index') const users = require('./routes/users') const wechatpay = require('./routes/wechatpay') // 加在這里
然后到頁面底下掛載這個(gè)路由:
// routes app.use(index.routes(), index.allowedMethods()) app.use(users.routes(), users.allowedMethods()) app.use(wechatpay.routes(), users.allowedMethods()) // 加在這里
于是你就可以通過發(fā)送 /api/pay
來請(qǐng)求二維碼數(shù)據(jù)啦。(如果有跨域需要自己考慮解決跨域方案,可以跟Koa放在同域里,也可以開一層proxy來轉(zhuǎn)發(fā),也可以開CORS頭等等)
注意, 本例里是用前端來生成二維碼,其實(shí)也可以通過后端生成二維碼,然后再返回給前端。不過為了簡(jiǎn)易演示,本例采用前端通過獲取 code_url
后,在前端生成二維碼。
展示支付二維碼
前端我用的是 Vue
,當(dāng)然你可以選擇你喜歡的前端框架。這里關(guān)注點(diǎn)在于通過拿到剛才后端傳過來的 code_url
來生成二維碼。
在前端,我使用的是 @xkeshi/vue-qrcode 這個(gè)庫(kù)來生成二維碼。它調(diào)用特別簡(jiǎn)單:
import VueQrcode from '@xkeshi/vue-qrcode' export default { components: { VueQrcode }, // ...其他代碼 }
然后就可以在前端里用 <vue-qrcode>
的組件來生成二維碼了:
<vue-qrcode :value="codeUrl" :options="{ size: 200 }">
放到Dialog里就是這樣的效果:
文本是我自己添加的
付款成功自動(dòng)刷新頁面
有兩種將支付成功寫入數(shù)據(jù)庫(kù)的辦法。
一種是在打開了掃碼對(duì)話框后,不停向微信服務(wù)端輪詢支付結(jié)果,如果支付成功,那么就向后端發(fā)起請(qǐng)求,告訴后端支付成功,讓后端寫入數(shù)據(jù)庫(kù)。
一種是后端一直開著接口,等微信主動(dòng)給后端的 notify_url
發(fā)起post請(qǐng)求,告訴后端支付結(jié)果,讓后端寫入數(shù)據(jù)庫(kù)。然后此時(shí)前端向后端輪詢的時(shí)候應(yīng)該是去數(shù)據(jù)庫(kù)取輪詢?cè)撚唵蔚闹Ц督Y(jié)果,如果支付成功就關(guān)閉Dialog。
第一種比較簡(jiǎn)單但是不安全:試想萬一用戶支付成功的同時(shí)關(guān)閉了頁面,或者用戶支付成功了,但是網(wǎng)絡(luò)有問題導(dǎo)致前端沒法往后端發(fā)支付成功的結(jié)果,那么后端就一直沒辦法寫入支付成功的數(shù)據(jù)。
第二種雖然麻煩,但是保證了安全。所有的支付結(jié)果都必須等微信主動(dòng)向后端通知,后端存完數(shù)據(jù)庫(kù)后再返回給前端消息。這樣哪怕用戶支付成功的同時(shí)關(guān)閉了頁面,下次再打開的時(shí)候,由于數(shù)據(jù)庫(kù)已經(jīng)寫入了,所以拿到的也是支付成功的結(jié)果。
所以 付款成功自動(dòng)刷新頁面
這個(gè)部分我們分為兩個(gè)部分來說:
前端部分
Vue的data部分
data: { payStatus: false, // 未支付成功 retryCount: 0, // 輪詢次數(shù),從0-200 orderNo: 'xxx', // 從后端傳來的order_no codeUrl: 'xxx' // 從后端傳來的code_url }
在methods里寫一個(gè)查詢訂單信息的方法:
// ... handleCheckBill () { return setTimeout(() => { if (!this.payStatus && this.retryCount < 120) { this.retryCount += 1 axios.post('/api/check-bill', { // 向后端請(qǐng)求訂單支付信息 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的時(shí)候,這個(gè)方法就啟用了。然后就開始輪詢。我訂了一個(gè)時(shí)間,200s后如果還是沒有付款信息也自動(dòng)刷新頁面。實(shí)際上你可以自己根據(jù)項(xiàng)目的需要來定義這個(gè)時(shí)間。
后端部分
前端到后端只有一個(gè)接口,但是后端有兩個(gè)接口。一個(gè)是用來接收微信的推送,一個(gè)是用來接收前端的查詢請(qǐng)求。
先來寫最關(guān)鍵的微信的推送請(qǐng)求處理。由于我們接收微信的請(qǐng)求是在Koa的路由里,并且是以流的形式傳輸?shù)?。需要讓Koa支持解析xml格式的body,所以需要安裝一個(gè)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代表支付成功 // ... 這里是寫入數(shù)據(jù)庫(kù)的相關(guān)操作 // 開始回傳微信 ctx.type = 'application/xml' // 指定發(fā)送的請(qǐng)求類型是xml // 回傳微信,告訴已經(jīng)收到 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
的形式回傳的,會(huì)調(diào)試半天。。
接下來這個(gè)就是比較簡(jiǎn)單的給前端回傳的了。
const checkBill = async (ctx) => { const form = ctx.request.body const orderNo = form.orderNo const result = await 數(shù)據(jù)庫(kù)操作 if (result) { // 如果訂單支付成功 return ctx.body = { success: true } } ctx.status = 400 ctx.body = { success: false } } router.post('/api/check-bill', checkBill)
以上是“基于Koa2開發(fā)微信二維碼掃碼支付的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站題目:基于Koa2開發(fā)微信二維碼掃碼支付的示例分析-創(chuàng)新互聯(lián)
文章位置:http://m.rwnh.cn/article48/copiep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、外貿(mào)建站、品牌網(wǎng)站設(shè)計(jì)、關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計(jì)公司、云服務(wù)器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容