編輯導語：在支付環節中，不可缺少的就是支付環節，比如我們在某個電商平臺進行購物時，在最后結賬時就會使用收銀的服務；在產品設計中，收銀臺的前端設計也是比較簡單的一個部分；本文作者分享了關于收銀臺的前端設計以及收銀臺在電子支付里的位置，我們一起來了解一下。

收銀臺應該是支付環節最好設計的一塊，因為每天都在用，所以感知會非常明顯，收銀臺的前端服務端其實都不難，今天我們重點介紹收銀臺的前端設計辦法以及收銀臺在整個電子支付框架中的位置，起到的作用。

01 什么是收銀臺

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

1. 收銀臺發展史

最早的收銀臺：

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

近代收銀臺：

近代在電子支付出現之前，我們去超市購買商品，挑好貨品后拿到結賬處進行清點，工作人員告訴你“一共10斤糧票” ，你掏出紙質的票子完成了付款，商品就是你的了；這時候的工作人員叫收銀員，他面前的臺子就是收銀臺了；這時候的收銀臺就是商品和現金的交換場所；交易就是價值交換。

現代線上支付收銀臺：

到了現代電子支付出現了，出現了新的貨幣形式“虛擬貨幣”，那么我們為虛擬貨幣提供了線上的支付場所“電子收銀臺”，一個可以在線上通過互聯網技術完成貨幣轉移的技術形態。

在線收銀臺類型：

• PC收銀臺：在電腦上完成支付的收銀臺；
• H5收銀臺：手機內的H5網頁上完成支付的收銀臺；
• API收銀臺：提供給商戶商戶自己進行包裝成自己收銀臺的收銀臺底層接口；
• 硬件收銀臺：pos機，mpos機等硬件設備，支付卡牌。

02 從支付架構看收銀臺

電子支付收單架構——收銀臺位置。

• 商戶側的收銀臺分：前臺/后臺，前臺面向用戶，后臺面向渠道；
• 支付公司的收銀臺：前臺對應商戶或者直接面對用戶，后臺面向渠道；
• 收銀臺前臺：面向用戶的可視化收銀臺頁面主要是提供給用戶完成支付方式選擇和支付請求的發起；
• 收銀臺后臺：主要是調用后端獲取支付參數和支付通道，請求通道發起支付請求。

我總結的一個支付體系架構模型：一點+三線。

一點：收銀臺，也是支付的起點；

三線：

• 內線“訂單- 賬單-清結算-賬務賬戶”。
• 外線“路由-風控-支付核心-渠道清算-通道方”
• 連接線“內線和外線的支付信息交互線”

把握好“一點”的設計和“三條線”的設計，就可以搭建起一個完整的支付體系；該設計方法不僅適用于一家三方支付機構，同樣適用于一家普通的交易平臺，四方聚合支付；只不過支付通道的不同，三方接入的是銀行通道，普通商家和四方聚合公司接入的是三方通道。

本文主要介紹在線手機移動端收銀臺的設計,其他類型的收銀臺類似不做介紹，其他環節的設計后面文章會單獨介紹。

03 收銀臺設計之前準備

做設計收銀臺之前要先做好這幾個準備：

了解公司業務模型：

知道業務是怎么樣的，售賣的是什么商品，是電商，游戲，課程售賣，會員充值等等，其實就是賣什么，怎么賣的問題；我們假設是電商平臺，賣的是實物商品。

選擇支付方式：

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

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

簽約支付通道：

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

確定收銀臺的支撐系統：

收銀臺要想能完成支付至少需要哪些系統，就像剛才說的模型需要內線的訂單賬單，賬務；外線就需要收銀臺后臺，路由風控（非必須），支付處理，渠道管理，這個一會會具體介紹。

我們先看不同的支付產品所需要的收銀臺有什么不同，對于很多支付場景流程有些差別，其實自己應用的收銀臺是一樣的，不同的支付場景和支付方式在去支付時流程會有差別；我們就以支付應用內調起支付，商戶APP內調起支付應用，瀏覽器內調起支付應用，我們重點以微信支付這三種支付場景為例。

微信支付產品：

1. JSAPI支付

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

應用場景：

JSAPI支付適用于線下場所、公眾號場景和PC網站場景。

商戶已有H5商城網站，用戶通過消息或掃描二維碼在微信內打開網頁時，可以調用微信支付完成下單購買的流程。具體操作流程如下：

步驟一如圖2.1，商戶下發圖文消息或者通過自定義菜單吸引用戶點擊進入商戶網頁。

步驟二如圖2.2，進入商戶網頁，用戶選擇購買，完成選購流程。

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

步驟四如圖2.4，密碼驗證通過，支付成功。商戶后臺得到支付成功的通知。

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

步驟六如圖2.6，微信支付公眾號下發支付憑證。

步驟七如圖2.3，商戶公眾號下發消息，提示發貨成功。該步驟可選。

我們看下支付接口列表：

2. APP支付

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

應用場景：

APP支付適用于在移動端APP中集成微信支付功能的場景。商戶APP調用微信提供的SDK調用微信支付模塊，商戶APP會跳轉到微信中完成支付，支付完后跳回到商戶APP內，最后展示支付結果。

具體操作流程如下：

步驟一用戶進入商戶APP，選擇商品下單、確認購買，進入支付環節。商戶服務后臺生成支付訂單，簽名后將數據傳輸到APP端。以微信提供的DEMO為例，見圖1.1。

步驟二用戶點擊后發起支付操作，進入到微信界面，調起微信支付，出現確認支付界面，見圖1.2。

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

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

步驟五回跳到商戶APP中，商戶APP根據支付結果個性化展示訂單處理結果。見圖1.5。

我們看下支付接口列表：

3. H5支付

H5支付是指商戶在微信客戶端外的移動端網頁展示商品或服務，用戶在前述頁面確認使用微信支付時，商戶發起本服務呼起微信客戶端進行支付。

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

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

應用場景：

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

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

步驟一用戶從非微信瀏覽器的站點導航進入商戶H5網頁，用戶挑選需購買商品，選擇微信支付發起購買流程。

步驟二進入微信客戶端確認交易，輸入支付密碼。

步驟三支付成功，用戶收到支付憑證，同時商戶后臺收到支付成功的通知。

我們看下支付接口列表：

支付寶支付產品：略 同微信。

易寶支付支付產品：略 同微信。

平臺賬戶余額支付：

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

簽約三方支付或者銀行錢包：這個按照接入文檔設計即可。

04 支付流程

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

核心主流程：

• 去結算：購物車去結算到達訂單填寫；
• 提交訂單：訂單填寫頁提交訂單到達收銀臺；
• 去支付：收銀臺選擇支付方式后點擊去支付進入支付流程；
• 支付結果：支付完成后到達支付結果頁；
• 后續流程：支付結果頁引導用戶到達制定位置，比如查看訂單，繼續購物等。

支付流程-快捷支付：

支付流程-掃碼支付：

05 收銀臺的前端設計

現在基于上面的介紹我們設計一下收銀臺頁面：

收銀臺的關鍵信息：

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

京東收銀臺頁面

收銀臺的關鍵流程：

• 提交訂單到達收銀臺頁面；
• 去支付進入支付流程，當前應用或者跳轉到支付應用；
• 支付成功或失敗的支付結果落地頁；
• 支付落地頁的后續流程，返回什么地方；
• 結束。

收銀臺的拓展：

收銀臺隨著業務的變化在不斷發生變化，在更多的端上建設收銀臺，收銀臺支持更多的支付方式。

收銀臺類型的拓展：PC收銀臺，H5收銀臺，app收銀臺等。

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

銀行卡快捷支付：

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

收銀臺的余額支付：

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

支付logo：就是展示給用戶的icon圖標。

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

06 收銀臺的后端設施

收銀臺后端還需要一些基礎設施，該模塊不做過多介紹，后面的文章中會單獨介紹。

支付標識：知道錢收到那個賬戶

為支付體系設計一個支付標識或者編碼，知道在收銀臺請求時錢應該通過那個通道收到那個收款賬戶中。

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

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

收銀臺查詢后臺：查看支付記錄

需要一個后臺管理，可以查看收銀臺的支付請求記錄以及支付狀態。

作者：陳曉光，一個會彈吉他會算命的產品經理老司機，微信公眾號：陳天宇宙

本文由 @陳天宇宙 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議