Transaction components

You can use the transaction components to offer your users an interactive dashboard that shows their transactional data. With this dashboard, users can view and filter transactions for any of their balance accounts.

This page provides information on:

• The available transaction components, which include the Transactions Overview component and the Transaction Details component.
• The steps needed to integrate these components into your platform.

Transactions Overview component

The Transactions Overview component shows a list of transactions processed for a specific balance account within a specified time period. Each transaction record includes details such as the date and time, payment method, transaction type, and amount.

The Transactions Overview component enables users to complete the following tasks:

• View a list of transactions for a balance account.
• Filter transactions by their type, amount, currency (for multi-currency accounts), and time period. See the available filters for more details.
• View the total incoming and outgoing funds of the balance account. The total values are updated automatically whenever the user modifies the filters. For example, users may choose to filter out the total booked incoming and outgoing funds that were processed during the past month.
• View the available balance of the balance account.

To provide users with more information about a specific transaction, you can use the Transaction Details component.

Available filters

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

Transaction Details component

The Transaction Details component shows detailed information about a transaction, including its unique reference ID.

By default, the Transaction Details component is shown in a modal window on the Transactions Overview page. You can also choose to show the Transaction Details component on a separate page. See Step 4 for more details.

Requirements

Before integrating the components, make sure that you:

• Followed the Get started guide to create your test account.
• Created API credentials for the Configuration API or the Transfers API.
• Asked your Adyen contact to assign the Transactions Overview Component: View role to your API credential.
• Verified that the components are available in the languages and browser versions that apply to your situation.

How it works

Follow these steps to integrate the transaction 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, an authentication session token is required. To create the 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 Configuration API or Transfers API.

   To make this API request, your API key must have the Transactions Overview Component: View role in your Customer Area. Read more in Requirements.

   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		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 platform. On live, only the HTTPS protocol is supported. An asterisk (*) cannot be used as a literal value for 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. Set this to accountHolder. roles: The role required to use the component. Set this to Transactions Overview Component: View.

   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.

Step 2: Install and import the component library

Use the Adyen Platform Experience library in your front-end application as follows:

1. Install the node package.

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

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

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

Step 3: Initialize the components

To initialize the 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
      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.

   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.

   By default, the Transaction Details component is shown as a modal window within the Transactions Overview component. In this scenario, you only need to create a DOM element for the Transactions Overview component. If you want to use the Transaction Details component on its own, you need to create a separate DOM element for it.

   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.

   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..

   The following code is the same for both transaction 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.

   To implement the Transaction Details component as a modal window within the Transactions Overview component, use the following code examples. In this implementation, when a user selects a specific transaction from the overview page, the transaction ID is automatically passed to the Transaction Details component, and the modal window opens.

   Select the tab for the component you want to use:

   To use the Transaction Details component outside of the Transactions Overview component, define the onRecordSelection event as shown below.

Step 4: (Optional) Customize the 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