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

# Front-End Component

> Front-End Component — a unified payment UI solution supporting credit cards, Apple Pay, Google Pay, MIT payments and more.

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.

```javascript theme={null}
<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                     |

## Related Topics

* [Payment Link](/docs/en/V20260628/api/version2/payment-link)
* [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)