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

# Checkout Mode (Legacy navigation V20260628)

> Historical documentation. Learn about Checkout Mode — the fastest way to integrate payments via payUrl redirect.

Checkout Mode is the simplest integration method. The merchant's server calls the Collection Apply API, then uses the returned `payUrl` to redirect the user to a HaiPay-hosted payment page where the user completes payment and authorization.

## Integration Flow

**1. Server calls the Collection Apply API**

The merchant's server sends a collection request to HaiPay with required parameters such as transaction amount, payment method, and callback URLs. For the apply endpoints of each payment method, see: [Credit Card](https://doc.haipay.net/en/history/V20260628/api/version2/creditcard.md), [Apple Pay](https://doc.haipay.net/en/history/V20260628/api/version2/ApplePay.md), [Google Pay](https://doc.haipay.net/en/history/V20260628/api/version2/GooglePay.md), [MIT](https://doc.haipay.net/en/history/V20260628/payments/cards/merchant-initiated-transactions.md).

**2. Get payUrl and redirect**

The API response contains a `payUrl` field. Redirect the user's browser to this URL.

**3. User completes payment and authorization**

The user completes payment and authorization on the HaiPay-hosted page. After payment, HaiPay redirects the user back to the merchant's `callBackUrl` and sends an async notification to `notifyUrl`.

## Example Code

```javascript theme={null}
// Assume the server has called the Collection Apply API and returned payUrl to the frontend
const payUrl = response.data.payUrl;

// Redirect in the current window
window.location.href = payUrl;

// Or open in a new window
// window.open(payUrl, '_blank');
```

## Recommendations

* Best for the fastest payment integration with minimal frontend changes.
* When there is no strong requirement for custom payment page UI.
* In mobile H5 scenarios, the redirect experience typically meets requirements.

## Related Topics

* [Front-End Component](https://doc.haipay.net/en/history/V20260628/payments/cards/payment-element.md)
* [VISA/MASTER Payment](https://doc.haipay.net/en/history/V20260628/api/version2/creditcard.md)
* [Apple Pay](https://doc.haipay.net/en/history/V20260628/api/version2/ApplePay.md)
* [Google Pay](https://doc.haipay.net/en/history/V20260628/api/version2/GooglePay.md)


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