--- title: "Alipay+ Web Component" description: "Add Alipay+ to your Components integration." url: "https://docs.adyen.com/payment-methods/alipay-plus/web-component" source_url: "https://docs.adyen.com/payment-methods/alipay-plus/web-component.md" canonical: "https://docs.adyen.com/payment-methods/alipay-plus/web-component" last_modified: "2026-05-15T11:18:08+02:00" language: "en" --- # Alipay+ Web Component Add Alipay+ to your Components integration. You can add Alipay+ to your existing integration. The following instructions show only what you must add to your integration specifically for Alipay+. If an instruction on this page corresponds with a step in the main integration guide, it includes a link to corresponding step of the main integration guide. The additions you must make 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+ 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+ 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+ You do not need to add any configuration parameters for Alipay+. ### Initialize ## Initialize the Component for Alipay+ To [initialize](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#initialize-the-payment-session) Alipay+, use the `redirect` class. **Initialize the Component** ```javascript const alipay_plusComponent = new redirect(checkout, { // The configuration object for Alipay+ that you created. // Mount the Component to a container. }).mount('#alipay_plus-container') ``` ## Test and go live There is no test environment for Alipay+. We recommend doing live penny tests: 1. Get an Alipay+ wallet app, set it up with a credit or debit card, and do live penny tests (payments for a minimal amount). 2. View the details of your Alipay+ test payments in your [live Customer Area](https://ca-live.adyen.com/) > **Transactions** > **Payments**. Before you can accept live Alipay+ payments, you need to submit a request for Alipay 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+ in your Customer Area](/payment-methods/add-payment-methods). | | ### Import ## Import Alipay+ 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+ To [initialize](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#initialize-the-payment-session) Alipay+, use the `redirect` class. **Initialize the Component** ```javascript const alipay_plusComponent = new redirect(checkout, { // The configuration object for Alipay+ that you created. // Mount the Component to a container. }).mount('#alipay_plus-container') ``` ### Add-Parameters-Payments-Request ## Add additional parameters to your /payments request You do not need to add any additional 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). **Example payment request for Alipay+** ```bash curl https://checkout-test.adyen.com/v71/payments \ -H 'x-API-key: ADYEN_API_KEY' \ -H 'idempotency-key: YOUR_IDEMPOTENCY_KEY' \ -H 'content-type: application/json' \ -X POST -d '{ "amount": { "currency": "USD", "value": 1000 }, "paymentMethod": { "type": "alipay_plus" }, "channel": "web", "countryCode": "US", "merchantAccount": "ADYEN_MERCHANT_ACCOUNT", "shopperReference": "YOUR_SHOPPER_REFERENCE", "reference": "YOUR_ORDER_REFERENCE", "returnUrl": "https://your-company.example.com/?shopperOrder=12xy..", "origin": "https://your-company.example.com" }' ``` The response includes `action.type`: **redirect**. **Example response with a redirect action** ```json { "resultCode": "RedirectShopper", "action": { "paymentMethodType": "alipay_plus", "url": "http://localhost:8080/checkoutshopper/checkoutPaymentRedirect?redirectData=X3XtfGC9%21H4sIAAAAAAAA%2F61WaW%2FbOBD9K4UA58vGCkXdBoxCluSsN0ddx2maIoBBUYwtWFcoKttskf%2B%2BQx12kmaDbHcNQ6aHb4Yzbw7xh3Kc1qwkaxYQQZTRD4WUyRfGq6TIlZGtHSoRJ3nsFzFTRgpJk5I8rMq0rlbdmubKoUI5I4L", "method": "GET", "type": "redirect" } } ``` ## Test and go live There is no test environment for Alipay+. We recommend doing live penny tests: 1. Get an Alipay+ wallet app, set it up with a credit or debit card, and do live penny tests (payments for a minimal amount). 2. View the details of your Alipay+ test payments in your [live Customer Area](https://ca-live.adyen.com/) > **Transactions** > **Payments**. Before you can accept live Alipay+ payments, you need to submit a request for Alipay in your [live Customer Area](https://ca-live.adyen.com/).