收银台应该是支付环节最靠前一块，因为每天都在用，所以感知会非常明显，收银台的前端服务端其实都不难，今天我们重点介绍收银台的前端设计办法和与后端的交互流程，本周六晚20：00我们将在“陈天宇宙在线课堂”直播讲解收银台的设计方法，课堂地址见本公众号底部菜单栏“在线课堂”。
什么是收银台
什么是收银台呢，从字面意思“收银台=收+银+台”，顾名思义就是收取银子的台子
收银台发展史
- 最早的收银台
在古代你去饭馆吃饭喝酒吃肉，酒足饭饱后到柜台掏出50两的大元宝拍在了“收银台”上，老板结账，不用找了；所以在古代收银台就是那个柜台，柜台的特点就是结账的场所，你把钱放上去，交易就完成了
- 近代收银台
近代在电子支付出现之前，我们去超市购买商品，挑好货品后拿到结账处进行清点，工作人员告诉你“一共10斤粮票” ，你掏出纸质的票子完成了付款，商品就是你的了；这时候的工作人员叫收银员，他面前的台子就是收银台了；这时候的收银台就是商品和现金的交换场所；交易就是价值交换
- 现代线上支付收银台
到了现代电子支付出现了，出现了新的货币形式“虚拟货币”，那么我们为虚拟货币提供了线上的支付场所“电子收银台”，一个可以在线上通过互联网技术完成货币转移的技术形态
在线收银台类型
- PC收银台在电脑上完成支付的收银台
- H5收银台手机内的H5网页上完成支付的收银台
- API收银台提供给商户商户自己进行包装成自己收银台的收银台底层接口
- SDK收银台SDK开发工具包收银台
- 硬件收银台pos机，mpos机等硬件设备，支付卡牌
从支付架构看收银台
电子支付收单架构–收银台位置
- 商户侧的收银台分：前台/后台，前台面向用户，后台面向渠道
- 支付公司的收银台：前台对应商户或者直接面对用户，后台面向渠道
- 收银台前台：面向用户的可视化收银台页面主要是提供给用户完成支付方式选择和支付请求的发起
- 收银台后台：主要是调用后端获取支付参数和支付通道，请求通道发起支付请求
我总结的一个支付体系架构模型：一点+三线
一点：收银台，也是支付的起点
三线：内线“订单- 账单 -清结算-账务账户”
外线“路由-风控-支付核心-渠道清算-通道方”
连接线“内线和外线的支付信息交互线”
把握好“一点”的设计和“三条线”的设计，就可以搭建起一个完整的支付体系；该设计方法不仅适用于一家三方支付机构，同样适用于一家普通的交易平台，四方聚合支付；只不过支付通道的不同，三方接入的是银行通道，普通商家和四方聚合公司接入的是三方通道
本文主要介绍在线手机移动端收银台的设计,其他类型的收银台类似不做介绍，其他环节的设计后面文章会单独介绍
收银台设计之前准备
做设计收银台之前要先做好这几个准备
- 了解公司业务模型知道业务是怎么样的，售卖的是什么商品，是电商，游戏，课程售卖，会员充值等等，其实就是卖什么，怎么卖的问题；我们假设是电商平台，卖的是实物商品
- 选择支付方式想好计划为用户提供什么可用的支付方式，比如微信支付，支付宝支付，银行卡快捷支付，账户余额支付？一般微信支付宝就够了，难免有用户想直接绑定信用卡去支付，虽然通过微信支付宝也可以使用信用卡支付；这个看平台选择，如果有能力尽可能给用户更多的选择，覆盖更多的用户群体需求；
我们假设选定了：微信支付，银行卡快捷支付，账户余额支付（不考虑合规性的自建钱包，签约合规性的三方或者银行钱包）
- 签约支付通道签约了支付产品，基本就知道该如何去设计收银台了；如上假设我们签约了微信支付，易宝支付快捷支付，自建钱包；那么我们就拿到了微信的文档，易宝支付的文档，钱包账户自己来设计；拿到文档后我们就知道了支付需要的参数了，基本就能确定我们请求通道时需要哪些参数，哪些参数是用户提供的，哪些参数需要后台整理封装
- 确定收银台的支撑系统收银台要想能完成支付至少需要哪些系统，就像刚才说的模型需要内线的订单账单，账务；外线就需要收银台后台，路由风控（非必须），支付处理，渠道管理，这个一会会具体介绍
支付流程
支付的业务流程一，个是主流程，另一个就是每个支付类型的业务流程，比如支付流程，退款流程；我们分别介绍
核心主流程
- 1.去结算：购物车去结算到达订单填写
- 2.提交订单：订单填写页提交订单到达收银台
- 3.去支付：收银台选择支付方式后点击去支付进入支付流程
- 4.支付结果：支付完成后到达支付结果页
- 5.后续流程：支付结果页引导用户到达制定位置，比如查看订单，继续购物等
支付流程页面及系统间的交互
支付流程时序图
收银台的前端设计
现在基于上面的介绍我们设计一下收银台页面
收银台的关键信息
- 商品信息（非必须展示） ：用户买的什么
- 收款方 （非必须展示） ：钱付给谁
- 支付有效时间：在规定时间内支付
- 支付方式选择：选择用什么方式支付
- 支付金额 ：付多少钱
- 支付操作：确认支付的按钮
京东收银台页面
收银台的关键流程
- 提交订单到达收银台页面
- 去支付进入支付流程，当前应用或者跳转到支付应用
- 支付成功或失败的支付结果落地页
- 支付落地页的后续流程，返回什么地方
- 结束
收银台的拓展
收银台随着业务的变化在不断发生变化，在更多的端上建设收银台，收银台支持更多的支付方式
- 收银台类型的拓展：PC收银台，H5收银台，app收银台等
- 支付方式的拓展：微信支付，绑卡支付，余额支付，数字人民币支付，线下支付等
银行卡快捷支付
银行卡快捷支付可以选择已经绑定的卡，也可以添加新卡；新卡的额绑定一般按照绑卡鉴权的要求既可以设计出需要的要素，借记卡和贷记卡的要素是不一样的；个人户和对公户也是不一样的；随着电子支付的发展，方式也会变化，跟着接入方的要求走即可，这里就不过多介绍了，大家知道即可
收银台的余额支付
既然是自己包装或者接入的钱包余额，那么这一个就算一个新的支付方式，一个新的支付方式需要关注几个要素
- 支付logo：就是展示给用户的icon图标
- 支付方式名称：起个名字，比如抖音支付，余额支付，钱包支付等
收银台的后端设施
收银台后端还需要一些基础设施和配置
- 配置支付通道将平台已经接入的通道进行统一管理
- 支付标识：知道钱收到那个账户为支付体系设计一个支付标识或者编码，知道在收银台请求时钱应该通过那个通道收到那个收款账户中
- 配置收银台页面在不同端，不同业务和商品，不同的用户，可以使用什么支付方式，比如北京用户不提供余额支付的支付方式
- 收银台查询后台：查看支付记录需要一个后台管理，可以查看收银台的支付请求记录以及支付状态
案例中心介绍-光圈宠物集团
为了便于大家学习，有明确的业务场景和用户场景，我们将成立一家牛逼的企业-光圈宠物集团；集团将包含4大业务线：三方支付业务“光圈支付”、光圈宠物电商“光圈宠购”、光圈宠物社区“光圈萌宠”、光圈宠物管理软件“光宠”；作为今后的支付45天，基础60天等产品设计的案例基础
