---
title: "BLIK Web Component"
description: "Add BLIK to an existing Components integration."
url: "https://docs.adyen.com/payment-methods/blik/web-component"
source_url: "https://docs.adyen.com/payment-methods/blik/web-component.md"
canonical: "https://docs.adyen.com/payment-methods/blik/web-component"
last_modified: "2020-10-06T17:03:00+02:00"
language: "en"
---

# BLIK Web Component

Add BLIK to an existing Components integration.

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

This page explains how to add BLIK to your existing Web Components integration.

## Requirements

| Requirement          | Description                                                                                                                                                                                                                                                                                                        |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Integration type** | Make sure that you have built your [Components integration](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components%2F%3Ftarget%3D_blank). BLIK for Web requires at least v3.9.0 of Components. For more information, refer to [Release notes](/online-payments/release-notes). |
| **Setup steps**      | Before you begin, [add BLIK in your test Customer Area](/payment-methods/add-payment-methods).                                                                                                                                                                                                                     |

## 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 BLIK:

```js
import { AdyenCheckout, Blik } from '@adyen/adyen-web'
```

## 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
 <div id="blik-container"></div>
```

### 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  = new Blik(checkout).mount('#blik-container');
```

**

#### v5.x.x or earlier

Use the `create` method of your `AdyenCheckout` instance, in this case `checkout`, to create the Component:

```js
const Component = checkout.create('blik').mount('#blik-container');
```

## API reference

Include fields for the endpoint you integrated:

### Tab: `/sessions`

You do not need to send additional fields for BLIK. To see optional fields that you can send for all payment methods, see:

* [/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.

## Test and go live

To test a BLIK with code payment:

* Use BLIK code 777213.
* Make sure your implementation satisfies BLIK’s guidelines.
* Test your integration end-to-end.

### Going live

Before you can accept live BLIK payments, you need to add BLIK in your live Customer Area.

### Tab: `/payments`

You must include the following additional fields when making a [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request with BLIK:

**

#### BLIK with code

To show BLIK in your payment form, you need to:

1. Show BLIK as an available payment method.
2. Include a field where the shopper can enter the `blikCode` for their corresponding payment.

In your [/paymentMethods](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods) request, specify:

* [countryCode](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods): **PL**
* [amount.currency](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods#request-amount): **PLN**
* [amount.value](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods#request-amount): The value of the payment, in minor units.

The response contains `paymentMethod.type`: **blik**. The response contains `paymentMethod.type`: **blik** and `storedPaymentMethods.type`: **blik** (if your shopper already signed up for BLIK One Click in one of the previous BLIK transactions).

## Make a payment

In your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request, specify:

* `paymentMethod.type`: **blik**
* `paymentMethod.blikCode`: The 6-digit `blikCode` that the shopper entered at checkout.

#### curl

```bash
curl https://checkout-test.adyen.com/v68/payments \
-H 'x-api-key: ADYEN_API_KEY' \
-H 'content-type: application/json' \
-d '{
  "merchantAccount":"ADYEN_MERCHANT_ACCOUNT",
  "reference":"YOUR_ORDER_NUMBER",
  "amount":{
      "currency":"PLN",
      "value":1000
  },
  "paymentMethod":{
      "type":"blik",
      "blikCode":"777987"
  },
  "countryCode":"PL"
}'
```

#### Java

```java
// Adyen Java API Library v27.0.0
import com.adyen.Client;
import com.adyen.enums.Environment;
import com.adyen.model.checkout.*;
import java.time.OffsetDateTime;
import java.util.*;
import com.adyen.model.RequestOptions;
import com.adyen.service.checkout.*;

// For the live environment, additionally include your liveEndpointUrlPrefix.
Client client = new Client("ADYEN_API_KEY", Environment.TEST);

// Create the request object(s)
Amount amount = new Amount()
  .currency("PLN")
  .value(1000L);

BlikDetails blikDetails = new BlikDetails()
  .type(BlikDetails.TypeEnum.BLIK)
  .blikCode("777987");

PaymentRequest paymentRequest = new PaymentRequest()
  .reference("YOUR_ORDER_NUMBER")
  .amount(amount)
  .merchantAccount("ADYEN_MERCHANT_ACCOUNT")
  .countryCode("PL")
  .paymentMethod(new CheckoutPaymentMethod(blikDetails));

// Send the request
PaymentsApi service = new PaymentsApi(client);
PaymentResponse response = service.payments(paymentRequest, new RequestOptions().idempotencyKey("UUID"));
```

#### PHP

```php
// Adyen PHP API Library v19.0.0
use Adyen\Client;
use Adyen\Environment;
use Adyen\Model\Checkout\Amount;
use Adyen\Model\Checkout\CheckoutPaymentMethod;
use Adyen\Model\Checkout\PaymentRequest;
use Adyen\Service\Checkout\PaymentsApi;

$client = new Client();
$client->setXApiKey("ADYEN_API_KEY");
// For the live environment, additionally include your liveEndpointUrlPrefix.
$client->setEnvironment(Environment::TEST);


// Create the request object(s)
$amount = new Amount();
$amount
  ->setCurrency("PLN")
  ->setValue(1000);

$checkoutPaymentMethod = new CheckoutPaymentMethod();
$checkoutPaymentMethod
  ->setType("blik")
  ->setBlikCode("777987");

$paymentRequest = new PaymentRequest();
$paymentRequest
  ->setReference("YOUR_ORDER_NUMBER")
  ->setAmount($amount)
  ->setMerchantAccount("ADYEN_MERCHANT_ACCOUNT")
  ->setCountryCode("PL")
  ->setPaymentMethod($checkoutPaymentMethod);

$requestOptions['idempotencyKey'] = 'UUID';

// Send the request
$service = new PaymentsApi($client);
$response = $service->payments($paymentRequest, $requestOptions);
```

#### C\#

```cs
// Adyen .net API Library v17.0.0
using Adyen;
using Environment = Adyen.Model.Environment;
using Adyen.Model;
using Adyen.Model.Checkout;
using Adyen.Service.Checkout;

// For the live environment, additionally include your liveEndpointUrlPrefix.
var config = new Config()
{
    XApiKey = "ADYEN_API_KEY",
    Environment = Environment.Test
};
var client = new Client(config);

// Create the request object(s)
Amount amount = new Amount
{
  Currency = "PLN",
  Value = 1000
};

BlikDetails blikDetails = new BlikDetails
{
  Type = BlikDetails.TypeEnum.Blik,
  BlikCode = "777987"
};

PaymentRequest paymentRequest = new PaymentRequest
{
  Reference = "YOUR_ORDER_NUMBER",
  Amount = amount,
  MerchantAccount = "ADYEN_MERCHANT_ACCOUNT",
  CountryCode = "PL",
  PaymentMethod = new CheckoutPaymentMethod(blikDetails)
};

// Send the request
var service = new PaymentsService(client);
var response = service.Payments(paymentRequest, requestOptions: new RequestOptions { IdempotencyKey = "UUID"});
```

#### NodeJS (JavaScript)

```js
// Adyen Node API Library v18.0.0
// Require the parts of the module you want to use
const { Client, CheckoutAPI } = require('@adyen/api-library');
// Initialize the client object
// For the live environment, additionally include your liveEndpointUrlPrefix.
const client = new Client({apiKey: "ADYEN_API_KEY", environment: "TEST"});

// Create the request object(s)
const paymentRequest = {
  merchantAccount: "ADYEN_MERCHANT_ACCOUNT",
  reference: "YOUR_ORDER_NUMBER",
  amount: {
    currency: "PLN",
    value: 1000
  },
  paymentMethod: {
    type: "blik",
    blikCode: "777987"
  },
  countryCode: "PL"
}

// Send the request
const checkoutAPI = new CheckoutAPI(client);
const response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: "UUID" });
```

#### Go

```go
// Adyen Go API Library v10.4.0
import (
  "context"
  "github.com/adyen/adyen-go-api-library/v9/src/common"
  "github.com/adyen/adyen-go-api-library/v9/src/adyen"
  "github.com/adyen/adyen-go-api-library/v9/src/checkout"
)
// For the live environment, additionally include your liveEndpointUrlPrefix.
client := adyen.NewClient(&common.Config{
  ApiKey:      "ADYEN_API_KEY",
  Environment: common.TestEnv,
})

// Create the request object(s)
amount := checkout.Amount{
  Currency: "PLN",
  Value: 1000,
}

blikDetails := checkout.BlikDetails{
  Type: common.PtrString("blik"),
  BlikCode: common.PtrString("777987"),
}

paymentRequest := checkout.PaymentRequest{
  Reference: "YOUR_ORDER_NUMBER",
  Amount: amount,
  MerchantAccount: "ADYEN_MERCHANT_ACCOUNT",
  CountryCode: common.PtrString("PL"),
  PaymentMethod: checkout.BlikDetailsAsCheckoutPaymentMethod(&blikDetails),
}

// Send the request
service := client.Checkout()
req := service.PaymentsApi.PaymentsInput().IdempotencyKey("UUID").PaymentRequest(paymentRequest)
res, httpRes, err := service.PaymentsApi.Payments(context.Background(), req)
```

#### Python

```py
# Adyen Python API Library v12.5.1
import Adyen

adyen = Adyen.Adyen()
adyen.client.xapikey = "ADYEN_API_KEY"
# For the live environment, additionally include your liveEndpointUrlPrefix.
adyen.client.platform = "test" # The environment to use library in.

# Create the request object(s)
json_request = {
  "merchantAccount": "ADYEN_MERCHANT_ACCOUNT",
  "reference": "YOUR_ORDER_NUMBER",
  "amount": {
    "currency": "PLN",
    "value": 1000
  },
  "paymentMethod": {
    "type": "blik",
    "blikCode": "777987"
  },
  "countryCode": "PL"
}

# Send the request
result = adyen.checkout.payments_api.payments(request=json_request, idempotency_key="UUID")
```

#### Ruby

```rb
# Adyen Ruby API Library v9.1.0
require "adyen-ruby-api-library"

adyen = Adyen::Client.new
adyen.api_key = 'YOUR_X_API_KEY'
adyen.env = :test # Set to "live" for live environment

request_body = {
  :merchantAccount => 'YOUR_MERCHANT_ACCOUNT',
  :reference => 'YOUR_ORDER_NUMBER',
  :amount => {
    :currency => 'PLN',
    :value => 1000
  },
  :paymentMethod => {
    :type => 'blik',
    :blikCode => '777987'
  },
  :countryCode => 'PL'
}

result = adyen.checkout.payments_api.payments(request_body, headers: { 'Idempotency-Key' => 'UUID' })
```

#### NodeJS (TypeScript)

```ts
// Adyen Node API Library v18.0.0
// Require the parts of the module you want to use
import { Client, CheckoutAPI, Types } from "@adyen/api-library";
// Initialize the client object
// For the live environment, additionally include your liveEndpointUrlPrefix.
const client = new Client({apiKey: "ADYEN_API_KEY", environment: "TEST"});

// Create the request object(s)
const amount: Types.checkout.Amount = {
  currency: "PLN",
  value: 1000
};

const blikDetails: Types.checkout.BlikDetails = {
  type: Types.checkout.BlikDetails.TypeEnum.Blik,
  blikCode: "777987"
};

const paymentRequest: Types.checkout.PaymentRequest = {
  reference: "YOUR_ORDER_NUMBER",
  amount: amount,
  merchantAccount: "ADYEN_MERCHANT_ACCOUNT",
  countryCode: "PL",
  paymentMethod: blikDetails
};

// Send the request
const checkoutAPI = new CheckoutAPI(client);
const response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: "UUID" });
```

The [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) response contains:

* `resultCode`: **Pending** (The shopper must complete the payment in their BLIK app.)
* `action`: Use this object to display the waiting screen while the shopper completes the payment in their BLIK app.

**/payments response**

```json
{
    "resultCode": "Pending",
    "action": {
        "paymentData": "Ab02b4c0!BQABAg...",
        "paymentMethodType": "blik",
        "type": "{hint:Wait for the webhook to know the payment outcome.}await{/hint}"
    },
    "paymentData": "Ab02b4c0!BQABAg..."
}
```

## Show the waiting screen

1. Show a waiting screen to the shopper, telling them you are waiting for them to complete the payment.
2. Check your [webhooks](/development-resources/webhooks) to see the payment result.\
   We send you an AUTHORISATION webhook after the shopper completes the payment in their BLIK app.
3. Once you receive the webhook, redirect them to your website, and [present the payment result](#present-the-payment-result).

## Present the payment result

Use the `resultCode` that you received in the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) response to inform your shopper of the payment status.

The `resultCode` values you can receive for payments made through are:

| resultCode  | Action to take                                                                                                          |
| ----------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Pending** | Show the waiting screen to the shopper, informing them that they have to go to their bank app to complete the payment.  |
| **Refused** | Inform the shopper that the payment is refused, for example, because of incorrect `blikCode` value.                     |

[]()Wait for webhooks to know the outcome of the payment. The webhooks you can receive for are:

| eventCode         | success field | Description                                     | Action to take                                                                      |
| ----------------- | ------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------- |
| **AUTHORISATION** | **false**     | The transaction failed.                         | Cancel the order and inform the shopper that the payment failed.                    |
| **AUTHORISATION** | **true**      | The shopper successfully completed the payment. | Inform the shopper that the payment has been successful and proceed with the order. |

## Test and go live

To test a BLIK with code payment:

* Use BLIK code 777213.
* Make sure your implementation satisfies BLIK’s guidelines.
* Test your integration end-to-end.

### Going live

Before you can accept live BLIK payments, you need to add BLIK in your live Customer Area.

**

#### BLIK OneClick

In your [/paymentMethods](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods) request, specify:

* [countryCode](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods): **PL**
* [amount.currency](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods#request-amount): **PLN**
* `shopperReference`: Your unique reference for the shopper.

The response contains `paymentMethod.type`: **blik** and `storedPaymentMethods.type`: **blik**.

When rendering the BLIK without code make sure to include the `label` to ensure that the shopper recognises the linked issuer account.

## Make a payment

In your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request, specify:

* `paymentMethod.type`: **blik**
* `paymentMethod.blikCode`: The 6-digit `blikCode` that the shopper entered at checkout.

Include the following parameters to request the shopper to give consent for future BLIK payments to proceed without the 6-digit code:

* `shopperReference`: Your unique identifier for the shopper.
* `storePaymentMethod`: **true**
* `recurringProcessingModel`: **CardOnFile**

```bash
curl https://checkout-test.adyen.com/v68/payments \
-H 'x-api-key: ADYEN_API_KEY' \
-H 'content-type: application/json' \
-d '{
  "merchantAccount":"ADYEN_MERCHANT_ACCOUNT",
  "reference":"YOUR_ORDER_NUMBER",
  "shopperReference": "UNIQUE_SHOPPER_IDENTIFIER",
  "storePaymentMethod": "true",
  "recurringProcessingModel": "CardOnFile"
  "amount":{
      "currency":"PLN",
      "value":1000
  },
  "paymentMethod":{
      "type":"blik",
      "blikCode":"777987"
  },
  "countryCode":"PL"
}'
```

The [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) response contains:

* `resultCode`: **Pending** (The shopper must complete the payment in their BLIK app.)
* `action`: Use this object to display the waiting screen while the shopper completes the payment in their BLIK app.

**/payments response**

```json
{
    "resultCode": "Pending",
    "action": {
        "paymentData": "Ab02b4c0!BQABAg...",
        "paymentMethodType": "blik",
        "type": "{hint:Wait for the webhook to know the payment outcome.}await{/hint}"
    },
    "paymentData": "Ab02b4c0!BQABAg..."
}
```

## Show the waiting screen

1. Show a waiting screen to the shopper, telling them you are waiting for them to complete the payment.
2. Check your [webhooks](/development-resources/webhooks) to see the payment result.\
   We send you an AUTHORISATION webhook after the shopper completes the payment in their BLIK app.
3. Once you receive the webhook, redirect them to your website, and [present the payment result](#present-the-payment-result).

## Present the payment result

Use the `resultCode` that you received in the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) response to inform your shopper of the payment status.

The `resultCode` values you can receive for payments made through are:

| resultCode  | Action to take                                                                                                          |
| ----------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Pending** | Show the waiting screen to the shopper, informing them that they have to go to their bank app to complete the payment.  |
| **Refused** | Inform the shopper that the payment is refused, for example, because of incorrect `blikCode` value.                     |

[]()Wait for webhooks to know the outcome of the payment. The webhooks you can receive for are:

| eventCode         | success field | Description                                     | Action to take                                                                      |
| ----------------- | ------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------- |
| **AUTHORISATION** | **false**     | The transaction failed.                         | Cancel the order and inform the shopper that the payment failed.                    |
| **AUTHORISATION** | **true**      | The shopper successfully completed the payment. | Inform the shopper that the payment has been successful and proceed with the order. |

If the shopper gave consent to make future payments without a BLIK code, you will also receive a [Recurring tokens life cycle](/online-payments/tokenization/create-tokens#enable-the-webhook) webhook with type `recurring.token.created`. Make sure to enable the [Recurring tokens life cycle](/development-resources/webhooks/webhook-types#other-webhooks) webhook in your Customer Area.

This webhook contains:

* `storedPaymentMethodId`: the ID of the token that was created.
* `eventId`: the PSP reference of the transaction.
* `shopperReference`: your unique shopper reference. Use this to associate the shopper with the token and the payment.

To let your shopper identify the specific issuer in case they have used BLIK on multiple issuer apps, you need the BLIK app label. To get this value, make a [/paymentMethods](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods) request. The response contains the `additionalData.BLIK.APP_LABEL` field.

**Example additionalData object in the /paymentMethods response**

```bash
"additionalData" : {
   "Blik.APP_LABEL" : "PKO BP - 795***925",
   "Blik.EXPIRATION_DATE" : "2026-02-26 00:00:00",
   "tokenization.shopperReference" : "YOUR_SHOPPER_REFERENCE",
   "tokenization.storedPaymentMethodId": "M5N7TQ4TG5PFWR50",
   "acquirerAccountCode" : "YOUR_ACQUIRER_ACCOUNT_CODE"

}
```

## Test and go live

To test a BLIK One Click payment:

* Use BLIK code 777213.
* Make sure your implementation satisfies BLIK’s guidelines.
* Test your integration end-to-end.

### Going live

Before you can accept live BLIK payments:

* Reach out to BLIK for certification and enablement at products\@blik.com.
* Add BLIK 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)
