详解 | 支付收银台前端设计

编辑导语：在支付环节中，不可缺少的就是支付环节，比如我们在某个电商平台进行购物时，在最后结账时就会使用收银的服务；在产品设计中，收银台的前端设计也是比较简单的一个部分；本文作者分享了关于收银台的前端设计以及收银台在电子支付里的位置，我们一起来了解一下。

收银台应该是支付环节最好设计的一块，因为每天都在用，所以感知会非常明显，收银台的前端服务端其实都不难，今天我们重点介绍收银台的前端设计办法以及收银台在整个电子支付框架中的位置，起到的作用。

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协议