> ## 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 收银台模式——通过 payUrl 跳转，最快速度接入支付。

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

## 集成流程

<Steps>
  <Step title="服务端调用代收申请 API">
    商户服务端向 HaiPay 发起代收申请请求，传递交易金额、支付方式、回调地址等必要参数。各支付方式的申请接口请参阅：[信用卡](/docs/zh/V20260628/api/version2/creditcard)、[Apple Pay](/docs/zh/V20260628/api/version2/ApplePay)、[Google Pay](/docs/zh/V20260628/api/version2/GooglePay)、[MIT](/docs/zh/V20260628/api/version2/creditcard-mit)。
  </Step>

  <Step title="获取 payUrl 并重定向">
    API 响应中包含 `payUrl` 字段，商户将用户浏览器重定向到该 URL。
  </Step>

  <Step title="用户完成支付和授权">
    用户在 HaiPay 托管页面上完成支付和授权。支付完成后，HaiPay 将用户重定向回商户的 `callBackUrl`，并向 `notifyUrl` 发送异步通知。
  </Step>
</Steps>

## 示例代码

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

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

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

## 使用建议

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

## 相关主题

* [前置组件](/docs/zh/V20260628/api/version2/frontend-payment-element)
* [VISA/MASTER 支付](/docs/zh/V20260628/api/version2/creditcard)
* [Apple Pay](/docs/zh/V20260628/api/version2/ApplePay)
* [Google Pay](/docs/zh/V20260628/api/version2/GooglePay)