微信支付和支付寶等移動(dòng)支付巨頭通過長(zhǎng)期的市場(chǎng)教育，已經(jīng)為收銀臺(tái)的交互設(shè)立了事實(shí)上的行業(yè)標(biāo)準(zhǔn)。本文深入剖析了收銀臺(tái)設(shè)計(jì)的“四段式”流程和“轉(zhuǎn)圈圈”交互體驗(yàn)，揭示了在實(shí)現(xiàn)一個(gè)高效、穩(wěn)定且用戶友好的收銀臺(tái)過程中所需考慮的關(guān)鍵要素和設(shè)計(jì)原則。

支付不就是個(gè)收銀臺(tái)嘛？你一個(gè)頁面怎么要干這么久？這可能是每個(gè)做支付的人遇到過得尷尬問題。其實(shí)這是微信、支付寶的收銀臺(tái)支付體驗(yàn)做的太好了，給普通人產(chǎn)生的錯(cuò)覺，以為收銀臺(tái)就是幾張頁面。當(dāng)你被“野生收銀臺(tái)”制的服服帖帖的時(shí)候，你才會(huì)發(fā)現(xiàn)收銀臺(tái)有大講究。

這次不廢話，沒有場(chǎng)景和需求背景，直接講原理上設(shè)計(jì)。

一、四段式和轉(zhuǎn)圈圈

隨著移動(dòng)支付的推廣，以及微信/支付寶的長(zhǎng)期的市場(chǎng)教育，他們的收銀臺(tái)交互已經(jīng)成為事實(shí)上的行業(yè)標(biāo)準(zhǔn)。只要掌握這個(gè)標(biāo)準(zhǔn)流程，做個(gè)收銀臺(tái)你就不會(huì)被繞暈了。

總結(jié)下來就是“四段式”和“轉(zhuǎn)圈圈”。

圖1：收銀臺(tái)四段式和轉(zhuǎn)圈圈

1. 四段式

收銀臺(tái)的支付過程被切分成非常原子化的四個(gè)階段，主要分為“下單、跳轉(zhuǎn)收銀臺(tái)、后臺(tái)回調(diào)、返回結(jié)果頁”，其中跳轉(zhuǎn)收銀臺(tái)這個(gè)階段合理利用可以進(jìn)行聚合包裝，而不合理包裝最容易在“返回結(jié)果頁”這個(gè)階段出現(xiàn)“掉鏈子”的情況。（即無法跳轉(zhuǎn)回下單頁面，需要用戶手工切回）。

2. 轉(zhuǎn)圈圈

并且這四次交互需要參數(shù)銜接的非常緊密，因此一般會(huì)在“調(diào)用收銀臺(tái)”和“返回結(jié)果頁”之間增加一個(gè)本地收銀臺(tái)作為過渡頁，一方面是為了擴(kuò)展本地的快捷、余額等支付方式；另一方面是為了更好銜接這三個(gè)步驟，即我們平時(shí)看到的加載頁面“轉(zhuǎn)圈圈”。（詳細(xì)的我在第四節(jié)介紹）

3. 收銀臺(tái)參數(shù)串聯(lián)

收銀臺(tái)能夠有效的銜接首先需要了解清楚不同支付產(chǎn)品的渠道側(cè)參數(shù)，這些參數(shù)決定了收銀臺(tái)銜接是否順暢。我們以微信支付為例來看下數(shù)據(jù)的串聯(lián)（支付寶也是類似，其他收銀臺(tái)均參考這個(gè)標(biāo)準(zhǔn)設(shè)計(jì)的）。

圖2：收銀臺(tái)參數(shù)串聯(lián)（微信為例）

收銀臺(tái)關(guān)鍵參數(shù)分為配置申請(qǐng)和支付過程兩類數(shù)據(jù)。

• 配置申請(qǐng)：在申請(qǐng)收銀臺(tái)之前就要有一些預(yù)設(shè)參數(shù)作為保障，這里包括了“申請(qǐng)參數(shù)、安全加密、應(yīng)用配置”，前面兩項(xiàng)都是基礎(chǔ)參數(shù)，應(yīng)用配置則會(huì)直接影響收銀臺(tái)對(duì)接和體驗(yàn)的。
• 支付對(duì)接：支付對(duì)接分為四個(gè)過程，每種支付產(chǎn)品返回方式各有不同，下面我們結(jié)合四段交互來介紹。

（1）支付下單

圖3：下單接口串聯(lián)

圖4：下單關(guān)鍵參數(shù)說明

用戶進(jìn)入收銀臺(tái)選擇支付方式提交后，就會(huì)創(chuàng)建一筆預(yù)支付訂單，這筆訂單是為了讓用戶跳轉(zhuǎn)收銀臺(tái)后讓其按照下單的金額進(jìn)行支付。

同時(shí)下單過程也會(huì)把訂單信息，商戶號(hào)、回調(diào)URL同步傳給渠道。渠道會(huì)根據(jù)請(qǐng)求返回收銀臺(tái)地址或者預(yù)支付id（prepay_id），商戶側(cè)可以根據(jù)這些參數(shù)來調(diào)用收銀臺(tái)。下單完成后本地交易訂單的狀態(tài)為“初始”表示未進(jìn)行支付。

（2）調(diào)用收銀臺(tái)

圖5：幾種調(diào)用收銀臺(tái)方式

根據(jù)下單返回的參數(shù)，商戶則會(huì)調(diào)用收銀臺(tái)讓用戶跳轉(zhuǎn)到渠道側(cè)進(jìn)行支付，并將訂單置為“待支付”表示用戶正在進(jìn)行支付。

調(diào)用收銀臺(tái)是非常重要的聚合支付的切入點(diǎn)，通過調(diào)用不同的收銀臺(tái)可以把很多的支付方式聚合在一起。當(dāng)然這種包裝方式如果沒有按照渠道的規(guī)范處理，很容易出現(xiàn)結(jié)果頁無法返回的問題。

（3）后臺(tái)回調(diào)

用戶支付完成后會(huì)把支付結(jié)果以回調(diào)的方式通知到商戶的支付系統(tǒng)?；卣{(diào)參數(shù)是個(gè)標(biāo)準(zhǔn)處理方式，通過下單時(shí)上傳notify_url來統(tǒng)一處理。

回調(diào)通知到商戶后臺(tái)，交易系統(tǒng)記錄支付結(jié)果為“支付成功”，此時(shí)支付結(jié)果只有商戶后臺(tái)知道，用戶還停留在渠道頁面呢，所以還需要讓用戶跳回原交易頁面。

（4）返回結(jié)果頁

圖6：調(diào)用和返回的方式

用戶支付完后就要跳轉(zhuǎn)到原有的支付頁面，并且查看支付結(jié)果。這里的返回方式是與調(diào)用的方式相匹配的。

• 預(yù)設(shè)地址：公眾號(hào)、小程序、h5是要在渠道的后臺(tái)預(yù)先配置返回的地址，地址要接受渠道方審核；
• app內(nèi)返回：native屬于動(dòng)態(tài)訂單碼，用戶掃碼后在掃碼的錢包app內(nèi)返回（例如微信、支付寶的app）；
• Sdk返回：app應(yīng)用需要集成渠道側(cè)提供的sdk來返回；
• 付款碼：屬于用戶主動(dòng)展碼支付，直接在手機(jī)端返回結(jié)果頁。支付結(jié)果頁的返回直接決定了支付流程的閉環(huán)和用戶體驗(yàn)的良好，所以收銀臺(tái)調(diào)用方式錯(cuò)配很容易造成無法返回的情況出現(xiàn)。

二、收銀臺(tái)架構(gòu)

由于收銀臺(tái)是一層頁面包裝，因此架構(gòu)設(shè)計(jì)我們主要是來看下他的功能視圖、用例集成關(guān)系和關(guān)鍵接口要素。

1. 功能視圖

圖7：收銀臺(tái)功能視圖

從上圖中我們可以看到，微信、支付寶兩套接口整體交互基本是一致的，唯一的區(qū)別就在調(diào)用的收銀臺(tái)由于適配的終端不同需要采用不同的調(diào)用方式。

快捷、賬戶兩種支付方式，他們的交互沒有按照四段式處理，功能層面并不一致。所以我們統(tǒng)一把這些個(gè)性化的支付方式按照“四段交互”標(biāo)準(zhǔn)包裝成“APP和H5”形式的“聚合收銀臺(tái)”，這樣支付的整體交互就統(tǒng)一了。

2. 用例模型

這些功能如何與整個(gè)支付系統(tǒng)如何集成在一起呢？下面我們來看下系統(tǒng)外部邊界和內(nèi)部功能結(jié)構(gòu)。

圖8：收銀臺(tái)用例

（1）外部邊界

1）網(wǎng)關(guān)訪問：

收銀臺(tái)對(duì)外提供“收銀臺(tái)服務(wù)接口”，接收來自收單網(wǎng)關(guān)、會(huì)員網(wǎng)關(guān)的支付請(qǐng)求。

2）客戶系統(tǒng)：

收銀臺(tái)對(duì)“客戶系統(tǒng)”主要是訪問“會(huì)員認(rèn)證”和“商戶產(chǎn)品”配置。其中“會(huì)員認(rèn)證”用于對(duì)用戶支付方式對(duì)應(yīng)的“銀行卡”和“賬戶”進(jìn)行信息驗(yàn)證，同時(shí)也可以擴(kuò)展“綁卡/開戶”的操作。

收銀臺(tái)本身是商戶簽約產(chǎn)品的一部分，因此收銀臺(tái)的配置是從商戶簽約產(chǎn)品中獲得信息。

3）支付系統(tǒng)：在收銀臺(tái)支付過程中，分別要與交易、渠道、風(fēng)控系統(tǒng)進(jìn)行交互，具體交互要素參看上圖。

（2）內(nèi)部結(jié)構(gòu)

1）收銀臺(tái)接口：收銀臺(tái)提供給外部的服務(wù)接口，包括“地址獲取、頁面獲取、回調(diào)處理、結(jié)果查詢”等；

2）收銀臺(tái)服務(wù)：收銀臺(tái)服務(wù)的主控服務(wù)，通過讀取商家的收銀臺(tái)參數(shù)來控制頁面展示和交易處理流程。

3）支付方式：以接口或者頁面的形式，提供收銀臺(tái)支付方式的信息的查詢，以及在收銀臺(tái)上對(duì)于綁卡、開戶操作的擴(kuò)展。

4）支付頁面：按支付前、支付中、支付后三個(gè)步驟來操作對(duì)應(yīng)的支付頁面。

2. 接口要素

我們知道做一個(gè)收銀臺(tái)它的個(gè)性化部分主要是在下單和調(diào)用收銀臺(tái)，我們就從這里下手來做統(tǒng)一收銀臺(tái)接口。其實(shí)這個(gè)接口我們對(duì)微信的接口要素稍加改造就能形成我們自己的聚合收銀臺(tái)接口了。

圖9：收銀臺(tái)接口要素

1）增加支付類型

要做聚合收銀臺(tái)，并不是簡(jiǎn)單的照抄微信，因?yàn)槲⑿烹m然標(biāo)準(zhǔn)但它不是聚合收銀。所以我們?cè)诮y(tǒng)一下單的報(bào)文中增加一個(gè)“支付類型”，讓商家要使用什么支付方式進(jìn)行選擇，這樣就能無限擴(kuò)展新增的收銀臺(tái)了。

2）定義公共要素

我們希望每個(gè)報(bào)文公共部分都是一樣的，業(yè)務(wù)要素是可以根據(jù)具體場(chǎng)景再來補(bǔ)充。所以我們需要仔細(xì)研讀各種收銀臺(tái)的接口文檔抽取出公共部分，當(dāng)然這個(gè)過程還是挺費(fèi)時(shí)間和費(fèi)功夫的。為了節(jié)約大家時(shí)間我這里給大家一套標(biāo)準(zhǔn)的方案直接拿去改吧。

把圖中標(biāo)紅的字段作為公共的報(bào)文要素，保持每個(gè)報(bào)文都按此方式統(tǒng)一處理。其他信息按照具體業(yè)務(wù)場(chǎng)景進(jìn)行增減即可。

3）擴(kuò)展業(yè)務(wù)信息

統(tǒng)一下單目的是創(chuàng)建一筆訂單來記錄交易過程，然后根據(jù)不同支付方式返回不同類型的收銀臺(tái)提供下一步操作。因此我們還要給返回報(bào)文增加一個(gè)擴(kuò)展參數(shù)支持各種收銀臺(tái)參數(shù)和交互業(yè)務(wù)信息的返回給下一步交易處理提供數(shù)據(jù)。

三、收銀臺(tái)設(shè)計(jì)

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

我們前面介紹過，為能夠把四段交互統(tǒng)一的整合起來，一般都會(huì)增加一個(gè)本地收銀臺(tái)頁面來實(shí)現(xiàn)過渡，他的作用有兩個(gè)，一個(gè)是包裝本地支付方式，另一個(gè)是銜接收銀臺(tái)跳轉(zhuǎn)的交互過程，即我們平時(shí)看到的轉(zhuǎn)圈圈。

主流移動(dòng)支付形式有四類“銀行卡支付、余額支付、APP支付、掃碼支付”，這些支付方式都遵循了“四段式”的支付方式，并且普遍增加了轉(zhuǎn)圈圈過渡頁（大廠的app一般是做個(gè)動(dòng)畫的蒙屏效果）。

（1）銀行卡支付

圖10：銀行卡快捷支付

銀行卡支付一般使用快捷支付產(chǎn)品，他特點(diǎn)就是需要簽約綁卡，支付的時(shí)候也一般需要短信驗(yàn)證碼。因此這里的選擇支付方式之后是調(diào)用了本地快捷收銀臺(tái)，其后的回調(diào)結(jié)果由于是本地支付方式因此速度非常快就可以完成，隨后將結(jié)果同步給商家。

圖11：銀行卡支付流程

從流程中可以看到，用戶進(jìn)入聚合收銀臺(tái)后，會(huì)讀取其可用的支付產(chǎn)品和綁定的銀行卡，為了防止綁定銀行卡所對(duì)應(yīng)的渠道無效造成支付失敗，可以采用預(yù)路由的方式把有效的銀行卡展現(xiàn)給用戶使用（無效的可以置灰或者折疊）。

快捷支付作為一種本地支付方式，通過包裝成一個(gè)本地收銀臺(tái)進(jìn)行短信驗(yàn)證和支付確認(rèn)，實(shí)現(xiàn)了交互的統(tǒng)一。如果本地通過密碼驗(yàn)證，可以無需發(fā)送短信驗(yàn)證碼直接進(jìn)行快捷支付。

支付結(jié)果一般會(huì)通過輪詢的方式查詢本地或者渠道支付結(jié)果，成功后返回支付結(jié)果頁面，并查詢訂單信息展示給用戶確認(rèn)。（實(shí)際開發(fā)時(shí)回調(diào)和輪詢一般二選一即可）

（2）本地余額支付

圖12：支付賬戶余額支付

本地余額支付主要指通過本地支付賬戶進(jìn)行支付（支付賬戶又叫會(huì)員賬戶、余額賬戶）。用戶選擇支付方式后會(huì)跳轉(zhuǎn)到余額賬戶的收銀臺(tái)確認(rèn)訂單與賬戶后輸入密碼完成支付，返回商家頁面。

圖13：本地余額支付流程（實(shí)時(shí)返回）

由于賬戶是本地的因此這里實(shí)時(shí)扣款后直接返回給商家頁面即可。由于大廠用戶量比較大，本地余額扣款也會(huì)采用MQ異步的方式處理。因此整體交互設(shè)計(jì)上還是保持回調(diào)的處理方式。

（3）渠道賬戶支付

圖14：渠道賬戶支付渠道

賬戶支付主要是指接入“微信、支付寶”或者“銀行數(shù)字賬戶”等產(chǎn)品。這些支付方式就是我們四段式大展神威的場(chǎng)合了，其調(diào)用的收銀臺(tái)部分需要跳轉(zhuǎn)到渠道的支付環(huán)境進(jìn)行支付。

圖15：渠道賬戶支付流程

從流程圖上可以看出，這里的本地收銀臺(tái)就是一個(gè)一閃而過的過渡頁，當(dāng)用戶支付完成后，需要在返回的結(jié)果頁面增加輪詢來查詢訂單結(jié)果，然后返回給支付結(jié)果頁面展示訂單信息。

（4）掃碼支付

圖16：掃碼支付交互

掃碼支付主要是指“靜態(tài)碼牌”或者“網(wǎng)站/自助設(shè)備商品碼”，他們的特點(diǎn)就是可以自制一個(gè)二維碼，在用戶掃碼下單后，判斷掃碼APP來跳轉(zhuǎn)到不同的收銀臺(tái)（一般是公眾號(hào)或者服務(wù)窗）完成支付，返回方式也需要支付渠道來調(diào)用結(jié)果頁面返回。

圖17：掃碼支付流程

從流程上可以看到，由于是套用的公眾號(hào)或者服務(wù)窗接口，因此需要一個(gè)自營的公眾號(hào)/服務(wù)窗環(huán)境來嵌入一個(gè)H5的頁面。用戶掃碼時(shí)通過獲取“http報(bào)文頭”來判斷掃碼的app類型，然后選擇調(diào)用公眾號(hào)/服務(wù)窗內(nèi)的H5頁面，用戶輸入金額向渠道下單完成支付?；卣{(diào)和返回處理與前面的案例相同。

2. 后端配置

有了收銀臺(tái)支付產(chǎn)品，就需要能夠靈活的配置出來提供給商戶使用，并且收銀臺(tái)上的所展示的內(nèi)容可以進(jìn)行靈活的配置，滿足不同產(chǎn)品、不同客戶的需求。因此收銀臺(tái)采用了如下的配置過程。

圖18：收銀臺(tái)配置關(guān)系

商戶入網(wǎng)申請(qǐng)通過后，會(huì)給商戶配置所申請(qǐng)的“簽約產(chǎn)品”，簽約產(chǎn)品一般是提前設(shè)置好的，只要在“商戶簽約設(shè)置”中將簽約產(chǎn)品關(guān)聯(lián)上就可以了。

（1）商戶信息管理

圖19：商戶信息列表

一個(gè)商戶簽約入網(wǎng)完成實(shí)名認(rèn)證和事前審核后，商戶運(yùn)營人員就會(huì)在此處給商戶創(chuàng)建支付產(chǎn)品，點(diǎn)擊創(chuàng)建會(huì)跳轉(zhuǎn)到的“商戶產(chǎn)品配置”頁面進(jìn)行產(chǎn)品設(shè)置，設(shè)置完成后簽約產(chǎn)品會(huì)與商戶進(jìn)行關(guān)聯(lián)這樣商戶就能接入使用了。當(dāng)然每次配置創(chuàng)建、修改都需要重新審核通過后才能生效，避免配置不當(dāng)造成不當(dāng)配置影響商戶使用。

（2）商戶產(chǎn)品配置

商戶產(chǎn)品配置的目的就是把商戶和簽約產(chǎn)品關(guān)聯(lián)起來，并對(duì)支付方式提供的默認(rèn)參數(shù)進(jìn)行修改以符合客戶的使用需求。

圖20：商戶產(chǎn)品配置

從圖中我們可以看到，一個(gè)商戶可以添加多個(gè)簽約產(chǎn)品，并且每種簽約產(chǎn)品可以根據(jù)“原始簽約產(chǎn)品”提供的參數(shù)進(jìn)行設(shè)置，以滿足不同商戶交易、賬戶和優(yōu)惠活動(dòng)參與的需求。

（3）簽約產(chǎn)品配置

在提供商戶配置之前，要先創(chuàng)建一個(gè)默認(rèn)的支付方式配置。像聚合收銀臺(tái)這樣的產(chǎn)品，它可能是多組支付方式組成的，因此在這里我們把這一組的支付方式稱為一個(gè)“簽約產(chǎn)品”。

圖21：簽約產(chǎn)品設(shè)置

創(chuàng)建一個(gè)簽約產(chǎn)品需要給他設(shè)置很多東西，包括使用什么網(wǎng)關(guān)接口，交易類型，收付款賬戶，默認(rèn)分賬方，以及為每個(gè)支付方式設(shè)置他們的交易屬性。

從上圖我們可以看到，支付方式可以進(jìn)行多級(jí)分組，這樣就能適應(yīng)收銀臺(tái)多種支付方式分類展示，讓用戶使用更加一目了然。同時(shí)每個(gè)支付方式還能設(shè)置它的排序、是否展開，logo，營銷文案，綁定卡很多時(shí)默認(rèn)展示幾張卡等一系列細(xì)致入微的特性。

一般情況下簽約產(chǎn)品是提前設(shè)置好的，商戶簽約的時(shí)候直接選擇就可以了；如果商戶有特殊需求我們按照模板重新給他創(chuàng)建一個(gè)就能滿足不同商戶的需求。

需要再次說明的是，這里的簽約產(chǎn)品配置是以“收單機(jī)構(gòu)”場(chǎng)景下的產(chǎn)品設(shè)置，與普通非持牌機(jī)構(gòu)設(shè)置不同之處在于賬戶部分的設(shè)置。因?yàn)槭諉螜C(jī)構(gòu)有清結(jié)算資質(zhì)可以做渠道路由，所以不必每個(gè)支付方式綁定對(duì)應(yīng)的渠道，只要設(shè)置商戶結(jié)算賬戶就可以了。

如果是非持牌機(jī)構(gòu)只要把“賬戶設(shè)置部分”改為“支付渠道”的設(shè)置就可以了。

四、總結(jié)

收銀臺(tái)的詳細(xì)實(shí)現(xiàn)方式就介紹到這里了，我們來總結(jié)下，主要就是“四段式和轉(zhuǎn)圈圈”

1. 四段式

為了實(shí)現(xiàn)收銀臺(tái)的原子化包裝，因此現(xiàn)在收銀臺(tái)普遍采用了“統(tǒng)一下單、調(diào)用收銀臺(tái)、后臺(tái)回調(diào)、頁面返回”四個(gè)步驟，其中兩個(gè)地方是需要注意的。

1）調(diào)用收銀臺(tái)：是聚合收銀臺(tái)包裝的切入點(diǎn)，各種聚合收銀臺(tái)的奇淫技巧就是在這里大顯身手。

2）返回結(jié)果頁：是比較容易掉鏈子的地方，需要和收銀臺(tái)調(diào)用的參數(shù)緊密配合。

2. 轉(zhuǎn)圈圈

為了保障流程的銜接緊密和交互體驗(yàn)的統(tǒng)一，一般會(huì)跨系統(tǒng)支付會(huì)增加一個(gè)本地過渡頁面，主要作用是銜接調(diào)用收銀臺(tái)和結(jié)果返回之間的流程和數(shù)據(jù)處理。