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

# Web Component

Add Online Banking India to your Components integration.

[View source](/payment-methods/online-banking-india/web-component.md)

How you add Online Banking India depends on your integration.

Choose 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 Online Banking India 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 Online Banking India

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

**Import**

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

### Add-Configuration

## Add additional configuration for Online Banking India

You do not need to add any configuration parameters for Online Banking India.

### Initialize

## Initialize the Component for Online Banking India

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

**Initialize the Component**

```javascript
const onlinebanking_INComponent = newOnlineBankingIN(checkout,
    {
    
    // The configuration object for Online Banking India that you created.
    
    // Mount the Component to a container.
    } ).mount('#onlinebanking_IN-container') 
```

## Test and go live

To test Netbanking offered in India, use the [MyStore demo](https://www.mystoredemo.io/). At the bottom-right of the screen, select **India**.

Before you can accept live Online banking India payments, you need to submit a request for Online banking India 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).                                               |   |
| **Checkout API**      | Make sure that you use Checkout API v or later.                                                                                                                                                                           |   |
| **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 Online Banking India in your Customer Area](/payment-methods/add-payment-methods).                                                                                                                 |   |

### Import

## Import Online Banking India

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

**Import**

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

### Add-Configuration

## Add additional configuration for Online Banking India

You do not need to add any configuration parameters for Online Banking India.

### Initialize

## Initialize the Component for Online Banking India

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

**Initialize the Component**

```javascript
const onlinebanking_INComponent = newOnlineBankingIN(checkout,
    {
    
    // The configuration object for Online Banking India that you created.
    
    // Mount the Component to a container.
    } ).mount('#onlinebanking_IN-container') 
```

### Add-Parameters-Payments-Request

## Add additional parameters to your /payments request

When you [make a payment](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#make-a-payment), add the following parameters to the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request:

| Parameter                                                                                            | Required                                                                                    | Description                                 |
| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------- |
| `paymentMethod.issuer`                                                                               | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The issuing bank that the shopper selected. |
| [browserInfo](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-browserInfo) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's browser information.          |

**request**

#### curl

```bash
curl https://checkout-test.adyen.com/v72/payments \
-H 'x-api-key: ADYEN_API_KEY' \
-H 'content-type: application/json' \
-d '{
  "merchantAccount":"ADYEN_MERCHANT_ACCOUNT",
  "reference":"YOUR_ORDER_NUMBER",
  "amount":{
    "currency":"INR",
    "value":1000
  },
  "paymentMethod":{
    "type":"onlinebanking_IN",
    "issuer":"CBI"
  },
  "returnUrl":"https://your-company.example.com/checkout?shopperOrder=12xy..",
  "browserInfo" : {
          "acceptHeader" : "*\/*",
          "colorDepth" : 24,
          "javaEnabled" : false,
          "language" : "en-US",
          "screenHeight" : 1440,
          "screenWidth" : 2560,
          "timeZoneOffset" : -330,
          "userAgent" : "Mozilla\/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/141.0.0.0 Safari\/537.36"
  }
}'
```

#### Java

```java
// Adyen Java API Library v40.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, also include your liveEndpointUrlPrefix.
Client client = new Client("ADYEN_API_KEY", Environment.TEST);

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

GenericIssuerPaymentMethodDetails genericIssuerPaymentMethodDetails = new GenericIssuerPaymentMethodDetails()
  .type(GenericIssuerPaymentMethodDetails.TypeEnum.ONLINEBANKING_IN)
  .issuer("CBI");

BrowserInfo browserInfo = new BrowserInfo()
  .acceptHeader("*/*")
  .screenWidth(2560)
  .javaEnabled(false)
  .screenHeight(1440)
  .timeZoneOffset(-330)
  .language("en-US")
  .userAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36")
  .colorDepth(24);

PaymentRequest paymentRequest = new PaymentRequest()
  .reference("YOUR_ORDER_NUMBER")
  .amount(amount)
  .merchantAccount("ADYEN_MERCHANT_ACCOUNT")
  .paymentMethod(new CheckoutPaymentMethod(genericIssuerPaymentMethodDetails))
  .returnUrl("https://your-company.example.com/checkout?shopperOrder=12xy..")
  .browserInfo(browserInfo);

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

#### PHP

```php
<?php
// Adyen PHP API Library v28.3.0
use Adyen\Client;
use Adyen\Environment;
use Adyen\Model\Checkout\Amount;
use Adyen\Model\Checkout\CheckoutPaymentMethod;
use Adyen\Model\Checkout\BrowserInfo;
use Adyen\Model\Checkout\PaymentRequest;
use Adyen\Service\Checkout\PaymentsApi;

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


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

$checkoutPaymentMethod = new CheckoutPaymentMethod();
$checkoutPaymentMethod
  ->setType("onlinebanking_IN")
  ->setIssuer("CBI");

$browserInfo = new BrowserInfo();
$browserInfo
  ->setAcceptHeader("*/*")
  ->setScreenWidth(2560)
  ->setJavaEnabled(false)
  ->setScreenHeight(1440)
  ->setTimeZoneOffset(-330)
  ->setLanguage("en-US")
  ->setUserAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36")
  ->setColorDepth(24);

$paymentRequest = new PaymentRequest();
$paymentRequest
  ->setReference("YOUR_ORDER_NUMBER")
  ->setAmount($amount)
  ->setMerchantAccount("ADYEN_MERCHANT_ACCOUNT")
  ->setPaymentMethod($checkoutPaymentMethod)
  ->setReturnUrl("https://your-company.example.com/checkout?shopperOrder=12xy..")
  ->setBrowserInfo($browserInfo);

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

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

#### C\#

```cs
// Adyen .NET API Library v32.2.1
using Adyen;
using Environment = Adyen.Model.Environment;
using Adyen.Model;
using Adyen.Model.Checkout;
using Adyen.Service.Checkout;

// For the LIVE environment, also 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 = "INR",
  Value = 1000
};

GenericIssuerPaymentMethodDetails genericIssuerPaymentMethodDetails = new GenericIssuerPaymentMethodDetails
{
  Type = GenericIssuerPaymentMethodDetails.TypeEnum.OnlinebankingIN,
  Issuer = "CBI"
};

BrowserInfo browserInfo = new BrowserInfo
{
  AcceptHeader = "*/*",
  ScreenWidth = 2560,
  JavaEnabled = false,
  ScreenHeight = 1440,
  TimeZoneOffset = -330,
  Language = "en-US",
  UserAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36",
  ColorDepth = 24
};

PaymentRequest paymentRequest = new PaymentRequest
{
  Reference = "YOUR_ORDER_NUMBER",
  Amount = amount,
  MerchantAccount = "ADYEN_MERCHANT_ACCOUNT",
  PaymentMethod = new CheckoutPaymentMethod(genericIssuerPaymentMethodDetails),
  ReturnUrl = "https://your-company.example.com/checkout?shopperOrder=12xy..",
  BrowserInfo = browserInfo
};

// 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 v30.0.0
const { Client, CheckoutAPI } = require('@adyen/api-library');

// For the LIVE environment, also include your liveEndpointUrlPrefix.
const config = new Config({
  apiKey: "ADYEN_API_KEY",
  environment: EnvironmentEnum.TEST
});

const client = new Client(config);

// Create the request object(s)
const paymentRequest = {
  merchantAccount: "ADYEN_MERCHANT_ACCOUNT",
  reference: "YOUR_ORDER_NUMBER",
  amount: {
    currency: "INR",
    value: 1000
  },
  paymentMethod: {
    type: "onlinebanking_IN",
    issuer: "CBI"
  },
  returnUrl: "https://your-company.example.com/checkout?shopperOrder=12xy..",
  browserInfo: {
    acceptHeader: "*/*",
    colorDepth: 24,
    javaEnabled: false,
    language: "en-US",
    screenHeight: 1440,
    screenWidth: 2560,
    timeZoneOffset: -330,
    userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36"
  }
}

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

#### Go

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

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

genericIssuerPaymentMethodDetails := checkout.GenericIssuerPaymentMethodDetails{
  Type: "onlinebanking_IN",
  Issuer: "CBI",
}

browserInfo := checkout.BrowserInfo{
  AcceptHeader: "*/*",
  ScreenWidth: 2560,
  JavaEnabled: false,
  ScreenHeight: 1440,
  TimeZoneOffset: -330,
  Language: "en-US",
  UserAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36",
  ColorDepth: 24,
}

paymentRequest := checkout.PaymentRequest{
  Reference: "YOUR_ORDER_NUMBER",
  Amount: amount,
  MerchantAccount: "ADYEN_MERCHANT_ACCOUNT",
  PaymentMethod: checkout.GenericIssuerPaymentMethodDetailsAsCheckoutPaymentMethod(&genericIssuerPaymentMethodDetails),
  ReturnUrl: "https://your-company.example.com/checkout?shopperOrder=12xy..",
  BrowserInfo: &browserInfo,
}

// 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 v13.6.0
import Adyen

adyen = Adyen.Adyen()
adyen.client.xapikey = "ADYEN_API_KEY"
# For the LIVE environment, also 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": "INR",
    "value": 1000
  },
  "paymentMethod": {
    "type": "onlinebanking_IN",
    "issuer": "CBI"
  },
  "returnUrl": "https://your-company.example.com/checkout?shopperOrder=12xy..",
  "browserInfo": {
    "acceptHeader": "*/*",
    "colorDepth": 24,
    "javaEnabled": False,
    "language": "en-US",
    "screenHeight": 1440,
    "screenWidth": 2560,
    "timeZoneOffset": -330,
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36"
  }
}

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

#### Ruby

```rb
# Adyen Ruby API Library v11.0.0
require "adyen-ruby-api-library"

adyen = Adyen::Client.new
adyen.api_key = 'ADYEN_API_KEY'
# For the LIVE environment, also include your liveEndpointUrlPrefix.
adyen.env = :test # Set to "live" for live environment

# Create the request object(s)
request_body = {
  :merchantAccount => 'ADYEN_MERCHANT_ACCOUNT',
  :reference => 'YOUR_ORDER_NUMBER',
  :amount => {
    :currency => 'INR',
    :value => 1000
  },
  :paymentMethod => {
    :type => 'onlinebanking_IN',
    :issuer => 'CBI'
  },
  :returnUrl => 'https://your-company.example.com/checkout?shopperOrder=12xy..',
  :browserInfo => {
    :acceptHeader => '*/*',
    :colorDepth => 24,
    :javaEnabled => false,
    :language => 'en-US',
    :screenHeight => 1440,
    :screenWidth => 2560,
    :timeZoneOffset => -330,
    :userAgent => 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36'
  }
}

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

#### NodeJS (TypeScript)

```ts
// Adyen Node API Library v30.0.0
import { Client, CheckoutAPI, Types } from "@adyen/api-library";

// For the LIVE environment, also include your liveEndpointUrlPrefix.
const config = new Config({
  apiKey: "ADYEN_API_KEY",
  environment: EnvironmentEnum.TEST
});

const client = new Client(config);

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

const genericIssuerPaymentMethodDetails: Types.checkout.GenericIssuerPaymentMethodDetails = {
  type: Types.checkout.GenericIssuerPaymentMethodDetails.TypeEnum.OnlinebankingIn,
  issuer: "CBI"
};

const browserInfo: Types.checkout.BrowserInfo = {
  acceptHeader: "*/*",
  screenWidth: 2560,
  javaEnabled: false,
  screenHeight: 1440,
  timeZoneOffset: -330,
  language: "en-US",
  userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36",
  colorDepth: 24
};

const paymentRequest: Types.checkout.PaymentRequest = {
  reference: "YOUR_ORDER_NUMBER",
  amount: amount,
  merchantAccount: "ADYEN_MERCHANT_ACCOUNT",
  paymentMethod: genericIssuerPaymentMethodDetails,
  returnUrl: "https://your-company.example.com/checkout?shopperOrder=12xy..",
  browserInfo: browserInfo
};

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

## Test and go live

To test Netbanking offered in India, use the [MyStore demo](https://www.mystoredemo.io/). At the bottom-right of the screen, select **India**.

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