Adyen-for-platform icon

Adyen for Platforms Components

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

Adyen for Platforms Components are prebuilt libraries that you can seamlessly integrate into your 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.

Components simplify the process of collecting user input for payments or during onboarding. You can also use components to showcase interactive dashboards to your users, such as an overview of transactions, payouts, or other reporting data.

For platform users, components are visual features in your UI that enable users to complete tasks, such as providing bank account details or viewing transactions and payouts.

Components are suitable for your platform if:

  • Your platform has a basic user interface where you can embed components.
  • Your platform's 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.

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.

Before you can accept payments on behalf of your users, you need to onboard them onto your platform and verify their identity and business information. To facilitate this process, you can use the Onboarding components. These components enable users to enter and submit their information to Adyen within your user interface.


Create Transfer Instrument

The Create Transfer Instrument 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.

Availability

For users operating in any of the countries and regions where Adyen for Platforms is supported, except for Hong Kong (beta) and New Zealand (beta).


Manage Transfer Instrument

The Manage Transfer Instrument 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.

Availability

For users operating in any of the countries and regions where Adyen for Platforms is supported, except for Hong Kong (beta) and New Zealand (beta).

Roadmap

The following is a list of Adyen for Platforms Components, their status, and planned timelines.

If you are interested in piloting new components, reach out to your Adyen contact.

Component Stage Release timeline
Create Transfer Instrument Available Q2 2024
Manage Transfer Instrument Available Q2 2024
Create Individual Planned H2 2024
Manage Individual Planned H2 2024

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:

  1. Gather resource IDs linked to the user, and determine which role is required for the use of the component. You then use these values to generate an authentication session token in the next step.
  2. Get an authentication session token for secure communication between backend and frontend.
  3. Install and import the npm package.
  4. Initialize the component.
  5. Customize the component to match your platform's look and feel.

Specific components may require additional steps or conditions. See the integration guides below for more information.

Supported browsers

The Components are compatible with the major browsers. Below are the minimum browser requirements:

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

Next steps