Transfer instrument components

You can integrate the transfer instrument components in your user interface to let your marketplace’s users enter their bank account details. The components then use the entered data to create a transfer instrument resource, so you do not have to make any API calls yourself.

This page provides information on:

• The available transfer instrument components, which include the Create Transfer Instrument component and the Manage Transfer Instrument component.
• The steps needed to integrate these components into your marketplace.

Create Transfer Instrument component

The Create Transfer Instrument component enables users to add information about their bank accounts, also known as transfer instruments. Users can either give permission for the instant verification of their bank account, or upload documents which Adyen uses to validate the bank account.

Manage Transfer Instrument component

The Manage Transfer Instrument component enables users to view a list of all bank accounts (transfer instruments) that have been added, along with their corresponding verification statuses and error messages, if applicable.

Users can also add a new bank account or delete an existing one if it is no longer needed. Any changes made are applied immediately, ensuring that payouts are delivered to the correct transfer instrument. If a bank account still needs to be added, users will be prompted to do so when accessing the component. Learn how to use callback functions to create a complete user flow.

Requirements

Before integrating the components, make sure that you:

• Followed the API-only onboarding guide to complete all necessary steps before creating transfer instruments.
• Created API credentials for the Legal Entity Management API.
• Verified that the components are available in the languages and browser versions that apply to your situation.
• Reviewed our guidance on the verification process.

User flow and callback functions

When integrating components, you can use callback functions to link the two components into a single user flow.

• When integrating the Create Transfer Instrument component, you can include an onSubmitSuccess callback function. This function is triggered when the user submits their bank account details. It returns the submitted bank account information in a payload and loads the Manage Transfer Instrument component. This enables the user to view the provided bank account details and their verification status after submitting the information.
• When integrating the Manage Transfer Instrument component, you can include:
  • an onAdd callback function. This function is triggered when the user selects Add bank account, and it loads the Create Transfer Instrument component. This enables the user to enter their bank account details.
  • an onEditcallback function. This function is triggered when the user selects Edit details, and it loads the Create Transfer Instrument component. This enables the user to view their prefilled bank account details and any outstanding errors. The user can then update and submit the new information in the component.

See the example data for the onSubmitSuccess callback function below.

How it works

Follow these steps to integrate the transfer instrument components:

1. Create an authentication session token
2. Install and import the component library
3. Initialize the components
4. Customize the components

Step 1: Create an authentication session token

To ensure secure communication between your server and front end, a session token is required. To create a session token:

1. From your server, make a POST request to the /sessions endpoint of the Session authentication API using the API key that you set up for the Legal Entity Management API or the Configuration API.

   1. Use the following URLs for this API:

      Environment	API URL
      test	https://test.adyen.com/authe/api/v1/sessions
      live	https://authe-live.adyen.com/authe/api/v1/sessions

   2. In the request body, specify these parameters:

      Parameter	Required	Description	Example
      allowOrigin		The URL where the component will appear.	Must follow the format of https://www.yourcompany.com or https://*.yourcompany.com, where yourcompany.com is the actual web address of your marketplace. On live, only the HTTPS protocol is supported. An asterisk (*) cannot be used as a literal value for the parameter.
      product		The type of component.	Set this to onboarding.
      policy		An object that contains: resources: An object that contains: legalEntityId: The unique identifier of the legal entity that has the contractual relationship with your marketplace and owns the bank account. For sole proprietorships, this is the legal entity ID of the individual owner. type: The type of resource. Set this to legalEntity. roles: The role(s) required to use the component(s). Set this to createTransferInstrumentComponent and/or manageTransferInstrumentComponent.

   Here is an example request for creating a session token.

2. Note the API response. Later, when initializing the components, you need to create and call a function that passes the entire session object from the response to your front end. Additionally, you need to pass the token value to the sdkToken parameter.

Step 2: Install and import the component library

Use the Adyen KYC Components library in your front-ent application as follows:

1. Install the node package.

   npm install @adyen/kyc-components --save

2. Import the node package and the style sheet. To customize the component styling, see Step 4.

   import AdyenKyc from '@adyen/kyc-components';
   import '@adyen/kyc-components/styles.css';

Step 3: Initialize the components

To initialize components:

1. Gather the following information to be passed when initializing the library and its components.

   1. Gather these parameters to initialize the library.

      Parameter	Required	Description	Example
      locale		The language of the component. See the list of supported languages.	Use en-US for English.
      country		The two-letter ISO 3166-1 alpha-2 country code of the legal entity.	Use US for the United States of America.
      environment		The URL of the environment for the component integration.	Use https://test.adyen.com/ for the test environment and https://onboardingcomponents-live.adyen.com/ for the live environment.
      sdkToken		The token received from the create session token API response.
      getSdkToken		The function callback for refreshing/extending the current session.

   2. Gather these parameters to initialize each component.

      Select the tab for the component you want to use:

2. Create a DOM element on your UI page where you want the component to be rendered and assign it a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your UI.

   Select the tab for the component you want to use:

3. Add a function that calls your API to generate a new authentication session token.

   Select the tab for the component you want to use:

4. Initialize the library, then create and mount the component to the container you created. At this step, you can localize the components by setting a preferred language.

   Select the tab for the component you want to use:

Step 4: (Optional) Customize the components

You can customize the appearance of components by overriding the default styles of colors, fonts, borders, and more. Adyen offers two different ways to do this:

• CSS variables (recommended): Customize styles across all components by providing custom values for global style variables.
• CSS classes (legacy): Modify specific elements of the component by changing the associated classes and properties. These changes will only apply to the particular component you are customizing.

For the best user experience when customizing components, we recommend the following:

• Choose color combinations that complement each other well and provide enough contrast for readability, especially for text and navigation elements.
• Follow accessibility guidelines to ensure that the color palette is inclusive and usable for individuals with visual impairments.
• Test your customizations before implementing them live.

CSS variables

Adyen supports CSS variables that define default styles for the onboarding components. These variables enable you to apply global styles to your components, ensuring a consistent look and feel throughout your marketplace. For example, you can use the CSS variables to specify a custom font family or integrate brand colors into your components.

To override the default CSS values of the component:

1. Identify the CSS variable you want to change. Select the corresponding tab to view the available CSS variables and their default values for fonts, background color, outline color, and border settings.

2. Set a new value for this CSS variable at the root level. Select the corresponding tab to view the examples.

CSS classes

By using CSS classes, you can customize a particular component:

1. Use your browser's developer tools to inspect the component and identify available classes and properties.

2. Define the desired styles in your style sheet file.

   Here is an example to help you get started.

See also