> ## Documentation Index
> Fetch the complete documentation index at: https://doc.haipay.net/llms.txt
> Use this file to discover all available pages before exploring further.

# 收银台集成方式对比

> 对比 HaiPay 收银台模式（Checkout Mode，payUrl 跳转）与前置组件模式（Component Mode，JS 嵌入），理解支付方式与收银台集成方式的解耦设计，快速选出适合您业务的接入方案。

在 HaiPay 的支付体系中，**「支付方式」**（客户用什么付款，如银行卡、Apple Pay、Google Pay 或本地电子钱包）与 **「收银台集成方式」**（结账界面如何呈现在客户面前）是相互解耦的两个维度：

* 无论您接入的是单次代收、MIT 商户发起交易还是周期订阅，服务端均调用对应的下单接口。
* 下单接口同时返回 `payUrl` 与 `clientToken` 两个关键字段——您只需根据前端呈现需求，选择使用 `payUrl` 跳转至 HaiPay 托管收银台（**收银台模式 / Checkout Mode**），或使用 `clientToken` 在自有页面内挂载组件（**前置组件模式 / Component Mode**）。

> [card] [收银台模式（Checkout Mode）](https://doc.haipay.net/zh/payments/payment-link.md)
>
> 使用响应中的 `payUrl` 将用户重定向至 HaiPay 托管页面完成付款。前端几乎零开发，最快完成验证与上线。

> [card] [前置组件模式（Component Mode）](https://doc.haipay.net/zh/payments/frontend-payment-element.md)
>
> 使用响应中的 `clientToken` 将预构建的支付 UI 组件挂载到您自己的网页中，无需跳转即可实现最佳构建效率与转化体验。

![前置组件模式与收银台模式对比图：使用组件模式以实现最佳优化构造，使用收银台模式进行快速验证](https://mintcdn.com/haipay-3385f6e8/ODUYliyREFGls8kZ/images/zh/guide/integration-modes-comparison.png?fit=max\&auto=format\&n=ODUYliyREFGls8kZ\&q=85\&s=34a5fcd94eaa043b70333dcd0b24eb74)

前置组件模式（Component Mode）与收银台模式（Checkout Mode）架构与界面形态对比

## 核心对比与选型矩阵

参考行业通用的结账体验与合规分级标准，两种集成方式的核心差异如下：

| 对比维度 | 收银台模式（Checkout Mode / `payUrl` 跳转） | 前置组件模式（Component Mode / `clientToken` 嵌入） |
| :- | :- | :- |
| **结账体验** | 从商户网站或 App 跳转至 HaiPay 托管的独立安全收银台页面，支付完成后跳回 `callBackUrl` | 支付组件直接嵌入在商户自有结账页 DOM 容器中，用户全程留在商户站点完成支付 |
| **前端开发量** | 极低 仅需一行重定向代码（`window.location.href = payUrl`） | 适中 引入 JS SDK、挂载容器并监听 `ready` / `paymentStatus` 等事件 |
| **UI 定制与控制力** | 标准托管页面布局，支持透传 `cancelUrl` 展示返回按钮 | 可配置深浅色主题（`light` / `dark`）、银行卡表单上下位置、提交按钮显隐及钱包按钮文案 |
| **PCI DSS 合规负担** | 免审 / 最低负担（SAQ A 级） (持卡人敏感数据完全由 HaiPay 托管页面处理，不经过商户服务器或前端) | 免申请 PCI DSS 资质（由组件安全托管） (卡号、CVV 等敏感字段由 HaiPay 安全隔离组件收集托管，商户无需自行申请 PCI DSS 资质) |
| **服务端关键返回字段** | `data.payUrl` | `data.clientToken` |
| **支持的交易模式** | 常规代收（CIT）、MIT 首笔授权、订阅首笔授权 | 常规代收与 MIT 首笔授权（`mode: 'payment'`）、订阅首笔授权（`mode: 'subscription'`） |
| **支持的支付方式** | 银行卡（信用卡与借记卡）、Apple Pay、Google Pay 及全球各地区本地支付方式 | 现已支持银行卡（信用卡与借记卡）、Apple Pay、Google Pay；**未来将持续扩展至更多本地电子钱包与本地支付方式** |

> [!TIP]
>
> HaiPay 前置组件（Component）采用可扩展的容器架构设计。除了当前已支持的银行卡（支持信用卡与借记卡：VISA / MasterCard / JCB / AMEX / Diners / Discover）、Apple Pay 和 Google Pay 外，**后续本地电子钱包及地区本地支付方式也将陆续接入前置组件体系**。届时商户仅需签约开通或调整配置即可在组件内动态渲染新支付方式，无需重构前端收银台。

## 动态控制展示方式与顺序（`paymentMethods` vs `inBankCode`）

在调用银行卡代收（`/usd/collect/apply`）、MIT 申请（`/usd/mit/apply`）或订阅申请（`/subscription/apply`）接口时，您可以通过请求参数灵活控制向用户展示单个还是多个支付方式，以及它们的排列顺序：

| 参数传递方式 | 适用场景 | 行为说明 |
| :- | :- | :- |
| **仅传 `inBankCode`**（此时 `paymentMethods` 不填） | 指定单一支付方式（例如商户已在自有页面做好支付方式单选） | 直接拉起或渲染指定的单一支付方式（如 `CREDIT_CARD`、`GOOGLE_PAY` 或 `APPLE_PAY`）。 |
| **仅传 `paymentMethods`**（此时 `inBankCode` 不填） | 聚合展示多种支付方式，并**动态控制展示范围与由上至下的顺序** | 传入以英文逗号分隔的支付方式编码列表。页面将**仅展示所传的支付方式，并严格按照传入的先后顺序由上至下排列**。 例如：传入 `"GOOGLE_PAY,CREDIT_CARD"` 时，页面仅展示 Google Pay 和银行卡两项，且 Google Pay 在上、银行卡在下。 |

> [!NOTE]
>
> **规则提醒**：
>
> 1. `inBankCode` 与 `paymentMethods` **互斥二选一**：当 `inBankCode` 不填时 `paymentMethods` 必填，反之亦然。
> 2. `paymentMethods` 的动态筛选与由上至下排序能力同样适用于 [全球收银台（`/global/cashier/collect/apply`）](https://doc.haipay.net/zh/payments/global-cashier)，便于在全球收银台中按业务偏好编排支付方式顺序。

## 如何选择？

> [tab] 何时选择「收银台模式（Checkout Mode）」
>
> * **追求快速验证与上线**：希望以最少的前端工作量在数小时内跑通支付闭环。
> * **无独立前端页面或跨端分享**：如在移动端 H5、邮件账单、社媒链接或轻量级应用中直接拉起支付。
> * **零 UI 维护成本**：希望由 HaiPay 全权负责支付页面的多端适配、安全隔离与交互细节。
>
> 👉 查看 [收银台模式接入指南](https://doc.haipay.net/zh/payments/payment-link.md)

> [tab] 何时选择「前置组件模式（Component Mode）」
>
> * **追求高转化与最佳构建效率**：希望用户在您的网站结账流中一步完成付款，避免因整页跳转带来的流失。
> * **自建统一收银台**：需要在一个容器内同时呈现 Apple Pay、Google Pay 与银行卡表单，或与您页面的自定义提交按钮联动。
> * **统一代码库兼容多种场景**：希望用同一套前端组件代码同时支撑常规代收、MIT 首次绑卡扣款（`mode: 'payment'`）以及周期订阅（`mode: 'subscription'`）。
>
> 👉 查看 [前置组件模式接入指南](https://doc.haipay.net/zh/payments/frontend-payment-element.md)

## 相关主题

* [收银台模式（Checkout Mode）](https://doc.haipay.net/zh/payments/payment-link.md)
* [前置组件模式（Component Mode）](https://doc.haipay.net/zh/payments/frontend-payment-element.md)
* [银行卡支付概览](https://doc.haipay.net/zh/payments/card.md)
* [CIT 与 MIT 交易模式说明](https://doc.haipay.net/zh/payments/cit-mit.md)
* [全球收银台](https://doc.haipay.net/zh/payments/global-cashier.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.