> ## 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.

# 收银台模式

> 了解收银台模式——通过 payUrl 跳转，最快速度接入支付。

收银台模式是最简单的接入方式。商户服务端调用代收申请接口后，使用返回的 `payUrl` 将用户跳转到 HaiPay 托管的支付页面，用户在该页面完成支付和授权。

## 集成流程

**1. 服务端调用代收申请 API**

商户服务端向 HaiPay 发起代收申请请求，传递交易金额、支付方式、回调地址以及可选的 `cancelUrl` 等必要参数。各支付方式的申请接口请参阅：[信用卡](https://doc.haipay.net/zh/payments/cards/overview.md)、[Apple Pay](https://doc.haipay.net/zh/payments/cards/apple-pay.md)、[Google Pay](https://doc.haipay.net/zh/payments/cards/google-pay.md)、[MIT](https://doc.haipay.net/zh/payments/cards/merchant-initiated-transactions.md)。

**2. 获取 payUrl 并重定向**

API 响应中包含 `payUrl` 字段，商户将用户浏览器重定向到该 URL。

**3. 用户完成支付和授权**

用户在 HaiPay 托管页面上完成支付和授权。支付完成后，HaiPay 将用户重定向回商户的 `callBackUrl`；如果用户在支付页面取消支付且传递了 `cancelUrl`，则可点击返回到该地址；并向 `notifyUrl` 发送异步通知。

## 示例代码

```javascript theme={null}
// 假设服务端已调用代收申请 API，并将 payUrl 返回给前端
const payUrl = response.data.payUrl;

// 在当前窗口重定向
window.location.href = payUrl;

// 或在新窗口打开
// window.open(payUrl, '_blank');
```

## 使用建议

* 适合最快速的支付集成，前端改动最小。
* 对支付页面 UI 无强定制需求。
* 在移动端 H5 场景中，跳转体验通常能满足要求。

## 相关主题

* [前置组件](https://doc.haipay.net/zh/payments/cards/payment-element.md)
* [VISA/MASTER 支付](https://doc.haipay.net/zh/payments/cards/overview.md)
* [Apple Pay](https://doc.haipay.net/zh/payments/cards/apple-pay.md)
* [Google Pay](https://doc.haipay.net/zh/payments/cards/google-pay.md)
* [处理异步通知并验证签名](https://doc.haipay.net/zh/operations/callback.md)
* [使用测试卡号模拟支付成功、拒付与争议场景](https://doc.haipay.net/zh/testing/test-cards.md)


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