详解 - 支付收银台前端设计 .docVIP

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

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

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

01什么是收银台

什么是收银台呢，从字面意思“收银台=收+银+台”，顾名思义就是收取银子的台子。

1.收银台发展史

最早的收银台：

在古代你去饭馆吃饭喝酒吃肉，酒足饭饱后到柜台掏出50两的大元宝拍在了“收银台”上，老板结账，不用找了；所以在古代收银台就是那个柜台，柜台的特点就是结账的场所，你把钱放上去，交易就完成了。

近代收银台：

近代在电子支付出现之前，我们去超市购买商品，挑好货品后拿到结账处进行清点，工作人员告诉你“一共10斤粮票”，你掏出纸质的票子完成了付款，商品就是你的了；这时候的工作人员叫收银员，他面前的台子就是收银台了；这时候的收银台就是商品和现金的交换场所；交易就是价值交换。

现代线上支付收银台：

到了现代电子支付出现了，出现了新的货币形式“虚拟货币”，那么我们为虚拟货币提供了线上的支付场所“电子收银台”，一个可以在线上通过互联网技术完成货币转移的技术形态。

在线收银台类型：

PC收银台：在电脑上完成支付的收银台；

H5收银台：手机内的H5网页上完成支付的收银台；

API收银台：提供给商户商户自己进行包装成自己收银台的收银台底层接口；

硬件收银台：pos机，mpos机等硬件设备，支付卡牌。

02从支付架构看收银台

电子支付收单架构——收银台位置。

商户侧的收银台分：前台/后台，前台面向用户，后台面向渠道；

支付公司的收银台：前台对应商户或者直接面对用户，后台面向渠道；

收银台前台：面向用户的可视化收银台页面主要是提供给用户完成支付方式选择和支付请求的发起；

收银台后台：主要是调用后端获取支付参数和支付通道，请求通道发起支付请求。

我总结的一个支付体系架构模型：一点+三线。

一点：收银台，也是支付的起点；

三线：

内线“订单-账单-清结算-账务账户”。

外线“路由-风控-支付核心-渠道清算-通道方”

连接线“内线和外线的支付信息交互线”

把握好“一点”的设计和“三条线”的设计，就可以搭建起一个完整的支付体系；该设计方法不仅适用于一家三方支付机构，同样适用于一家普通的交易平台，四方聚合支付；只不过支付通道的不同，三方接入的是银行通道，普通商家和四方聚合公司接入的是三方通道。

本文主要介绍在线手机移动端收银台的设计,其他类型的收银台类似不做介绍，其他环节的设计后面文章会单独介绍。

03收银台设计之前准备

做设计收银台之前要先做好这几个准备：

了解公司业务模型：

知道业务是怎么样的，售卖的是什么商品，是电商，游戏，课程售卖，会员充值等等，其实就是卖什么，怎么卖的问题；我们假设是电商平台，卖的是实物商品。

选择支付方式：

想好计划为用户提供什么可用的支付方式，比如微信支付，支付宝支付，银行卡快捷支付，账户余额支付？一般微信支付宝就够了，难免有用户想直接绑定信用卡去支付，虽然通过微信支付宝也可以使用信用卡支付；这个看平台选择，如果有能力尽可能给用户更多的选择，覆盖更多的用户群体需求。

我们假设选定了：微信支付，银行卡快捷支付，账户余额支付（不考虑合规性的自建钱包，签约合规性的三方或者银行钱包）。

签约支付通道：

签约了支付产品，基本就知道该如何去设计收银台了；如上假设我们签约了微信支付，易宝支付快捷支付，自建钱包；那么我们就拿到了微信的文档，易宝支付的文档，钱包账户自己来设计；拿到文档后我们就知道了支付需要的参数了，基本就能确定我们请求通道时需要哪些参数，哪些参数是用户提供的，哪些参数需要后台整理封装。

确定收银台的支撑系统：

收银台要想能完成支付至少需要哪些系统，就像刚才说的模型需要内线的订单账单，账务；外线就需要收银台后台，路由风控（非必须），支付处理，渠道管理，这个一会会具体介绍。

我们先看不同的支付产品所需要的收银台有什么不同，对于很多支付场景流程有些差别，其实自己应用的收银台是一样的，不同的支付场景和支付方式在去支付时流程会有差别；我们就以支付应用内调起支付，商户APP内调起支付应用，浏览器内调起支付应用，我们重点以微信支付这三种支付场景为例。

微信支付产品：

1.JSAPI支付

JSAPI支付是指商户通过调用微信支付提供的JSAPI接口，在支付场景中调起微信支付模块完成收款。

应用场景：

JSAPI支付适用于线下场所、公众号场景和P