編輯導(dǎo)語：在支付環(huán)節(jié)中，不可缺少的就是支付環(huán)節(jié)，比如我們在某個(gè)電商平臺(tái)進(jìn)行購物時(shí)，在最后結(jié)賬時(shí)就會(huì)使用收銀的服務(wù)；在產(chǎn)品設(shè)計(jì)中，收銀臺(tái)的前端設(shè)計(jì)也是比較簡單的一個(gè)部分；本文作者分享了關(guān)于收銀臺(tái)的前端設(shè)計(jì)以及收銀臺(tái)在電子支付里的位置，我們一起來了解一下。

收銀臺(tái)應(yīng)該是支付環(huán)節(jié)最好設(shè)計(jì)的一塊，因?yàn)槊刻於荚谟?，所以感知?huì)非常明顯，收銀臺(tái)的前端服務(wù)端其實(shí)都不難，今天我們重點(diǎn)介紹收銀臺(tái)的前端設(shè)計(jì)辦法以及收銀臺(tái)在整個(gè)電子支付框架中的位置，起到的作用。

01 什么是收銀臺(tái)

什么是收銀臺(tái)呢，從字面意思“收銀臺(tái)=收+銀+臺(tái)”，顧名思義就是收取銀子的臺(tái)子。

1. 收銀臺(tái)發(fā)展史

最早的收銀臺(tái)：

在古代你去飯館吃飯喝酒吃肉，酒足飯飽后到柜臺(tái)掏出50兩的大元寶拍在了“收銀臺(tái)”上，老板結(jié)賬，不用找了；所以在古代收銀臺(tái)就是那個(gè)柜臺(tái)，柜臺(tái)的特點(diǎn)就是結(jié)賬的場所，你把錢放上去，交易就完成了。

近代收銀臺(tái)：

近代在電子支付出現(xiàn)之前，我們?nèi)コ匈徺I商品，挑好貨品后拿到結(jié)賬處進(jìn)行清點(diǎn)，工作人員告訴你“一共10斤糧票” ，你掏出紙質(zhì)的票子完成了付款，商品就是你的了；這時(shí)候的工作人員叫收銀員，他面前的臺(tái)子就是收銀臺(tái)了；這時(shí)候的收銀臺(tái)就是商品和現(xiàn)金的交換場所；交易就是價(jià)值交換。

現(xiàn)代線上支付收銀臺(tái)：

到了現(xiàn)代電子支付出現(xiàn)了，出現(xiàn)了新的貨幣形式“虛擬貨幣”，那么我們?yōu)樘摂M貨幣提供了線上的支付場所“電子收銀臺(tái)”，一個(gè)可以在線上通過互聯(lián)網(wǎng)技術(shù)完成貨幣轉(zhuǎn)移的技術(shù)形態(tài)。

在線收銀臺(tái)類型：

• PC收銀臺(tái)：在電腦上完成支付的收銀臺(tái)；
• H5收銀臺(tái)：手機(jī)內(nèi)的H5網(wǎng)頁上完成支付的收銀臺(tái)；
• API收銀臺(tái)：提供給商戶商戶自己進(jìn)行包裝成自己收銀臺(tái)的收銀臺(tái)底層接口；
• 硬件收銀臺(tái)：pos機(jī)，mpos機(jī)等硬件設(shè)備，支付卡牌。

02 從支付架構(gòu)看收銀臺(tái)

電子支付收單架構(gòu)——收銀臺(tái)位置。

• 商戶側(cè)的收銀臺(tái)分：前臺(tái)/后臺(tái)，前臺(tái)面向用戶，后臺(tái)面向渠道；
• 支付公司的收銀臺(tái)：前臺(tái)對應(yīng)商戶或者直接面對用戶，后臺(tái)面向渠道；
• 收銀臺(tái)前臺(tái)：面向用戶的可視化收銀臺(tái)頁面主要是提供給用戶完成支付方式選擇和支付請求的發(fā)起；
• 收銀臺(tái)后臺(tái)：主要是調(diào)用后端獲取支付參數(shù)和支付通道，請求通道發(fā)起支付請求。

我總結(jié)的一個(gè)支付體系架構(gòu)模型：一點(diǎn)+三線。

一點(diǎn)：收銀臺(tái)，也是支付的起點(diǎn)；

三線：

• 內(nèi)線“訂單- 賬單-清結(jié)算-賬務(wù)賬戶”。
• 外線“路由-風(fēng)控-支付核心-渠道清算-通道方”
• 連接線“內(nèi)線和外線的支付信息交互線”

把握好“一點(diǎn)”的設(shè)計(jì)和“三條線”的設(shè)計(jì)，就可以搭建起一個(gè)完整的支付體系；該設(shè)計(jì)方法不僅適用于一家三方支付機(jī)構(gòu)，同樣適用于一家普通的交易平臺(tái)，四方聚合支付；只不過支付通道的不同，三方接入的是銀行通道，普通商家和四方聚合公司接入的是三方通道。

本文主要介紹在線手機(jī)移動(dòng)端收銀臺(tái)的設(shè)計(jì),其他類型的收銀臺(tái)類似不做介紹，其他環(huán)節(jié)的設(shè)計(jì)后面文章會(huì)單獨(dú)介紹。

03 收銀臺(tái)設(shè)計(jì)之前準(zhǔn)備

做設(shè)計(jì)收銀臺(tái)之前要先做好這幾個(gè)準(zhǔn)備：

了解公司業(yè)務(wù)模型：

知道業(yè)務(wù)是怎么樣的，售賣的是什么商品，是電商，游戲，課程售賣，會(huì)員充值等等，其實(shí)就是賣什么，怎么賣的問題；我們假設(shè)是電商平臺(tái)，賣的是實(shí)物商品。

選擇支付方式：

想好計(jì)劃為用戶提供什么可用的支付方式，比如微信支付，支付寶支付，銀行卡快捷支付，賬戶余額支付？一般微信支付寶就夠了，難免有用戶想直接綁定信用卡去支付，雖然通過微信支付寶也可以使用信用卡支付；這個(gè)看平臺(tái)選擇，如果有能力盡可能給用戶更多的選擇，覆蓋更多的用戶群體需求。

我們假設(shè)選定了：微信支付，銀行卡快捷支付，賬戶余額支付（不考慮合規(guī)性的自建錢包，簽約合規(guī)性的三方或者銀行錢包）。

簽約支付通道：

簽約了支付產(chǎn)品，基本就知道該如何去設(shè)計(jì)收銀臺(tái)了；如上假設(shè)我們簽約了微信支付，易寶支付快捷支付，自建錢包；那么我們就拿到了微信的文檔，易寶支付的文檔，錢包賬戶自己來設(shè)計(jì)；拿到文檔后我們就知道了支付需要的參數(shù)了，基本就能確定我們請求通道時(shí)需要哪些參數(shù)，哪些參數(shù)是用戶提供的，哪些參數(shù)需要后臺(tái)整理封裝。

確定收銀臺(tái)的支撐系統(tǒng)：

收銀臺(tái)要想能完成支付至少需要哪些系統(tǒng)，就像剛才說的模型需要內(nèi)線的訂單賬單，賬務(wù)；外線就需要收銀臺(tái)后臺(tái)，路由風(fēng)控（非必須），支付處理，渠道管理，這個(gè)一會(huì)會(huì)具體介紹。

我們先看不同的支付產(chǎn)品所需要的收銀臺(tái)有什么不同，對于很多支付場景流程有些差別，其實(shí)自己應(yīng)用的收銀臺(tái)是一樣的，不同的支付場景和支付方式在去支付時(shí)流程會(huì)有差別；我們就以支付應(yīng)用內(nèi)調(diào)起支付，商戶APP內(nèi)調(diào)起支付應(yīng)用，瀏覽器內(nèi)調(diào)起支付應(yīng)用，我們重點(diǎn)以微信支付這三種支付場景為例。

微信支付產(chǎn)品：

1. JSAPI支付

JSAPI支付是指商戶通過調(diào)用微信支付提供的JSAPI接口，在支付場景中調(diào)起微信支付模塊完成收款。

應(yīng)用場景：

JSAPI支付適用于線下場所、公眾號(hào)場景和PC網(wǎng)站場景。

商戶已有H5商城網(wǎng)站，用戶通過消息或掃描二維碼在微信內(nèi)打開網(wǎng)頁時(shí)，可以調(diào)用微信支付完成下單購買的流程。具體操作流程如下：

步驟一如圖2.1，商戶下發(fā)圖文消息或者通過自定義菜單吸引用戶點(diǎn)擊進(jìn)入商戶網(wǎng)頁。

步驟二如圖2.2，進(jìn)入商戶網(wǎng)頁，用戶選擇購買，完成選購流程。

步驟三如圖2.3，調(diào)起微信支付控件，用戶開始輸入支付密碼。

步驟四如圖2.4，密碼驗(yàn)證通過，支付成功。商戶后臺(tái)得到支付成功的通知。

步驟五如圖2.5，返回商戶頁面，顯示購買成功。該頁面由商戶自定義。

步驟六如圖2.6，微信支付公眾號(hào)下發(fā)支付憑證。

步驟七如圖2.3，商戶公眾號(hào)下發(fā)消息，提示發(fā)貨成功。該步驟可選。

我們看下支付接口列表：

2. APP支付

APP支付是指商戶通過在移動(dòng)端應(yīng)用APP中集成開放SDK調(diào)起微信支付模塊來完成支付。目前微信支付支持手機(jī)系統(tǒng)有：IOS（蘋果）、Android（安卓）和WP（Windows Phone）。

應(yīng)用場景：

APP支付適用于在移動(dòng)端APP中集成微信支付功能的場景。商戶APP調(diào)用微信提供的SDK調(diào)用微信支付模塊，商戶APP會(huì)跳轉(zhuǎn)到微信中完成支付，支付完后跳回到商戶APP內(nèi)，最后展示支付結(jié)果。

具體操作流程如下：

步驟一用戶進(jìn)入商戶APP，選擇商品下單、確認(rèn)購買，進(jìn)入支付環(huán)節(jié)。商戶服務(wù)后臺(tái)生成支付訂單，簽名后將數(shù)據(jù)傳輸?shù)紸PP端。以微信提供的DEMO為例，見圖1.1。

步驟二用戶點(diǎn)擊后發(fā)起支付操作，進(jìn)入到微信界面，調(diào)起微信支付，出現(xiàn)確認(rèn)支付界面，見圖1.2。

步驟三用戶確認(rèn)收款方和金額，點(diǎn)擊立即支付后出現(xiàn)輸入密碼界面，可選擇零錢或銀行卡支付見圖1.3

步驟四輸入正確密碼后，支付完成，用戶端微信出現(xiàn)支付詳情頁面。見圖1.4。

步驟五回跳到商戶APP中，商戶APP根據(jù)支付結(jié)果個(gè)性化展示訂單處理結(jié)果。見圖1.5。

我們看下支付接口列表：

3. H5支付

H5支付是指商戶在微信客戶端外的移動(dòng)端網(wǎng)頁展示商品或服務(wù)，用戶在前述頁面確認(rèn)使用微信支付時(shí)，商戶發(fā)起本服務(wù)呼起微信客戶端進(jìn)行支付。

說明：要求商戶已有H5商城網(wǎng)站，并且已經(jīng)過ICP備案，即可申請接入。

提醒：H5支付不建議在APP端使用，如需要在APP中使用微信支付，請接APP支付。

應(yīng)用場景：

H5支付主要用于觸屏版的手機(jī)瀏覽器請求微信支付的場景，方便從外部瀏覽器喚起微信支付。

用戶側(cè)使用H5支付具體操作流程如下：

步驟一用戶從非微信瀏覽器的站點(diǎn)導(dǎo)航進(jìn)入商戶H5網(wǎng)頁，用戶挑選需購買商品，選擇微信支付發(fā)起購買流程。

步驟二進(jìn)入微信客戶端確認(rèn)交易，輸入支付密碼。

步驟三支付成功，用戶收到支付憑證，同時(shí)商戶后臺(tái)收到支付成功的通知。

我們看下支付接口列表：

支付寶支付產(chǎn)品：略 同微信。

易寶支付支付產(chǎn)品：略 同微信。

平臺(tái)賬戶余額支付：

自建賬戶：這個(gè)需要賬戶中心包裝出一個(gè)虛擬的支付渠道，用戶收銀臺(tái)請求賬戶余額扣除，賬戶告知收銀臺(tái)扣除成功；并且可以正向逆向交易。

簽約三方支付或者銀行錢包：這個(gè)按照接入文檔設(shè)計(jì)即可。

04 支付流程

支付的業(yè)務(wù)流程一，個(gè)是主流程，另一個(gè)就是每個(gè)支付類型的業(yè)務(wù)流程，比如支付流程，退款流程，我們分別介紹。

核心主流程：

• 去結(jié)算：購物車去結(jié)算到達(dá)訂單填寫；
• 提交訂單：訂單填寫頁提交訂單到達(dá)收銀臺(tái)；
• 去支付：收銀臺(tái)選擇支付方式后點(diǎn)擊去支付進(jìn)入支付流程；
• 支付結(jié)果：支付完成后到達(dá)支付結(jié)果頁；
• 后續(xù)流程：支付結(jié)果頁引導(dǎo)用戶到達(dá)制定位置，比如查看訂單，繼續(xù)購物等。

支付流程-快捷支付：

支付流程-掃碼支付：

05 收銀臺(tái)的前端設(shè)計(jì)

現(xiàn)在基于上面的介紹我們設(shè)計(jì)一下收銀臺(tái)頁面：

收銀臺(tái)的關(guān)鍵信息：

• 商品信息（非必須展示）：用戶買的什么；
• 收款方 （非必須展示） ：錢付給誰；
• 支付有效時(shí)間：在規(guī)定時(shí)間內(nèi)支付；
• 支付方式選擇：選擇用什么方式支付；
• 支付金額 ：付多少錢；
• 支付操作：確認(rèn)支付的按鈕。

京東收銀臺(tái)頁面

收銀臺(tái)的關(guān)鍵流程：

• 提交訂單到達(dá)收銀臺(tái)頁面；
• 去支付進(jìn)入支付流程，當(dāng)前應(yīng)用或者跳轉(zhuǎn)到支付應(yīng)用；
• 支付成功或失敗的支付結(jié)果落地頁；
• 支付落地頁的后續(xù)流程，返回什么地方；
• 結(jié)束。

收銀臺(tái)的拓展：

收銀臺(tái)隨著業(yè)務(wù)的變化在不斷發(fā)生變化，在更多的端上建設(shè)收銀臺(tái)，收銀臺(tái)支持更多的支付方式。

收銀臺(tái)類型的拓展：PC收銀臺(tái)，H5收銀臺(tái)，app收銀臺(tái)等。

支付方式的拓展：微信支付，綁卡支付，余額支付，數(shù)字人民幣支付，線下支付等。

銀行卡快捷支付：

銀行卡快捷支付可以選擇已經(jīng)綁定的卡，也可以添加新卡；新卡的額綁定一般按照綁卡鑒權(quán)的要求既可以設(shè)計(jì)出需要的要素，借記卡和貸記卡的要素是不一樣的；個(gè)人戶和對公戶也是不一樣的；隨著電子支付的發(fā)展，方式也會(huì)變化，跟著接入方的要求走即可，這里就不過多介紹了，大家知道即可。

收銀臺(tái)的余額支付：

既然是自己包裝或者接入的錢包余額，那么這一個(gè)就算一個(gè)新的支付方式，一個(gè)新的支付方式需要關(guān)注幾個(gè)要素。

支付logo：就是展示給用戶的icon圖標(biāo)。

支付方式名稱：起個(gè)名字，比如抖音支付，余額支付，錢包支付等。

06 收銀臺(tái)的后端設(shè)施

收銀臺(tái)后端還需要一些基礎(chǔ)設(shè)施，該模塊不做過多介紹，后面的文章中會(huì)單獨(dú)介紹。

支付標(biāo)識(shí)：知道錢收到那個(gè)賬戶

為支付體系設(shè)計(jì)一個(gè)支付標(biāo)識(shí)或者編碼，知道在收銀臺(tái)請求時(shí)錢應(yīng)該通過那個(gè)通道收到那個(gè)收款賬戶中。

路由配置：篩選出一條通道

在不同端，不同業(yè)務(wù)和商品，不同的用戶，可以使用什么支付方式，比如北京用戶不提供余額支付的支付方式。

收銀臺(tái)查詢后臺(tái)：查看支付記錄

需要一個(gè)后臺(tái)管理，可以查看收銀臺(tái)的支付請求記錄以及支付狀態(tài)。

作者：陳曉光，一個(gè)會(huì)彈吉他會(huì)算命的產(chǎn)品經(jīng)理老司機(jī)，微信公眾號(hào)：陳天宇宙

本文由 @陳天宇宙 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議