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

# EPS Web Component

Add EPS to your Components integration.

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

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

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 EPS 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 EPS

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

**Import**

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

### Add-Configuration

## Add additional configuration for EPS

[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                                                                                                                     |
| -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `issuer`             |          | Set to an EPS issuer ID to preselect a specific bank. No bank is preselected.                                                   |
| `highlightedIssuers` |          | Set to the EPS issuer IDs for banks you want to show on top of the dropdown menu. Added in v5.1.0                               |
| `placeholder`        |          | The string you want to show as the dropdown menu text. Custom translation configuration overrides this value. Select your bank. |

**Create a configuration object**

```javascript
{
       issuer: "d5d5b133-1c0d-4c08-b2be-3c9b116dc326",   // Optional. Set this to an **id** of an EPS issuer to preselect it.
       highlightedIssuers: "d5d5b133-1c0d-4c08-b2be-3c9b116dc326",
       placeholder: "Select your bank"
}
```

### Initialize

## Initialize the Component for EPS

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

**Initialize the Component**

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

### List of issuer IDs

The available banks for EPS are different in the test and live environment:

#### Test payments

| Bank name      | Issuer ID                            |
| -------------- | ------------------------------------ |
| PSA Bank Group | b631e29a-097e-4400-be52-762b6d772b38 |

#### Live payments

| Bank name                                | Issuer ID                            |
| ---------------------------------------- | ------------------------------------ |
| Austrian Anadi Bank AG                   | 68db503b-ea48-4681-814b-10fc74064f68 |
| Bank Austria                             | bbd44f4d-609b-454e-8d5a-e0d1ac21f15a |
| bank99 AG                                | f848c582-1b94-4e13-b58e-b3a2c68a3fba |
| Bankhaus Carl Spängler & Co.AG           | d5639c17-0207-4d49-8708-922181135ad1 |
| BKS Bank AG                              | 7217d822-470c-4768-b346-a440e8cb7096 |
| BAWAG P.S.K. AG                          | 64669764-e6fc-401c-8f3d-26e9169ba6ff |
| BTV VIER LÄNDER BANK                     | a990a73b-3d6b-4d91-9b8a-856428089b34 |
| Dolomitenbank                            | b42dd796-8bda-4893-acc2-ddfae9c9cdb7 |
| Erste Bank und Sparkassen                | 1d48e2f7-604c-4d1d-894e-170635d1a645 |
| Easybank AG                              | 54016d9d-31b0-4db3-9eaf-cf9fbc58ee81 |
| HYPO-BANK BURGENLAND Aktiengesellschaft  | b3b1554f-c9ae-4396-a62f-baffb8a2de1c |
| HYPO NOE LB für Niederösterreich u. Wien | 9c92d29b-a898-488e-836f-e93b911f9a94 |
| HYPO Oberösterreich,Salzburg             | 89c79da1-1b75-41e2-9254-118f36231bbd |
| HYPO Tirol Bank AG                       | 31659756-fb43-4094-afd5-82980ff48750 |
| Hypo Vorarlberg Bank AG                  | 880cc8c4-d723-49ab-8299-dc35eafc9385 |
| Marchfelder Bank                         | 242209e6-a81f-48bc-9041-a31306cb153f |
| Oberbank AG                              | 744d26da-90c9-49eb-9a0b-9a7f1fa3a8d2 |
| Österreichische Ärzte- und Apothekerbank | 69a67a81-7518-463f-8527-3f1128af1f93 |
| Posojilnica Bank eGen                    | 65ef4682-4944-499f-828f-5d74ad288376 |
| Raiffeisen Bankengruppe Österreich       | 09350598-7ba4-4afb-b706-843e49a64759 |
| Schelhammer Capital Bank AG              | c522e299-479c-4134-849f-a6ef0399a6e0 |
| Schoellerbank AG                         | 3ed7da63-0924-424c-a822-2a0dfaaadce1 |
| Sparda Bank Wien                         | cc4a034e-f8a1-4ce4-a96b-1cd251af03b5 |
| Volksbanken                              | 479ff5d2-6f44-4921-9330-6bf6763806e9 |
| Volkskreditbank AG                       | 43b3af24-7969-4701-a7ce-1f9fc6eef834 |

### Recurring

## Recurring payments

We support recurring transactions for EPS through [SEPA Direct Debit](/payment-methods/sepa-direct-debit). To make recurring payments, you need to:

1. [Create a shopper token](#create-a-token).
2. [Use the token to make future payments for the shopper](#make-payment-with-token).

### Create a token

We strongly recommend that you request explicit permission from the shopper if you intend to make recurring SEPA payments. Being transparent about the payment schedule and the charged amount reduces the risk of [chargebacks](/payment-methods/sepa-direct-debit/api-only#chargebacks).

To create a token, include in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request:

* `storePaymentMethod`: **true**
* [shopperReference](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-shopperReference): Your unique identifier for the shopper (minimum length three characters).

When the payment has been settled, you receive a [recurring.token.created](https://docs.adyen.com/api-explorer/Tokenization-webhooks/latest/post/recurring.token.created) [webhook](/development-resources/webhooks) containing:

* `type`: **recurring.token.created**
* `shopperReference`: your unique identifier for the shopper.
* `eventId`: the `pspReference` of the initial payment.
* `storedPaymentMethodId`: the token that you need to make recurring payments for this shopper.

Make sure that your server is able to receive the [Recurring tokens life cycle events](/development-resources/webhooks/webhook-types/#other-webhooks) webhook. You can [set up this webhook in your Customer Area](/development-resources/webhooks/#set-up-webhooks-in-your-customer-area).

### Make a payment with a token

To make a payment with the token, include in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request:

* `paymentMethod.storedPaymentMethodId`: The `storedPaymentMethodId` from the [recurring.token.created](https://docs.adyen.com/api-explorer/Tokenization-webhooks/latest/post/recurring.token.created) webhook.

You can also get this value using the [/listRecurringDetails](https://docs.adyen.com/api-explorer/Recurring/latest/post/listRecurringDetails) endpoint.

* `shopperReference`: The unique shopper identifier that you specified when creating the token (minimum length three characters).
* `shopperInteraction`: **ContAuth**.
* `recurringProcessingModel`: **Subscription** or **UnscheduledCardOnFile**.

For more information about the `shopperInteraction` and `recurringProcessingModel` fields, refer to [Tokenization](/online-payments/tokenization/).

## Test and go live

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

Before you can accept live EPS payments, you need to [submit a request for EPS](/payment-methods/add-payment-methods) 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 EPS in your Customer Area](/payment-methods/add-payment-methods).                                                                                                                                  |   |

### Import

## Import EPS

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

**Import**

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

### Initialize

## Initialize the Component for EPS

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

**Initialize the Component**

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

### List of issuer IDs

The available banks for EPS are different in the test and live environment:

#### Test payments

| Bank name      | Issuer ID                            |
| -------------- | ------------------------------------ |
| PSA Bank Group | b631e29a-097e-4400-be52-762b6d772b38 |

#### Live payments

| Bank name                                | Issuer ID                            |
| ---------------------------------------- | ------------------------------------ |
| Austrian Anadi Bank AG                   | 68db503b-ea48-4681-814b-10fc74064f68 |
| Bank Austria                             | bbd44f4d-609b-454e-8d5a-e0d1ac21f15a |
| bank99 AG                                | f848c582-1b94-4e13-b58e-b3a2c68a3fba |
| Bankhaus Carl Spängler & Co.AG           | d5639c17-0207-4d49-8708-922181135ad1 |
| BKS Bank AG                              | 7217d822-470c-4768-b346-a440e8cb7096 |
| BAWAG P.S.K. AG                          | 64669764-e6fc-401c-8f3d-26e9169ba6ff |
| BTV VIER LÄNDER BANK                     | a990a73b-3d6b-4d91-9b8a-856428089b34 |
| Dolomitenbank                            | b42dd796-8bda-4893-acc2-ddfae9c9cdb7 |
| Erste Bank und Sparkassen                | 1d48e2f7-604c-4d1d-894e-170635d1a645 |
| Easybank AG                              | 54016d9d-31b0-4db3-9eaf-cf9fbc58ee81 |
| HYPO-BANK BURGENLAND Aktiengesellschaft  | b3b1554f-c9ae-4396-a62f-baffb8a2de1c |
| HYPO NOE LB für Niederösterreich u. Wien | 9c92d29b-a898-488e-836f-e93b911f9a94 |
| HYPO Oberösterreich,Salzburg             | 89c79da1-1b75-41e2-9254-118f36231bbd |
| HYPO Tirol Bank AG                       | 31659756-fb43-4094-afd5-82980ff48750 |
| Hypo Vorarlberg Bank AG                  | 880cc8c4-d723-49ab-8299-dc35eafc9385 |
| Marchfelder Bank                         | 242209e6-a81f-48bc-9041-a31306cb153f |
| Oberbank AG                              | 744d26da-90c9-49eb-9a0b-9a7f1fa3a8d2 |
| Österreichische Ärzte- und Apothekerbank | 69a67a81-7518-463f-8527-3f1128af1f93 |
| Posojilnica Bank eGen                    | 65ef4682-4944-499f-828f-5d74ad288376 |
| Raiffeisen Bankengruppe Österreich       | 09350598-7ba4-4afb-b706-843e49a64759 |
| Schelhammer Capital Bank AG              | c522e299-479c-4134-849f-a6ef0399a6e0 |
| Schoellerbank AG                         | 3ed7da63-0924-424c-a822-2a0dfaaadce1 |
| Sparda Bank Wien                         | cc4a034e-f8a1-4ce4-a96b-1cd251af03b5 |
| Volksbanken                              | 479ff5d2-6f44-4921-9330-6bf6763806e9 |
| Volkskreditbank AG                       | 43b3af24-7969-4701-a7ce-1f9fc6eef834 |

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

### Recurring

## Recurring payments

We support recurring transactions for EPS through [SEPA Direct Debit](/payment-methods/sepa-direct-debit). To make recurring payments, you need to:

1. [Create a shopper token](#create-a-token).
2. [Use the token to make future payments for the shopper](#make-payment-with-token).

### Create a token

We strongly recommend that you request explicit permission from the shopper if you intend to make recurring SEPA payments. Being transparent about the payment schedule and the charged amount reduces the risk of [chargebacks](/payment-methods/sepa-direct-debit/api-only#chargebacks).

To create a token, include in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request:

* `storePaymentMethod`: **true**
* [shopperReference](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-shopperReference): Your unique identifier for the shopper (minimum length three characters).

When the payment has been settled, you receive a [recurring.token.created](https://docs.adyen.com/api-explorer/Tokenization-webhooks/latest/post/recurring.token.created) [webhook](/development-resources/webhooks) containing:

* `type`: **recurring.token.created**
* `shopperReference`: your unique identifier for the shopper.
* `eventId`: the `pspReference` of the initial payment.
* `storedPaymentMethodId`: the token that you need to make recurring payments for this shopper.

Make sure that your server is able to receive the [Recurring tokens life cycle events](/development-resources/webhooks/webhook-types/#other-webhooks) webhook. You can [set up this webhook in your Customer Area](/development-resources/webhooks/#set-up-webhooks-in-your-customer-area).

### Make a payment with a token

To make a payment with the token, include in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request:

* `paymentMethod.storedPaymentMethodId`: The `storedPaymentMethodId` from the [recurring.token.created](https://docs.adyen.com/api-explorer/Tokenization-webhooks/latest/post/recurring.token.created) webhook.

You can also get this value using the [/listRecurringDetails](https://docs.adyen.com/api-explorer/Recurring/latest/post/listRecurringDetails) endpoint.

* `shopperReference`: The unique shopper identifier that you specified when creating the token (minimum length three characters).
* `shopperInteraction`: **ContAuth**.
* `recurringProcessingModel`: **Subscription** or **UnscheduledCardOnFile**.

For more information about the `shopperInteraction` and `recurringProcessingModel` fields, refer to [Tokenization](/online-payments/tokenization/).

## Test and go live

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

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