
收款神器!解讀聚合收款碼背后的原理
今天跟大家分享一下聚合收款碼的支付原理,這也是我這大半年來(lái)一直在做的項(xiàng)目。
微信/支付寶收款碼大家應(yīng)該不會(huì)陌生,線下小微商戶收款大多使用這個(gè),就比如下圖。
這種收款方式很方便,微信、支付寶后臺(tái)申請(qǐng)開(kāi)通,然后還可以免費(fèi)申請(qǐng)相關(guān)物料。不過(guò)這種方式用戶體驗(yàn)其實(shí)不是很好,之前有好幾次拿出支付寶,卻掃了微信支付碼。另外,這種個(gè)人的收款碼通常還有單日收款的上限,比如支付寶單日上限 500元。
有了需求,自然會(huì)有聰明人人想到解決方案,于是有了聚合收款碼產(chǎn)品解決方案,如下圖。
一個(gè)收款碼,支持多種客戶端,主流是微信、支付寶,現(xiàn)在常見(jiàn)還會(huì)支持銀聯(lián),QQ 等。用戶選擇任一支持的客戶端掃碼,都能完成支付,再也不用糾結(jié)掃錯(cuò)碼的尷尬。
有沒(méi)有很神奇?其實(shí)底層原理很簡(jiǎn)單,看完你就明白了,下面就讓小黑哥帶你解密聚合收款碼的底層原理。
微信相關(guān)支付方式
聚合收款碼底層支付其實(shí)還是離不開(kāi)微信、支付寶支持的支付方式,所以我們先從微信支付寶渠道出發(fā),簡(jiǎn)單介紹這個(gè)過(guò)程將會(huì)使用的支付方式。
上篇文章,我們以支付寶為例來(lái)介紹,這次我們就以微信支付為例。
打開(kāi)微信支付官網(wǎng),可以看到很多支付方式。
其中付款碼支付在前兩篇文章完整介紹過(guò),這里不再介紹。
首先我們介紹一下「微信Native支付」,引用微信官網(wǎng)的解釋:
?Native支付是商戶系統(tǒng)按微信支付協(xié)議生成支付二維碼,用戶再用微信“掃一掃”完成支付的模式。該模式適用于PC網(wǎng)站支付、實(shí)體店單品或訂單支付、媒體廣告支付等場(chǎng)景。?
簡(jiǎn)單來(lái)講就是商戶后臺(tái)調(diào)用微信支付接口,微信返回預(yù)支付交易的鏈接,格式如下:
weixin://wxpay/bizpayurl?sr=123456
然后商戶將其轉(zhuǎn)為二維碼,提供給客戶使用微信掃碼支付。
這種支付方式可以應(yīng)用在 PC 網(wǎng)站購(gòu)物場(chǎng)景,比如說(shuō)英雄聯(lián)盟官網(wǎng)購(gòu)買(mǎi)相關(guān)游戲道具:
既然「微信Native支付」最后可以變成二維碼完成支付,那么聚合收款碼是不是可以采用「微信Native支付」這種支付方式呢?
答案是可以,但是不適合,產(chǎn)品體驗(yàn)不太好。最好使用微信支付另外一種支付產(chǎn)品「JSAPI 支付」。至于原因,不要急,接下去看就會(huì)明白。
「JSAPI 支付」,又被稱為公眾號(hào)支付,名詞解釋引用一下官網(wǎng)介紹:
?JSAPI 支付是用戶在微信中打開(kāi)商戶的 H5 頁(yè)面,商戶在 H5 頁(yè)面通過(guò)調(diào)用微信支付提供的 JSAPI 接口調(diào)起微信支付模塊完成支付。?
具體業(yè)務(wù)流程如下:
日常生活中,很多應(yīng)用場(chǎng)景使用這種支付方式。這種支付方式相對(duì)于「微信Native支付」,比較麻煩,還需要使用微信公眾號(hào)登錄授權(quán)功能,以此獲取用戶的 openid。
另外當(dāng)我們調(diào)用「微信 JSAPI」 后臺(tái)接口,拿到微信返回的相關(guān)參數(shù)之后,我們還需要使用「微信的 JSSDK」,這樣才能喚起微信支付。
聚合收款碼核心原理
了解完聚合支付的所需要的底層支付方式,下面我們來(lái)了解一下聚合收款碼的核心原理。
聚合收款碼業(yè)務(wù)流程如下:
第一步用戶使用微信/支付寶 APP 掃碼之后,將會(huì)打開(kāi)一個(gè)收銀臺(tái)頁(yè)面。這個(gè)收銀臺(tái)頁(yè)面可以自適應(yīng),不同 APP 顯示不同的樣式,比如支付寶打開(kāi)收銀臺(tái)顯示支付寶的 logo,微信打開(kāi)就會(huì)顯示微信的 logo。
第二步用戶在收銀臺(tái)輸入金額,點(diǎn)擊支付之后將會(huì)喚起 APP 的支付彈窗。好了,觀察這個(gè)流程,我們可以發(fā)現(xiàn)掃碼之后,后臺(tái)應(yīng)用需要識(shí)別出當(dāng)前 APP 到底是微信還是支付寶。
那如何判斷當(dāng)前使用的 APP 呢?
其實(shí)這個(gè)原理很簡(jiǎn)單,在支付寶/微信打開(kāi)一個(gè)鏈接,實(shí)際將會(huì)使用內(nèi)置的瀏覽器發(fā)起了 HTTP 請(qǐng)求,而 HTTP 的請(qǐng)求頭將會(huì)攜帶 「User-Agent(UA)」,用來(lái)標(biāo)識(shí)用戶代理軟件的應(yīng)用類型、操作系統(tǒng)、軟件開(kāi)發(fā)商以及版本號(hào)。
微信/支付寶中瀏覽器發(fā)起 HTTP 請(qǐng)求,攜帶的 「User-Agent」 分別為:
支付寶
UCBrowser/11.5.0.939 UCBS/2.10.1.6 Mobile Safari/537.36 AliApp(AP/10.0.15.051805) AlipayClient/10.0.15.051805 Language/zh-Hans
微信
MQQBrowser/6.2 TBS 043220 Safari/537.36 MicroMessenger/6.5.8.1060 NetType/4G Language/zh_CN
這里需要注意了,不同型號(hào)的手機(jī),不同的版本 APP,「User-Agent」不一定會(huì)一樣,其實(shí)我們只需要判斷是否包含某些關(guān)鍵字即可,比如說(shuō)只要 「User-Agent」 包含「MicroMessenger」 就是微信,包含 「AlipayClient」就是支付寶。
下面使用 Java 代碼為例:
String userAgent = request.getHeader("user-agent");
if (Objects.equals(userAgent, "AlipayClient")) {
// 支付寶
} else if (Objects.equals(userAgent, "MicroMessenger")) {
// 微信
}
這個(gè)問(wèn)題解決之后,后面的流程就很簡(jiǎn)單了,只要調(diào)用微信/支付寶的 「JSAPI 支付」接口,拿到相關(guān)參數(shù)之后,喚起支付。
?準(zhǔn)確來(lái)講,支付寶那邊 JSAPI 支付官方名稱為支付寶生活號(hào)支付。?
這里解釋一下上面的問(wèn)題,為什么聚合收款碼不能使用「微信Native支付」呢?
主要是因?yàn)?strong style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important;">「微信Native支付」接口返回是一個(gè)微信自定義 schema 協(xié)議,只能通過(guò)微信掃碼打開(kāi),喚起支付。如何聚合收款碼使用「微信Native支付」,收銀臺(tái)提交金額之后,需要將微信返回交易鏈接轉(zhuǎn)成二維顯示在頁(yè)面,然后用戶使用微信內(nèi)置識(shí)別二維碼功能喚起支付。這樣一來(lái)比較影響產(chǎn)品體驗(yàn),降低支付的成功率。
支付寶也有類似「微信Native支付」支付接口「當(dāng)面付掃碼支付」,成功調(diào)用之后也會(huì)返回支付鏈接。
那這里可以提大家提個(gè)小問(wèn)題,聚合收款碼是否可以使用「支付寶當(dāng)面付掃碼支付」接口那?
答案是可以的,而且體驗(yàn)比「微信Native支付」好。這是因?yàn)橹Ц秾毞祷劓溄邮且粋€(gè)標(biāo)準(zhǔn) HTTP 連接,如下:
https://qr.alipay.com/xxxx
這個(gè)鏈接只要在支付寶內(nèi)中打開(kāi),就可以喚起支付。
所以如果聚合收款碼使用「支付寶當(dāng)面付掃碼支付」接口,收銀臺(tái)金額提交之后,當(dāng)拿到支付寶返回的支付鏈接,應(yīng)用程序內(nèi)只要使用 HTTP 302 跳轉(zhuǎn)到支付鏈接,就可以喚起支付寶支付。
?畫(huà)外音:之前我也一直以為支付寶跟微信一樣,不能使用。?
那這樣實(shí)際上聚合收款碼底層使用支付方式就有了兩種方案:
-
微信 JSAPI 支付/支付寶生活支付 -
微信 JSAPI 支付/支付寶面付掃碼支付
那如何選擇那?個(gè)人建議使用第一種方案,微信、支付寶都采用 JSAPI 支付。
主要是因?yàn)橹灰?302 跳轉(zhuǎn)喚起支付寶支付,就會(huì)關(guān)閉我們收銀臺(tái)頁(yè)面,這樣一來(lái)整個(gè)微信支付與支付寶支付流程就不太一樣了。
其次,當(dāng)用戶支付成功之后,JSAPI 支付還可以跳轉(zhuǎn)到一個(gè)成功頁(yè)面,這個(gè)頁(yè)面我們可以支付結(jié)果展示,或者騷一點(diǎn),還可以掛些廣告,或者引流其他公號(hào)上。
但是如果使用付寶面付掃碼支付,支付完成之后,頁(yè)面就被關(guān)閉了,就沒(méi)辦法完成支付頁(yè)面跳轉(zhuǎn)。
聚合收款碼核心流程
介紹完原理,下面主要介紹一下市面上主流聚合收款碼業(yè)務(wù)流程,其實(shí)聚合收款碼可以分為三類:
-
靜態(tài)聚合收款碼 -
動(dòng)態(tài)聚合收款碼 -
銀聯(lián)靜態(tài)二維碼
靜態(tài)聚合收款碼就類似如下這種,需要用戶主動(dòng)輸入金額,可以無(wú)限次使用。
而動(dòng)態(tài)聚合收款碼是只能使用一次,并且由商家指定金額,用戶只要掃碼就可以支付指定金額。
這種應(yīng)用場(chǎng)景比如 B 站購(gòu)買(mǎi)大會(huì)員:
銀聯(lián)靜態(tài)二維碼其實(shí)功能上與靜態(tài)聚合收款碼差不多,但是它多了支持銀聯(lián)支付的功能。除了這個(gè)以外,最主要的區(qū)別是銀聯(lián)靜態(tài)二維碼是銀聯(lián)發(fā)碼,背后對(duì)應(yīng)的地址是銀聯(lián)的地址,類似如下:
https://qr.95516.com/00010000/xxx
靜態(tài)聚合收款碼流程
靜態(tài)聚合收款碼主要支付流程主要可以分為二步,第一步為登錄授權(quán)。
這里的登陸授權(quán)一般使用微信、支付寶匿名登錄授權(quán)功能,這樣這個(gè)過(guò)程普通用戶其實(shí)是無(wú)感知的。
?畫(huà)外音:如果是程序員的話,可能會(huì)感受到這個(gè)過(guò)程經(jīng)過(guò)了多次跳轉(zhuǎn)。?
第二步,用戶在收銀臺(tái)輸入金額之后,應(yīng)用內(nèi)部將會(huì)創(chuàng)建相應(yīng)的訂單,然后再調(diào)用微信/支付寶的 JSAPI 支付。
另外,如果支付寶采用面付掃碼支付這種支付方式的話,那么其實(shí)不需要第一步登錄授權(quán)了,可以直接跳到收銀臺(tái)發(fā)起支付。
動(dòng)態(tài)聚合收款碼流程
動(dòng)態(tài)聚合收款碼其實(shí)與靜態(tài)收款碼總體比較類似,只不過(guò)創(chuàng)建動(dòng)態(tài)碼內(nèi)部已經(jīng)創(chuàng)建了相應(yīng)的訂單,后續(xù)流程與靜態(tài)聚合收款碼差不多。
銀聯(lián)靜態(tài)二維碼流程
如果你使用微信、支付寶掃碼打開(kāi)銀聯(lián)二維碼,將會(huì)打開(kāi)我們自己收銀臺(tái)頁(yè)面,后續(xù)流程其實(shí)跟靜態(tài)聚合收款碼一模一樣的。
但是如果你使用支付銀聯(lián)支付的 APP 掃碼,比如說(shuō)各大銀行的手機(jī) APP,美團(tuán),京東等,就會(huì)在這些 APP 內(nèi)各自支付頁(yè)面,然后完成支付。
我們銀聯(lián)二維碼的功能,將會(huì)在銀聯(lián)后臺(tái)報(bào)備一個(gè)跳轉(zhuǎn)地址,比如說(shuō)
https://www.heihei.com
當(dāng)用戶使用微信/支付寶訪問(wèn)銀聯(lián)二維碼,銀聯(lián)后臺(tái)自己識(shí)別訪問(wèn)請(qǐng)求 「User-Agent」 ,然后后臺(tái)根據(jù)規(guī)則拼接重定向地址。拼接規(guī)則如下:
https://www.heihei.comqrCode=URLENCODE(https://qr.95516.com/00010000/xxx)
總結(jié)
聚合收款碼統(tǒng)一了用戶支付流程,提高商家的收款效率。另外聚合收款碼其實(shí)還可以跟商家后臺(tái)一些 ERP 等軟件打通,這樣還提高的商家生產(chǎn)效率。
不得不說(shuō),第一個(gè)設(shè)計(jì)出聚合收款碼的的產(chǎn)品,真實(shí)個(gè)鬼才~
聚合收款碼,背后原理一點(diǎn)也不難,根據(jù)用訪問(wèn)請(qǐng)求的 「User-Agent」 ,以此判斷用戶當(dāng)前掃碼使用的客戶端類型。
然后調(diào)用微信/支付寶匿名登錄獲取用戶 id,最后用戶輸入金額之后,調(diào)用微信/支付寶完成支付。
好了,今天文章介紹到這里。
相關(guān)資料:
3、https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
作者 | 樓下小黑哥
來(lái)源 | 程序通事(ID:US_stocks)
頭圖 | CSDN 下載自視覺(jué)中國(guó)