Live demo
View live demo of the Platform Experience components.
You can use the Reports Overview component to let your users access reports generated by Adyen for their balance accounts. The reports show the movement of funds within their balance accounts, such as payouts. This information can help your users with their bookkeeping and reconciliation processes.
The component automatically generates report data every day, so users do not have to ask for reports from you and always have access to the most current data.
This page provides information on:
- The features of the Reports Overview component.
- The steps needed to integrate the Reports Overview component into your platform's user interface (UI).
Reports Overview component
The Reports Overview component shows a list of downloadable reports for a specific balance account within a specified time period.
The following tabs illustrate how the component appears on various screen sizes.
The component enables users to:
- Download a generated report in CSV format. The downloaded file name will be similar to this:
balanceaccount_payout_report_YYYY_MM_DD.csv
. - Filter the generated reports by time period and balance account (if applicable). See the available filters for more details.
Supported report types
Report type |
Description |
---|---|
Payout report | This report shows a list of automatic payouts completed for a specific balance account within a specified time period, including details of the transactions (both debits and credits) which are part of these payouts. |
Available filters
The following sections shows the available filters and their values for the Reports Overview component.
The Time period filter specifies the date range for showing available reports. Report data is automatically generated every day at midnight based on the UTC+0 time zone.
Filter value |
Description |
---|---|
Last 7 days | Includes reports from the previous six days and today. |
This week | Includes reports for the current week, starting from Monday midnight until today. |
Last week | Includes reports from Monday midnight to Sunday midnight of the previous week. |
Last 30 days | The default setting. Includes reports from the previous 29 days and today. |
This month | Includes reports for the current month, starting from the first day of the month until today's date. |
Last month | Includes reports from the previous month, starting from the first day of the month until the end of the month. |
Year to date | Includes reports from the first day of the current year up until today's date. |
Custom | Allows setting a custom time period. |
Requirements
Requirement | Description |
---|---|
Integration type | You must have the Adyen for Platforms platform integration. |
API credentials | You must have a Balance Platform API key (for example, ws[_123456]@BalancePlatform.[YourBalancePlatform]) to access the Session authentication API. Ensure that you have asked your Adyen contact to assign the following role to your API credential:
|
Limitations | Currently, the reports component only supports the Payout report. More report types will be added in the future. |
Setup steps | Before you begin, verify that the component is available in the languages and browser versions that apply to your situation. |
How it works
Follow these steps to integrate the reports component:
- Create an authentication session from your server
- Install the component library on your front end
- Initialize the component
- Customize the component
1. Create an authentication session from your server
To ensure secure communication between the component and Adyen server, you must configure your server for authentication and create a session token. To create the token:
-
From your server, make a POST /sessions request specifying the following parameters:
To make this API request, your API key must have the Reports Overview Component: View role in your Customer Area. Read more in Requirements.
Parameter Required Description allowOrigin
The URL where the component will appear.
Must follow the format ofhttps://www.yourcompany.com
orhttps://*.yourcompany.com
, whereyourcompany.com
is the actual web address of your platform.
On live, only the HTTPS protocol is supported.product
The type of product the component belongs to. 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. Set this to accountHolder.
roles
: The role required to use the component. Set this to Reports Overview Component: View.
_ Here is an example request for creating a session token.
Create a session tokenExpand viewCopy link to code blockCopy codecurl https://test.adyen.com/authe/api/v1/sessions \ -H 'content-type: application/json' \ -H 'x-api-key: ADYEN_BALANCE_PLATFORM_API_KEY' \ -D '{ "allowOrigin":"YOUR_DOMAIN", "product":"platform", "policy": { "resources": [ { "accountHolderId": "AH00000000000000000000001", "type": "accountHolder" } ], "roles": [ "Reports Overview Component: View" ] } }' -
Note the API response. Later, when initializing the component, you need to create and call a function that passes the entire session object from the response to your front end.
Session token createdExpand viewCopy link to code blockCopy code{ "id": "EC1234-1234-1234-1234", "token": "xxxxx.yyyyy.zzzzzz" }
2. Install the component library on your front end
Install the Adyen Platform Experience library in your front-end application as follows:
-
Install the npm package.
npm install @adyen/adyen-platform-experience-web
-
Import the library, the component, and the style sheet.
import { AdyenPlatformExperience, ReportsOverview } from '@adyen/adyen-platform-experience-web'; import "@adyen/adyen-platform-experience-web/adyen-platform-experience-web.css";
3. Initialize the component
To initialize the component:
-
Gather the following information to be passed when initializing the library and component.
-
Gather these parameters to initialize the library.
Parameter Required DescriptionavailableTranslations
An array containing the names of the imported locale files used for localizing the component.
For example,[es_ES, nl_NL, fr_FR]
.environment
Specifies the environment for the component integration.
The default value is test. Set the parameter to live when you are ready to go live.locale
Specifies the locale code, which determines the desired language of the component. This code must correspond to one of the locale files listed in availableTranslations
.
For example, use es-ES for Spanish.onSessionCreate
The callback function that retrieves an authentication session token and refreshes the current session. -
Gather these parameters to initialize the component.
Parameter Required Descriptioncore
The instance of the library. preferredLimit
The number of report records shown per page.
Default value: 10.allowLimitSelection
Determines whether the user can change the number of report records shown per page.
Default value: true.balanceAccountId
Set this parameter to a specific balance account ID to show reports for the given account only.
If specified, the Balance Account filter will be hidden.hideTitle
Determines whether to show the component title Reports.
Default value: false. Set this to true to hide the component title.onFiltersChanged
The callback function triggered when the user changes the filter selection.
The function receives the current filter selection as an argument, including the balance account ID and time period.onContactSupport
The callback function triggered when an error occurs on the reports table.
If the function is defined, the component will show the default error screen, which includes the error code ID and a contact support button.
You can provide the URL to which you want to redirect the user when they click the button. For example,onContactSupport: () => {window.open('https://your-platform-domain/support');}
onError
The callback function triggered when an error occurs on the reports table.
You can define the function based on how you want to handle the errors.
For example, you can log the errors on the console usingonError: (error) => {console.log(error)}
.
-
-
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.
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.
Create DOM elementExpand viewCopy link to code blockCopy code<div id="reports-overview-container"></div>
-
Add a function that calls your API to retrieve and refresh an authentication session token.
Add function to retrieve and refresh an authentication session tokenExpand viewCopy link to code blockCopy codeasync function handleSessionCreate() { const response = await fetch('YOUR_IMPLEMENTATION_OF_CREATE_SESSION_ENDPOINT'); return response.json(); } -
Initialize the component and mount it to the container you created.
Be sure to include the function for retrieving and refreshing the session token that you added in the previous step.
Initialize library and create componentExpand viewCopy link to code blockCopy codeimport { AdyenPlatformExperience, ReportsOverview } from '@adyen/adyen-platform-experience-web'; import "@adyen/adyen-platform-experience-web/adyen-platform-experience-web.css"; const core = await AdyenPlatformExperience({ onSessionCreate: handleSessionCreate, }); const reportsOverview = new ReportsOverview({ core }); reportsOverview.mount('#reports-overview-container'); In this step, you can also configure the component to use one of the supported languages.
Update your code for initializing components to include the localization settings. If no localization settings are provided, the components will default to English.
Localize componentExpand viewCopy link to code blockCopy codeimport { AdyenPlatformExperience, es_ES, nl_NL, fr_FR, all_locales } from '@adyen/adyen-platform-experience-web'; // ... // Only selected languages are available const core = await AdyenPlatformExperience({ availableTranslations: [es_ES, nl_NL, fr_FR], locale: 'es-ES', // You can also set this to nl-NL, fr-FR, or en-US (default) // .... }) // All supported languages are available const core = await AdyenPlatformExperience({ availableTranslations: [all_locales], locale: 'es_ES' // You can also set this to any of the supported languages // .... })
4. (Optional) Customize the component
The reports component has a default appearance with pre-defined styles, such as colors, fonts, and borders. You can customize the appearance of your components by overriding the default values of CSS variables and the class settings:
- Inspect the components using your browser's developer tools.
- Modify the styles in your style sheet file.
The following tabs show examples of how to style the component. The first example shows how to override predefined CSS variables 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.
:root { --adyen-sdk-border-radius-s: 10px; --adyen-sdk-border-radius-m: 20px; --adyen-sdk-border-radius-l: 30px; --adyen-sdk-color-background-disabled: #9ecdb1; --adyen-sdk-color-background-inverse-primary: #0abf53; --adyen-sdk-color-background-inverse-primary-hover: #57d389; --adyen-sdk-color-decorative-blue: #0abf53; --adyen-sdk-color-outline-primary-active: #0abf53; }