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

> 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, callback URLs, and optional `cancelUrl`. For the apply endpoints of each payment method, see: [Credit Card](https://doc.haipay.net/en/history/V20260701/payments/cards/overview.md), [Apple Pay](https://doc.haipay.net/en/history/V20260701/payments/cards/apple-pay.md), [Google Pay](https://doc.haipay.net/en/history/V20260701/payments/cards/google-pay.md), [MIT](https://doc.haipay.net/en/history/V20260701/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`; if the user cancels payment on the payment page and `cancelUrl` is provided, the user can click back and be redirected to that URL; HaiPay also 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/V20260701/payments/cards/payment-element.md)
* [VISA/MASTER Payment](https://doc.haipay.net/en/history/V20260701/payments/cards/overview.md)
* [Apple Pay](https://doc.haipay.net/en/history/V20260701/payments/cards/apple-pay.md)
* [Google Pay](https://doc.haipay.net/en/history/V20260701/payments/cards/google-pay.md)
* [Handle Asynchronous Notifications and Verify Signatures](https://doc.haipay.net/en/operations/callback.md)
* [Use Test Card Numbers for Successful and Failed Payments](https://doc.haipay.net/en/history/V20260701/testing/test-cards.md)


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