Payout components

To help your users reconcile their payouts, you can integrate payout components into your platform's user interface (UI). These components offer a dashboard view of completed payouts for each user's balance account. Your users can use this information to match the payouts they receive in their bank account with the batches of payments and other related transactions.

The payout components are designed for users who receive automatic payouts. Unlike on-demand payouts, automatic payouts are initiated by Adyen based on your configured rules, allowing all relevant debit and credit transactions to be captured and shown in the component.

This page provides information on:

• The available payout components, which include the Payouts Overview component and the Payout Details component.
• The steps needed to integrate these components into your platform.

Payouts Overview component

The Payouts Overview component shows a list of automatic payouts completed for a specific balance account within a specified time period. Each payout record includes details such as the date and time, funds captured, total adjustments, and net payout.

The funds captured represent the initial amount in the balance account on the day when a payout is initiated. This amount may be adjusted due to factors like fees, commissions, refunds, business financing, or internal funds transfers. The component presents these adjustments in an aggregated view. If you need to provide your users with a detailed breakdown of the payout adjustments, refer to the Payout Details component.

After being adjusted, the funds captured amount results in the net payout amount, which is the final amount credited to the user's bank account.

All amounts are shown in the currency of the chosen balance account.

The Payouts Overview component enables users to:

• View a list of automatic payouts completed for a balance account, including funds captured, adjustments, and net payout amounts per payout.
• Filter payouts by time period and balance account (if applicable). See the available filters for more details.

To provide users with more information about a specific payout, you can integrate the Payout Details component.

Available filters

The following sections shows the available filters and their values for the Payouts Overview component.

Payout Details component

The Payout Details component shows specific information about a payout, including the date and time, breakdown of captured funds and adjustments, and the net payout amount. If there are any remaining funds in the balance account after the payout is completed, they will also be shown in the component.

Before you begin

Before you begin to integrate the payout components, make sure that:

• You followed the Get started guide to create your test account and set up webhooks.
• You have API credentials for the Configuration API and Transfers API.
• You have assigned the following Platform Components role to an API credential in your Customer Area:
  • Payouts Overview Component: View
• You have verified that the components are available in the countries/regions, languages, and browser versions that apply to your situation.

How it works

Follow these steps to integrate the payout components:

1. Get resource IDs and roles
2. Get an authentication session token
3. Install and import the npm package
4. Initialize components
5. Customize components

Step 1: Get resource IDs and roles

To ensure a component is used by an authorized user, you need to gather one or more resource IDs linked to the user, and know 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.

The resource ID refers to the account holder ID for which you want to show data in the component. The component shows all balance accounts associated with that account holder.

The role determines the actions that are allowed for the account holder resource in the component.

1. Get the account holder ID of the user.
2. Determine what role is required for the component you want to use.
   The Payouts Overview component and the Payout Details component both require the Payouts Overview Component: View role.

Step 2: Create an authentication session token

To ensure secure communication between backend and frontend, an authentication session token is required. To create the token:

1. Make a POST request to the /sessions endpoint of the Authentication API using the API key that you set up for the Configuration API or Transfers API.

   • 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

   • In the request body, specify these parameters:

     Parameter	Required	Description
     allowOrigin		The URL where the component will appear. Supported URL formats: https://www.yourcompany.com and https://*.yourcompany.com. Note, you may not use asterisk (*) as a literal value of the parameter.
     product		The component type. Set this to platform.
     policy		An object that contains: resources: An object that contains: accountHolderId: The unique identifier of the account holder that is linked to the balance account shown in the component. type: The type of resource. roles: The role required to use the component. Set this to Transactions Overview Component: View.

   The request should look similar to this:

2. From the response, save the token created. You will need it in the next step when you initialize the component.

Step 3: Install and import the npm package

Use the Adyen Platform Experience npm package in your application as follows:

1. Install the node package.

   npm install @adyen/adyen-platform-experience-web --save

2. Import the package and the style sheet in your application. To customize the component styling, see Step 5.

   import { AdyenPlatformExperience } from '@adyen/adyen-platform-experience-web';
   import "@adyen/adyen-platform-experience-web/adyen-platform-experience-web.css";

Step 4: Initialize components

To initialize the components:

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

   • Library

   Parameter	Required	Description
   onSessionCreate		The function callback that retrieves an authentication session token and refreshes/extends the current session.
   locale		The language of the component. See the list of the supported languages. For example, use en-US for English.
   environment		The environment for the component integration. The default value is test. Set the parameter to live when you are ready to go live.

   • Payouts Overview component

   Parameter	Required	Description
   core		The instance of the library.
   preferredLimit		The number of payouts shown per page. Default value: 10.
   allowLimitSelection		Defines if the user can change the number of payouts shown per page. Default value: true.
   onRecordSelection		If defined, the event allows obtaining the payout date and the corresponding balance account ID when the user selects a specific payout from the overview. You can use the obtained values to show the Payout Details component in a different location within your UI, outside the Payouts Overview component.

   • Payout Details component

   Parameter	Required	Description
   core		The instance of the library.
   id		The unique identifier of the balance account.
   date		The payout date in an ISO format.

2. Create a DOM element on your UI page where you want the component to be rendered and give it a descriptive ID.

   Select the tab for the component you want to use:

   If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.

3. Add a function that calls your API to generate a new authentication session token. The API call itself is described in Step 2.

   The following code, including the role, is the same for both payout components.

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

   By default, the Payout Details component is shown in a modal window on the Payouts Overview page. When the user selects a specific payout from the overview page, the payout date and the corresponding balance account ID are automatically passed to the Payout Details component, and the modal window opens. To set up the components in this manner, do as follows.

   Select the tab for the component you want to use:

   If you want to place the Payout Details component in a different location within your UI, outside the Payouts Overview component, define the onRecordSelection event as follows:

Step 5: (Optional) Customize components

You can customize the appearance of components by overriding the default style to change colors, fonts, borders, and more. To see which classes and properties are available, inspect the components using your browser's developer tools. Then, define the desired styles in your style sheet file.

Below are some examples of how to style components. The first example shows how to override predefined CSS properties to use different colors and values. The second example demonstrates how to update the CSS class setting to change the layout of the modal window from a pop-up window to a side panel view.

Use the tabs below to switch between the examples.

See also