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.
Supported countries/regions
Adyen's components are generally available for users operating in all countries and regions where Adyen for Platforms is supported.
However, some components, such as those for business financing, are limited to specific countries and regions.
Component libraries
Adyen will add more components to improve your integration experience. See our roadmap for the planned timeline.
The available components are grouped based on their location in the payment process, such as before, during, and after the payment. This way, you can quickly find the appropriate component to implement into your user flow.
After your users have accepted payments, they can easily view their transactional data through dashboards created with the Platform Experience components. These components enable users to monitor their funds as they flow through your platform, including transactions within their balance accounts and payouts to their bank accounts.
Additionally, you can use the Platform Experience components to integrate all the necessary features to offer business financing to your users.
Transactions Overview
The Transactions Overview component enables users to filter and view a list of transactions, showing the total incoming and outgoing funds of a specific balance account. This overview provides details such as the date and time, payment method, transaction type, and amount. Additionally, the component allows for custom data integration, such as your own fields, icons, links, and buttons.
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.
Payouts Overview
The Payouts Overview component enables users to filter and view a list of automatic payouts of a specific balance account. The payouts overview shows details such as the date and time, funds captured, total adjustments, and net payout. Additionally, the component allows for custom data integration, such as your own fields, icons, links, and buttons.
Payout Details
The Payout Details component shows detailed information about a payout, including the date and time, breakdown of captured funds and adjustments, net payout amount, and any remaining amount in the balance account (if available). Additionally, the component allows for custom data integration, such as your own fields, icons, links, and buttons.
By default, the component is part of the Payouts Overview component.
Reports Overview
The Reports Overview component enables users to filter and download available reports for a specific balance account. The report data is automatically generated every day, so users always have access to the most current data. Additionally, the component allows for custom data integration, such as your own fields, icons, links, and buttons.
Capital Overview
The Capital Overview component enables users to access detailed information about a grant, including its current status, the term sheet, and the repayment progress. The component prompts users to sign the Terms of Service to secure their grant. It also provides an option to view bank account details needed to send unscheduled repayments to pay back the grant early or to catch up if behind schedule.
Capital Offer
The Capital Offer component provides the maximum grant amount users qualify for and a preliminary term sheet, enabling users to apply for a grant.
Roadmap
| Component | Release timeline |
|---|---|
| Disputes Management | H1 2025 |
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:
- The user logs in to your platform.
- Your server validates the user and creates a session token that includes their required user roles.
- Your client then creates an instance of the component using the session token from the server.
- 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. Specific components may require additional steps or conditions. See the respective integration guides for more information.
- Create an authentication session from your server.
- Install the component library on your front end.
- Initialize the component(s).
- Customize the components to match your platform's look and feel.
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.