No momento, esta página não está disponível em português
Issuin icon

Transaction components

Let users view their transactional data using Platform Experience 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, status, 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.

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

The Time period filter specifies the date and time range for displaying transaction results. The specified time is determined by the timezone of the selected balance account.

Filter value
 Description
Last 7 days Includes transactions from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, transactions from the previous Wednesday midnight until this Tuesday 8:00 PM are included.
This week Includes transactions for the current week, starting from Monday midnight until the present moment.
Last week Includes transactions from Monday midnight to Sunday 11:59:59 PM of the previous week.
Last 30 days The default setting. Includes transactions from the previous 29 days and from today until the current time.
This month Includes transactions for the current month, starting from the first day of the month until today's date.
Last month Includes transactions from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.
Year to date Includes transactions from the first day of the current year up until today's date.
Custom Allows setting a custom time period.

The Type filter specifies which transaction types to show in the overview. The table below lists the available transaction types in the component along with their corresponding values returned in the Transfers API.

Filter value
 Value in the Transfers API
ATM atmWithdrawal, atmWithdrawalReversal.
Capital grant, repayment.
Correction manualCorrection, depositCorrection, leftover, balanceAdjustment, balanceRollover, installmentReversal, captureReversal, refundReversal, chargebackReversal , chargebackCorrection, chargebackReversalCorrection, secondChargebackCorrection, reserveAdjustment.
Fee fee, miscCost, paymentCost, cashOutFee.
Payment payment, capture, installment.
Refund refund
Chargeback chargeback, secondChargeback.
Transfer bankTransfer, internalTransfer, cardTransfer.
Other Includes all other transaction types.

The filter enables users to filter transactions by specifying a custom amount range.

For multi-currency accounts, users can select their preferred currency for transactions overview.

Transaction Details component

The Transaction Details component shows specific transaction information, such as the unique reference ID of the transaction, the shopper's name and email address (if available).

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.

Before you begin

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

How it works

Follow these steps to integrate the transaction 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 Transactions Overview component and the Transaction Details component both require the Transactions 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. From your back-end application, 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.

    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.
      Note, you may not use asterisk (*) as a literal value of 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 Transactions Overview Component: View.

    Here is an example request to create a session token.

  2. From the response, save the token created. You need this token in the next step to initialize the library and 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 --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 -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.
    • Transactions Overview component
    Parameter Required
    Description
    core -white_check_mark- The instance of the library.
    preferredLimit The number of transactions shown per page.
    Default value: 10.
    allowLimitSelection Defines if the user can change the number of transactions shown per page.
    Default value: true.
    onRecordSelection If defined, the event allows obtaining the transaction ID when the user selects a specific transaction from the overview.
    You can use the obtained ID value to show the Transaction Details component in a different location within your UI, outside the Transactions Overview component.
    • Transaction Details component
    Parameter Required
    Description
    core -white_check_mark- The instance of the library.
    id -white_check_mark- The unique identifier of the transaction.

  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 which does a request to your API to generate a new authentication session token. The API call itself is described in Step 2.

    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.

    By default, the Transaction Details component is shown in a modal window on the Transactions Overview page. When the 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. 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 Transaction Details component in a different location within your UI, outside the Transactions 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