--- title: "PromptPay Component" description: "Add PromptPay to an existing Components integration." url: "https://docs.adyen.com/payment-methods/promptpay/web-component" source_url: "https://docs.adyen.com/payment-methods/promptpay/web-component.md" canonical: "https://docs.adyen.com/payment-methods/promptpay/web-component" last_modified: "2019-09-06T17:19:00+02:00" language: "en" --- # PromptPay Component Add PromptPay to an existing Components integration. [View source](/payment-methods/promptpay/web-component.md) This page explains how to add PromptPay to your existing Web Components integration. ## Requirements Select the [server-side flow](/online-payments/build-your-integration) that your integration uses: ### Tab: Sessions flow | Requirement | Description | | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Integration type** | Make sure that you have built a Sessions flow [Web Components integration](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components). | | **Setup steps** | Before you begin, contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other) to add PromptPay in your Customer Area. | ### Tab: Advanced flow | Requirement | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Integration type** | Make sure that you have built an Advanced flow [Web Components integration](/online-payments/build-your-integration/advanced-flow?platform=Web\&integration=Components). | | **Setup steps** | Before you begin, contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other) to add PromptPay in your Customer Area. | ## Import resources for v6 If you are using Web Components v6, [import the Component](/online-payments/build-your-integration/?platform=Web\&integration=Drop-in\&version=6.0.0) that you need for PromptPay: ```js import { AdyenCheckout, PromptPay } from '@adyen/adyen-web' ``` ## API reference You do not need to send additional fields for PromptPay. To see optional fields that you can send for all payment methods, choose the endpoint you integrated: * [/sessions](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions): This is the default with [Components v5.0.0](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components) or later. * [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments): If you implemented an [additional use case](/online-payments/build-your-integration). ## Component configuration ### Step 1: Create a DOM element Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered: ```html
``` ### Step 2: Create an instance of the Component #### v6.0.0 or later Create an instance of the Component, passing: * Your instance of `AdyenCheckout`. ```js const promptpay = new PromptPay(checkout).mount('#promptpay-container'); ``` ** #### v5.x.x or earlier Use the `create` method of your `AdyenCheckout` instance, in this case `checkout`, to create the Component: ```js const promptpayComponent = checkout.create('promptpay').mount('#promptpay-container'); ``` ## Test and go live Test PromptPay payments with real payment details and small amounts. Check the status of your test PromptPay payments in your **Customer Area** > **Transactions** > **Payments**. To accept live PromptPay payments, you must contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other) to add PromptPay in your live Customer Area. ## See also * [Web Components integration guide](/online-payments/components-web) * [Webhooks](/development-resources/webhooks) * [API Explorer](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/overview)