Marketplace icon

Reports component

Let your users download their balance account reports using 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.

Currently, the component only supports the Payout report. We will add more report types in the future.

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.

Users with multiple balance accounts can switch between them using the Balance Account filter.

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.

Before you begin

Before integrating the component, make sure that you:

How it works

Follow these steps to integrate the reports component:

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

Step 1: Get the resource IDs and roles

To ensure a component is used by an authorized user, you must:

  1. Get the account holder ID of the user. The component shows the data for balance accounts associated with that account holder ID.
  2. Know the role that is required for the use of the component. The Reports Overview component requires the Reports Overview Component: View role.

You then use these values to generate an authentication session token in the next step.

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 Session authentication API using the API key that you set up for the Configuration API or Transfers 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
      allowOrigin -white_check_mark- The URL where the component will appear.
      Supported URL formats: https://www.yourcompany.com and https://*.yourcompany.com.
      An asterisk (*) cannot be used as a literal value for the parameter.
      product -white_check_mark- The component type. Set this to platform.
      policy -white_check_mark- 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 Reports Overview Component: View.

    Here is an example request for creating a session token.

  2. In the response, note the token. Later, when you initialize the components, you need to create and call a function that passes the token value to the components.

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 
  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 the component

To initialize the component:

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

    • Library
    Parameter Required
    Description
    onSessionCreate -white_check_mark- 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.
    • Component
    Parameter Required
    Description
    core -white_check_mark- 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 using onError: (error) => {console.log(error)}.
  2. Create a DOM element on your UI page where you want the component to be rendered and give it a descriptive ID.

    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.

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

Step 5: (Optional) Customize the component

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

Below are some examples of how to style the component. 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