收银台应该是支付流程中设计最好的部分。 因为每天都在使用，所以感知会非常明显。 收银前端服务器其实并不难。 今天我们重点讲一下收银台的前端设计方法以及收银台在整个流程中的作用。 在电子支付框架中的地位和作用。

01 什么是收银员？

什么是收银员？ 字面意思是“收银员=现金+现金+柜台”。 顾名思义，就是收钱的柜台。

一、收银发展史

最早的收银员：

在古代，你去餐馆吃饭、喝酒、吃肉。 吃饱后，你走到柜台前，拿出一块50两的大元宝，拍在了“收银员”的身上。 老板不用找就付账； 所以在古代，收银员就是柜台，而柜台的独特之处就是结账的地方。 你把钱存进去，交易就完成了。

现代收银员：

现代电子支付出现之前，我们去超市购买商品。 挑选完商品后，我们把商品带到收银台进行清点。 工作人员告诉你“一共10公斤粮票”。 您拿出纸质门票并完成付款。 货物是你的。 是的; 此时的工作人员称为收银员，他面前的桌子就是收银员； 此时的收银台就是商品和现金的兑换场所； 交易是价值的交换。

现代在线支付结账：

随着现代电子支付的出现，一种新的货币形态“虚拟货币”应运而生。 然后我们为虚拟货币提供一个在线支付场所“电子收银台”，这是一种可以通过互联网技术在线完成货币转账的技术形式。

网上结帐类型：

02 从支付结构看收银

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

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

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

第三行：

把握“一点”设计和“三线”设计，就可以构建完整的支付系统； 这种设计方式不仅适用于三方支付机构，也适用于普通交易平台、四方聚合支付； 只是支付渠道不同。 三方接入是银行渠道，普通商户和四方聚合公司接入三方渠道。

本文主要介绍在线移动收银台的设计。 其他类型的收银台不再类似介绍。 其他方面的设计将在后续文章中单独介绍。

03 收银台设计前的准备工作

在设计收银台之前，需要做好以下准备工作：

了解公司的商业模式：

我们知道生意是什么样的，卖什么产品，是电商、游戏、课程销售、会员充值等等。其实就是一个卖什么、怎么卖的问题； 我们假设它是一个电子商务平台，销售实物商品。

选择付款方式：

想想你打算向用户提供哪些可用的支付方式，比如微信支付、支付宝支付、银行卡快捷支付、账户余额支付等？ 一般微信、支付宝就够了。 难免有一些用户想直接绑定信用卡来支付。 虽然信用卡也可以通过微信、支付宝进行支付。 这取决于平台的选择。 如果它有能力给用户尽可能多的选择，覆盖更多用户群体的需求。

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

签约支付渠道：

注册了支付产品后，我们基本上就知道如何设计收银台了； 如上，假设我们注册了微信支付、易宝支付快捷支付，并搭建了自己的钱包； 然后我们拿到了微信文档、易宝支付文档、钱包我们自己设计了账户； 拿到文档后，我们就知道了支付所需的参数，基本上就可以确定请求通道时需要哪些参数，哪些参数是用户提供的，哪些参数需要后台整理打包。

确定收银台的支持系统：

收银员至少需要什么系统才能完成付款？ 就像刚才提到的模型需要内部订单计费和记账； 对外，需要收银后台、路由风控（可选）、支付处理、渠道管理等。 会详细介绍。

我们先来看看不同支付产品所需收银员的差异。 许多支付场景的流程都有些不同。 其实你申请的收银员都是一样的。 不同的支付场景和支付方式，去支付时会有不同的流程； 我们会在支付应用内启动支付，在商户APP内启动支付应用，在浏览器内启动支付应用。 我们重点以微信支付的三种支付场景为例。

微信支付产品：

1. 付款方式

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

应用场景：

支付适用于线下场所、公众号场景和PC网站场景。

商家已有H5商城网站。 当用户通过消息或扫描二维码在微信中打开网页时，即可调用微信支付完成订单购买流程。 具体操作流程如下：

步骤1如图2.1所示。 商家通过发送图文消息或者使用定制菜单来吸引用户点击进入商家的网页。

步骤2：如图2.2所示，用户进入商户网页，选择购买，完成购买流程。

步骤3：如图2.3所示，微信支付控件被激活，用户开始输入支付密码。

步骤4如图2.4所示。 密码验证通过，支付成功。 通知商户后台支付成功。

第五步：如图2.5所示，返回商户页面，表明购买成功。 该页面由商家定制。

步骤6：如图2.6所示，微信支付公众号发放支付凭证。

步骤7：如图2.3所示，商户公众号发送发货成功消息。 此步骤是可选的。

我们来看一下支付接口列表：

2. APP支付

APP支付是指商户将开放SDK集成到移动应用APP中，激活微信支付模块完成支付。 目前微信支付支持的手机系统：IOS（苹果）、（安卓）、WP（ ）。

应用场景：

APP支付适用于手机APP集成微信支付功能的场景。 商户APP调用微信提供的SDK来调用微信支付模块。 商户APP会跳转至微信完成支付。 支付完成后，会跳转回商户APP，最终显示支付结果。

具体操作流程如下：

第一步：用户进入商户APP，选择商品下单，确认购买，进入支付链接。 商户服务后台生成支付订单，签名后数据传输至APP。 以微信提供的DEMO为例，见图1.1。

步骤2：用户点击发起支付操作，进入微信界面，激活微信支付，出现支付确认界面，如图1.2所示。

第三步：用户确认收款人及金额。 点击立即支付后，出现密码输入界面。 您可以选择找零或银行卡支付，如图1.3所示。

第四步：输入正确密码后，支付完成，客户端微信上出现支付详情页面。 参见图 1.4。

第五步：跳转回商户APP。 商户APP会根据支付结果个性化展示订单处理结果。 参见图 1.5。

我们来看一下支付接口列表：

3.H5支付

H5支付是指商家在微信客户端之外的移动网页上展示商品或服务。 当用户在上述页面确认使用微信支付时，商户启动该服务并调用微信客户端进行支付。

注：商户需拥有H5商城网站并已办理ICP备案后方可申请接入。

温馨提示：APP端不建议使用H5支付。 如需在APP内使用微信支付，请接受APP支付。

应用场景：

H5支付主要应用于触屏手机浏览器请求微信支付的场景，方便外部浏览器调用微信支付。

用户端使用H5支付的具体操作流程如下：

第一步：用户通过非微信浏览器站点导航进入商户H5网页。 用户选择要购买的产品，选择微信支付启动购买流程。

第二步：进入微信客户端确认交易并输入支付密码。

第三步：支付成功，用户收到支付凭证，商户后台收到支付成功通知。

我们来看一下支付接口列表：

支付宝支付产品：与微信略有相同。

易宝支付支付产品：与微信略有相同。

平台账户余额支付：

自建账户：这需要账户中心封装虚拟支付通道。 用户收银员请求扣除账户余额，账户通知收银员扣除成功； 并且可以进行正向和反向交易。

签署第三方支付或者银行钱包：这个可以根据接入文档来设计。

04 付款流程

支付业务流程有一个，一个是主流程，一个是各个支付类型的业务流程，比如支付流程和退款流程，我们会分别介绍。

核心主要流程：

支付流程-快捷支付：

支付流程-扫描二维码支付：

05 收银台前端设计

现在根据上面的介绍，我们来设计一下结账页面：

结帐时的关键信息：

京东收银页面

收银台关键流程：

收银台扩展：

收银员随着业务的变化而不断变化。 收银台建在更多终端上，支持更多支付方式。

收银类型拓展：PC收银、H5收银、APP收银等。

支付方式拓展：微信支付、卡支付、余额支付、数字人民币支付、线下支付等。

银行卡快捷支付：

银行卡快捷支付，您可以选择已绑定的卡，也可以添加新卡； 新卡的金额绑定一般可以根据卡认证的要求来设计所需的元素。 借记卡和信用卡的要素是不同的； 个人账户和对公账户也有不同； 随着电子支付的发展，支付方式也会发生变化。 按照接入方的要求即可。 这里就不做过多介绍了，大家都知道。

收银台支付余款：

既然是自己打包或者访问的钱包余额，那么这也算是一种新的支付方式。 一种新的支付方式需要注意几个因素。

支付标识：是向用户显示的图标。

支付方式名称：给出一个名称，比如抖音支付、余额支付、钱包支付等。

06 收银后台设施

收银台的后端也需要一些基础设施。 这个模块就不过多介绍了，会在后面的文章中单独介绍。

付款ID：知道钱是从哪个帐户收到的

为支付系统设计一个支付标识符或代码，以便在收银员要求时知道应通过哪个渠道接收资金以及进入哪个收款账户。

路由配置：过滤掉一个通道

不同的端，不同的业务和产品，不同的用户，可以使用什么支付方式，比如北京用户不提供余额支付的支付方式。

结账后台：查看付款记录

需要一个后台管理来查看收银员的支付请求记录和支付状态。

陈天宇：多平台支付领域专栏作家，十年产品经验； 原某宝、某动支付产品； 支付产品经理网创始人、天使投资人； 专注为10万支付产品经理、支付机构和企业提供深度支付内容和服务！公众号：陈天宇