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

<Steps>
  <Step title="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](/docs/en/V20260628/api/version2/creditcard), [Apple Pay](/docs/en/V20260628/api/version2/ApplePay), [Google Pay](/docs/en/V20260628/api/version2/GooglePay), [MIT](/docs/en/V20260628/api/version2/creditcard-mit).
  </Step>

  <Step title="Get payUrl and redirect">
    The API response contains a `payUrl` field. Redirect the user's browser to this URL.
  </Step>

  <Step title="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`.
  </Step>
</Steps>

## 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](/docs/en/V20260628/api/version2/frontend-payment-element)
* [VISA/MASTER Payment](/docs/en/V20260628/api/version2/creditcard)
* [Apple Pay](/docs/en/V20260628/api/version2/ApplePay)
* [Google Pay](/docs/en/V20260628/api/version2/GooglePay)