自定义收银台

2023-02-07 05:43

在支付推进过程中，您可以在Web，Wap，及 App 端采用自定义收银台方案来实现收银页面的定制化展示，此方案适合有较强开发能力且对用户体验有定制化需求的商户。

您通过将将支付二维码或支付口令在商户网站内的页面上进行渲染并展示给买家，让买家的支付跳转流程保留在商户网站内，减少页面跳转，提升支付体验。值得注意的是，您需要为网页设置查询订单状态的能力，来完成买家支付后的跳转与状态更新。

支付二维码或支付口令由 pay 接口响应中的orderCodeForm.codeDetails.codeValue字段返回给您:

对于大部分支付方式，该字段值为支付二维码的码值
对于银行转账（Bank Transfer）类支付方式，该字段值为支付口令

用户体验

以Web端的流程与用户体验为例，下图展示了自定义收银台方案的支付流程：

图 1. 自定义收银台用户体验

买家核对订单信息，点击 确认下单 之后系统生成订单，进入支付方式选择页。
买家选择支付方式，点击 确认支付 后拉起二维码浮层。
显示二维码并引导用户扫码支付，同时轮询交易状态以触发后续的跳转。
在支付完成后回跳至支付完成页。

集成步骤

在支付产品的对接中，您的开发集成工作将主要集中在支付方式选择页，该页面一般会有以下作用：

呈现可用支付方式列表：根据订单金额、地区等信息过滤支付方式并呈现。
控制交易状态：显示支付倒计时，根据订单状态判断是否允许推进到支付过程。
显示付款二维码：向后台请求付款二维码，显示并引导用户支付。
跳转至支付结果页：通过轮询感知支付结果，并根据支付状态推进到支付结果页，或引导买家重新支付。

为实现上述功能，建议按照下列步骤进行集成：

步骤一：获取并呈现支付方式

此步骤同非卡支付集成标准方案的获取并呈现支付方式步骤。

步骤二：控制支付流程

1、拦截无效支付单

在买家点击 确认支付 后，先校验下该笔订单的状态与有效期，以避免重复支付或者对已失效的订单进行支付：

图 2. 校验订单状态

此外，在支付单状态推进到成功时，需要判断其对应的订单的支付状态，若订单已支付，则对当前这笔交易通过取消接口进行取消，或者通过退款接口进行全额退款，并为买家提供对应的提示。

2、获取二维码

在买家点击 确认支付 后，客户端向商户服务器请求支付链接，商户服务器通过调用支付宝支付接口，在请求的响应中获得二维码链接（orderCodeForm字段的值）并返回。在买家点击 确认支付 后，支付流程结束前，请将下单按钮禁用，以免买家多次点击多次触发操作。

图 3. 获取二维码链接

3、显示二维码

在获取到二维码后，有两种方式可以呈现二维码：

浮层显示二维码：在原来的页面通过浮层的形式拉起一个支付组件。
新页面显示二维码：另外打开一个页面（或者原页面跳转）。此方式在用户体验上会增加一次跳转。

图 4. 二维码呈现形式

浮层显示二维码

若以浮层形式显示支付二维码，建议将二维码卡片的 position 设置为 fixed，并在页面居中显示，同时降低原页面亮度，并禁用原页面的事件，样例代码如下：

copy
.origin-page {
    /* 拉起支付组件后降低原页面亮度 */
    filter: brightness(60%);
    /* 在拉起支付后禁用原页面的按钮 */
    pointer-events: none;

    ...
}

.qrcode-card {
    /* 使支付组件相对页面居中 */
    position: fixed;
    top:40vh;
    left: 0;
    right: 0;
    margin:0 auto;
    
    ...
}

新页面显示二维码

若在新页面呈现二维码，则在新拉起的页面显示支付信息并放置二维码即可。

4、轮询交易状态

在显示二维码之后，建议页面每隔2秒通过查询接口查询一次交易状态，并根据交易状态控制后续的路由。

图 5. 轮询交易状态

在查询接口的返回中，务必依赖 paymentStatus 作为交易状态，建议按照以下表格做后续引导：

paymentStatus	类型	描述	采取的行动（唤起支付结果页/应用切换至前台）
SUCCESS	交易终态	支付成功。	跳转至支付成功页。
PROCESSING	交易中间态	交易尚在处理中。	不处理，继续等待用户支付。
FAIL	交易终态	买家未支付或支付失败。	显示支付失败，引导用户重新支付。
CANCELLED	交易终态	交易被商户取消。	显示支付失败，引导用户重新支付。

表 6. paymentStatus 字段详情

建议您在商户后端维护订单/交易单状态，前端依赖商户后端进行后续操作：

交易成功，则跳转至结果页。若轮询到交易成功，请在页面关闭二维码并提示支付成功，同时开始倒计时跳转至支付成功页。

图 6. 支付成功用户体验

2. 交易超时，则允许买家重新支付。 建议您持续轮询至交易超时，在最后一次查询依然返回 PROCESSING 状态，则通过撤销接口撤销该笔交易，同时在页面上关闭此二维码并提示交易超时。建议在页面提供刷新按钮，以便在超时后买家重新发起支付。

图 7. 支付超时用户体验

5、提供取消能力

建议在页面中提供取消按钮，以便在买家选错支付方式时重新拉起支付，在买家点击取消之后请通过取消接口撤销该笔交易。若继续选择相同支付方式，请更换请求号再次调用支付接口获得二维码链接。

图 8. 支付取消用户体验