---
title: "Alipay HK Web Component"
description: "Add Alipay HK to your Components integration."
url: "https://docs.adyen.com/payment-methods/alipayhk/web-component"
source_url: "https://docs.adyen.com/payment-methods/alipayhk/web-component.md"
canonical: "https://docs.adyen.com/payment-methods/alipayhk/web-component"
last_modified: "2026-05-24T12:54:31+02:00"
language: "en"
---

# Alipay HK Web Component

Add Alipay HK to your Components integration.

[View source](/payment-methods/alipayhk/web-component.md)

You can add Alipay HK to your existing integration. The following instructions show only what you must add to your integration specifically for Alipay HK.

If an instruction on this page corresponds with a step in the main integration guide, it includes a link to that corresponding step of the main integration guide.

What you must add to your integration depends on the [server-side flow](/online-payments/build-your-integration) that your integration uses:

## Sessions flow Component

### Before-You-Begin

## Requirements

| Requirement           | Description                                                                                                                                                                                                              |   |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | - |
| **Integration type**  | Make sure that you have an existing Sessions flow [Web Components integration](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components).                                              |   |
| **Checkout API**      | Make sure that you use Checkout API v68 or later.                                                                                                                                                                        |   |
| **Redirect handling** | Make sure that your existing integration is set up to [handle the redirect](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#handle-the-redirect). `action.type`: **redirect** |   |
| **Setup steps**       | Before you begin, [add Alipay HK in your Customer Area](/payment-methods/add-payment-methods).                                                                                                                           |   |

### Add-Parameters-Sessions-Request

## Add additional parameters to your /sessions request

You do not need to add any parameters when you [create a payment session](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#create-a-payment-session).

### Import

## Import Alipay HK

When you [import Adyen Web](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#get-adyen-web), include `Redirect`.

**Import**

```javascript
import { AdyenCheckout, Redirect } from '@adyen/adyen-web';
```

### Add-Configuration

## Add additional configuration for Alipay HK

You do not need to add any configuration parameters for Alipay HK.

### Initialize

## Initialize the Component for Alipay HK

To [initialize](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#initialize-the-payment-session) Alipay HK, use the `Redirect` class.

**Initialize the Component**

```javascript
const redirectComponent = new Redirect(checkout, { type:alipay_hk }).mount('#redirect-container')
```

## Test and go live

Use the following credentials to test AlipayHK:

| Username                   | PIN     |
| -------------------------- | ------- |
| <hkbuyer_4659@alitest.com> | b111111 |

Check the status of AlipayHK test payments in your [Customer Area](https://ca-test.adyen.com/) > **Transactions** > **Payments**.

Before you can accept live AlipayHK payments, you need to submit a request for AlipayHK in your [live Customer Area](https://ca-live.adyen.com/).

## Advanced flow Component

## Requirements

| Requirement           | Description                                                                                                                                                                                                               |   |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - |
| **Integration type**  | Make sure that you have an existing Advanced flow [Web Components integration](/online-payments/build-your-integration/advanced-flow?platform=Web\&integration=Components).                                               |   |
| **Redirect handling** | Make sure that your existing integration is set up to [handle the redirect](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#handle-the-redirect). `action.type`: **redirect** |   |
| **Setup steps**       | Before you begin, [add Alipay HK in your Customer Area](/payment-methods/add-payment-methods).                                                                                                                            |   |

### Import

## Import Alipay HK

When you [import Adyen Web](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#get-adyen-web), include `Redirect`.

**Import**

```javascript
import { AdyenCheckout, Redirect } from '@adyen/adyen-web';
```

### Initialize

## Initialize the Component for Alipay HK

To [initialize](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#initialize-the-payment-session) Alipay HK, use the `Redirect` class.

**Initialize the Component**

```javascript
const redirectComponent = new Redirect(checkout, { type:alipay_hk }).mount('#redirect-container')
```

### Add-Parameters-Payments-Request

## Add additional parameters to your /payments request

You do not need to add any parameters to the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request when you [make a payment](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#make-a-payment).

## Test and go live

Use the following credentials to test AlipayHK:

| Username                   | PIN     |
| -------------------------- | ------- |
| <hkbuyer_4659@alitest.com> | b111111 |

Check the status of AlipayHK test payments in your [Customer Area](https://ca-test.adyen.com/) > **Transactions** > **Payments**.

Before you can accept live AlipayHK payments, you need to submit a request for AlipayHK in your [live Customer Area](https://ca-live.adyen.com/).