Front-End Component

The HaiPay Front-End Component is a pre-built payment UI solution for securely accepting payments on merchant websites. With the Front-End Component, sensitive information (card numbers, CVV, etc.) is collected and hosted by HaiPay components, so merchants do not need to apply for PCI DSS certification. Adding new payment methods later requires only a contract — no additional development needed.

Front-End Component

Merchants can embed the payment component directly into their own pages. The merchant’s server calls the Collection Apply API to obtain a clientToken, and the front-end uses this token to initialize the component. Users can complete payment on the current page without redirection. A single container displays Google Pay, Apple Pay, and credit cards simultaneously, with a mode parameter to switch between collection payments and MIT payments. Ideal for merchants who need unified management of multiple payment scenarios.

Script

https://cashier.haipay.top/js/composite-component_1.0.0.min.js

Parameters

Parameter	Required	Description
`sandbox`	Yes	`true` for test environment, `false` for production
`clientToken`	Yes	Client token returned by the Collection Apply API
`mode`	Yes	Payment scenario: `payment` (collection) or `subscription` (subscription)
`showPayButton`	No	Whether to show the credit card submit button, default `false` (hidden)
`themeMode`	No	Theme mode, `light` / `dark`, default `light`
`paymentMethodConfig`	No	Payment method combination, default `["GOOGLE_PAY","APPLE_PAY","CREDIT_CARD"]`
`applePayButtonType`	No	Apple Pay button text, e.g. `buy`, `subscribe`
`googlePayButtonType`	No	Google Pay button text, e.g. `buy`, `subscribe`
`cardPosition`	No	Credit card form position, default `bottom`, options: `bottom`, `top`

Events

ready — Component rendered and ready for interaction
error — Initialization failure or payment error
confirm — Form submission result (success/failure)
paymentStatus — Payment result notification; returns error info on failure (component auto-handles result display when not listened to)
paymentMethodType — Currently selected payment method

Recommendations

Recommended as the default choice for new checkout pages — cleaner structure, lower development cost.
When only a subset of payment methods is needed, pass the desired combination.

<script src="https://cashier.haipay.top/js/composite-component_1.0.0.min.js"></script>

<div>
  <div id="paymentId"></div>
</div>

const elements = haiPay.create({
  mode: 'payment',
  sandbox: true,
  clientToken: 'your-client-token',
  themeMode: 'light',
  paymentMethodConfig: ['GOOGLE_PAY', 'APPLE_PAY', 'CREDIT_CARD']
});

elements.mount('#paymentId');

elements.on('ready', (event) => {
  console.log('Rendered successfully:', event);
});

elements.on('error', (event) => {
  console.error('Payment error:', event);
});

elements.on('paymentMethodType', (event) => {
  console.log('Payment method type:', event);
});

elements.submitCardPayment();

elements.on('confirm', (event) => {
  console.log('Confirm:', event);
});

elements.on('paymentStatus', (event, message) => {
  console.log('Payment status:', event, message);
});

Common Errors

Error Message	Cause	Solution
Missing required parameters: env, orderNo	Missing required initialization parameters	Verify that `clientToken` and other parameters are passed correctly
Unsupported region: CN	Mainland China is not supported in production	Verify merchant configuration and target market

Quick start

Merchant Guide

Common Payment

Global Payment

Unified API

End To End Testing

Appendix

Merchant FAQ

Front-End Component