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

# PayNow Web Component

Add PayNow to your Components integration.

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

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

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.                                                                                                                           |   |
| **Setup steps**      | Before you begin, [add PayNow 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 PayNow

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

**Import**

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

### Add-Configuration

## Add additional configuration for PayNow

[Configure the Component](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#configure-the-component) with the following configuration object:

| Parameter       | Required                                                                                    | Description                                                                               |
| --------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| `countdownTime` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The number of minutes after the QR code loads that the shopper must complete the payment. |

**Create a configuration object**

```javascript
{
   countdownTime: 5
}
```

### Initialize

## Initialize the Component for PayNow

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

**Initialize the Component**

```javascript
const payNowComponent = new PayNow(checkout,
    {
    // The configuration object for PayNow that you created.
    // Mount the Component to a container.
    }).mount('#payNow-container')
```

## Test and go live

Before you can accept live payments, you must contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other) to add PayNow in your [live Customer Area](https://ca-live.adyen.com/).

You can penny test PayNow payments in your **live** Customer Area, using small amounts and a real banking app to scan a test QR.

You can check the status of PayNow payments in your [live Customer Area](https://ca-live.adyen.com/) > **Transactions** > **Payments**.

We recommend not to test PayNow payments in your test Customer Area. You cannot reverse bank transfers in the test environment, and the funds will be deducted from the bank account.

## 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).                                                       |   |
| **Action handling**  | Make sure that your existing integration is set up to [handle the additional action](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#handle-the-redirect). `action.type`: **qrCode**. |   |
| **Setup steps**      | Before you begin, [add PayNow in your Customer Area](/payment-methods/add-payment-methods).                                                                                                                                       |   |

### Import

## Import PayNow

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

**Import**

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

### Initialize

## Initialize the Component for PayNow

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

**Initialize the Component**

```javascript
const payNowComponent = new PayNow(checkout,
    {
    // The configuration object for PayNow that you created.
    // Mount the Component to a container.
    }).mount('#payNow-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

Before you can accept live payments, you must contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other) to add PayNow in your [live Customer Area](https://ca-live.adyen.com/).

You can penny test PayNow payments in your **live** Customer Area, using small amounts and a real banking app to scan a test QR.

You can check the status of PayNow payments in your [live Customer Area](https://ca-live.adyen.com/) > **Transactions** > **Payments**.

We recommend not to test PayNow payments in your test Customer Area. You cannot reverse bank transfers in the test environment, and the funds will be deducted from the bank account.