Checkout Mode

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

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, Apple Pay, Google Pay, MIT.

Get payUrl and redirect

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

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

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

Last modified on July 16, 2026

Front-End Component International Credit Card (VISA/MASTER)

Quick start

Merchant Guide

Common Payment

Global Payment

Unified API

End To End Testing

Appendix

Merchant FAQ

Integration Flow

Example Code

Recommendations

​Integration Flow

​Example Code

​Recommendations

​Related Topics

Integration Flow

Example Code

Recommendations

Related Topics