---
title: "Build your interface with UI component libraries"
description: "Discover prebuilt UI component libraries that simplify your integration with Adyen and reduce your time to launch."
url: "https://docs.adyen.com/issuing/components-overview"
source_url: "https://docs.adyen.com/issuing/components-overview.md"
canonical: "https://docs.adyen.com/issuing/components-overview"
last_modified: "2026-06-01T15:33:15+02:00"
language: "en"
---

# Build your interface with UI component libraries

Discover prebuilt UI component libraries that simplify your integration with Adyen and reduce your time to launch.

[View source](/issuing/components-overview.md)

Adyen's components are prebuilt libraries that you can seamlessly integrate into your platform’s user interface (UI). These components are designed to minimize your engineering investment while providing you with flexibility and control over the look and feel of the UI.

You can use our components for a variety of tasks, from collecting user data for payments or during onboarding to showcasing interactive dashboards for your users, such as an overview of transactions, payouts, and other reporting data.

Components are suitable for your platform if:

* It has a basic user interface where you can embed components.
* Its backend application has an API layer with which you can initialize components.

When using components, you can benefit from:

* **Ease of integration and low maintenance**. Components are ready-to-use libraries that require minimal code to initialize components.
* **Faster time to market**. Components eliminate the need for custom design and reduce developers' efforts for integration with Adyen.
* **Customizability**. You can change the look and feel of components to match your branding style.
* **Up-to-date functionality**. Components are developed to work efficiently with Adyen APIs, ensuring you stay updated with your Adyen integration.
* **Latest technologies and design trends**. Adyen uses modern frameworks to provide the best performance on the web and mobile and to be consistent with current design trends.

## Available components

The available components are grouped based on their location in the payment process, such as *before* and *after* the payment. This way, you can quickly find the appropriate component to implement into your user flow.

### Tab: Before the payment

Before you can start issuing cards, your account holders need to go through verification checks. Adyen performs the checks against the legal entity of the account holder. To facilitate this process, you can use the Onboarding components. These components enable users to enter and submit their information to Adyen in your platform's UI.

***

### Transfer Instrument Configuration

The **Transfer Instrument Configuration** component enables users to add information about their bank accounts, also known as transfer instruments. Users can either give us permission for instant verification of their bank account, or they upload documents that we then use to validate the bank account.

[![](/user/pages/reuse/pfs-components/component-libraries/transfer-instrument-configuration-thumbnail.jpg)](/user/pages/reuse/pfs-components/component-libraries/transfer-instrument-configuration-thumbnail.jpg)

***

### Transfer Instrument Management

The **Transfer Instrument Management** component enables users to add a new bank account (a transfer instrument) or delete an existing one that is no longer required. This component shows a list of all bank accounts that have been added, along with their corresponding verification statuses and error messages, if applicable.

[![](/user/pages/reuse/pfs-components/component-libraries/transfer-instrument-management-thumbnail.jpg)](/user/pages/reuse/pfs-components/component-libraries/transfer-instrument-management-thumbnail.jpg)

### Tab: After the payment

After your users have made payments with your cards, they can view their transactional data using the Platform Experience components.

***

### Transactions Overview

The **Transactions Overview** component enables users to filter and view transactions for specific balance accounts and timeframes. Each record details the date, payment method, transaction type, net amount, and gross amount, which can be exported as a CSV file for external analysis. The Insights tab offers analytical summaries that simplify financial reporting. Additionally, the component allows for custom data integration, such as your own fields, icons, links, and buttons.

[![](/user/pages/reuse/pfs-components/component-libraries/transactions-overview-thumbnail.png)](/user/pages/reuse/pfs-components/component-libraries/transactions-overview-thumbnail.png)

***

### Transaction Details

The **Transaction Details** component shows detailed information about a transaction, including its unique reference ID, the original amount, and any associated fees. Additionally, the component enables users to refund payments to their shoppers. The component also allows for custom data integration, such as your own fields, icons, links, and buttons.

By default, the component is part of the **Transactions Overview** component.

[![](/user/pages/reuse/pfs-components/component-libraries/transaction-details-thumbnail.png)](/user/pages/reuse/pfs-components/component-libraries/transaction-details-thumbnail.png)

## How it works

The integration of components involves both server-side and client-side processes. On the server side, a single API call is made to create a session token. On the client side, the component uses the session token obtained from the server to request necessary data and manage user interactions.

The simplified flow can be summarized as follows:

1. The user logs in to your platform.
2. Your server validates the user and creates a session token that includes their required user roles.
3. Your client then creates an instance of the component using the session token from the server.
4. The user interacts with the component to complete a needed task.

### Integration steps

The process of integrating components into your platform's UI is as follows. Some components may require additional steps or conditions. [See the respective integration guides](#next-steps) for more information.

1. Create an authentication session from your server.
2. Install component library in your front end.
3. Initialize component(s).
4. Customize component appearance to match your platform's look and feel.

## Supported countries/regions

Adyen's components are generally available for users operating in all [countries and regions where Adyen for Platforms is supported](/platforms#supported-countriesregions).

## Supported browsers

Our components work with all recent versions of major browsers. Here are the minimum browser requirements:

* Chrome version 98 (February 2022)
* Safari version 15.4 (March 2022)
* Firefox version 94 (November 2021)

We recommend using the latest available browser version to ensure you have the latest security updates.

## Next steps

[Onboarding components](/issuing/onboard-users/components)

[Speed up collecting user data during onboarding.](/issuing/onboard-users/components)

[Platform Experience components](/issuing/build-user-dashboards)

[Build interactive dashboards for your users.](/issuing/build-user-dashboards)
