Skip to main content
The transferList function presents a table interface that displays a paginated list of transfers. This UI element automatically fetches transfer data and renders it in a well-organized table format with support for status indicators and pagination controls. Transfer list default style

​
How it works

The transfer list is rendered by calling the createUIElement function with the appropriate settings: 
import { ui } from '@qonto/embed-sdk/ui';

ui.createUIElement({
  uiElementSettings: {
    uiElementName: 'transfer-list',
  },
  operationSettings: {
    uiParentElementId: 'transfer-list-ui-container',
  },
});
When initialized, the element makes a transparent API call to fetch the list of transfers and displays them in a table. The data fetching happens automatically without requiring additional configuration from your side. For details about the SDK function to call to display the transfer list UI, please refer to the createUIElement API Reference.

​
Emitted events

The transfer list UI Element emits the following events when users interact with it.

​
Transfer selected

Each row in the transfers table rendered by the UI element represents a single SEPA transfer. If users click on any of them the UI Element will emit a transfer-selected event. You can set up a listener for the event by passing a function as the uiElementSettings.uiElementEventListener parameter when calling createUIElement. 
import { ui } from '@qonto/embed-sdk/ui';

ui.createUIElement({
  uiElementSettings: {
    uiElementName: 'transfer-list',
    uiElementEventListener: ({ eventName, eventDetail }) => {
      if (eventName === 'transfer-selected') {
        // React to the transfer selected event
      }
    },
  },
  operationSettings: {
    uiParentElementId: 'transfer-list-ui-container',
  },
});

​
Customizable components

The transfer list UI element is composed of the following customizable components. You can customize their appearance to match your branding:
  • Button - Used for pagination controls (Previous/Next buttons underneath the table) to navigate through the transfer list pages. The buttons are rendered with the secondary variant.
  • Badge Status - Used to display the transfer status with visual indicators (e.g., validated, declined, waiting, in-progress, error, inactive)
  • Skeleton Loader - Used to display loading placeholders while transfers are being fetched from the API. Each table cell will display the skeleton loader while loading.
For guidance on how to customize these components and adapt the transfer list UI to your branding, please refer to the customizing UI elements documentation.