---
title: "Swish Web Component"
description: "Add Swish to your Components integration."
url: "https://docs.adyen.com/payment-methods/swish/web-component"
source_url: "https://docs.adyen.com/payment-methods/swish/web-component.md"
canonical: "https://docs.adyen.com/payment-methods/swish/web-component"
last_modified: "2026-05-25T12:55:01+02:00"
language: "en"
---

# Swish Web Component

Add Swish to your Components integration.

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

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

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

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

**Import**

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

### Add-Configuration

## Add additional configuration for Swish

You do not need to add any configuration parameters for Swish.

### Initialize

## Initialize the Component for Swish

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

**Initialize the Component**

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

## Test and go live

When you make a Swish payment in the test environment, the payment is authorised within 15 seconds. You can simulate different refusal scenarios, as outlined in the [Merchant Swish Simulator](https://developer.swish.nu/api/mss/v1), by adding the error code to the `shopperStatement` property. For example, `"shopperStatement": "FF08"`.

Check the status of Swish test payments in your **Customer Area** > **Transactions** > **Payments**.

To accept live Swish payments, you must [submit a request for Swish](/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).                                                   |   |
| **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`: **qr**. |   |
| **Setup steps**      | Before you begin, [add Swish in your Customer Area](/payment-methods/add-payment-methods).                                                                                                                                    |   |

### Import

## Import Swish

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

**Import**

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

### Initialize

## Initialize the Component for Swish

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

**Initialize the Component**

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

When you make a Swish payment in the test environment, the payment is authorised within 15 seconds. You can simulate different refusal scenarios, as outlined in the [Merchant Swish Simulator](https://developer.swish.nu/api/mss/v1), by adding the error code to the `shopperStatement` property. For example, `"shopperStatement": "FF08"`.

Check the status of Swish test payments in your **Customer Area** > **Transactions** > **Payments**.

To accept live Swish payments, you must [submit a request for Swish](/payment-methods/add-payment-methods) in your [live Customer Area](https://ca-live.adyen.com/).