embeddable-finance-web-components

This library is maintained by BANKSapi Technology GmbH. For an overview of the features and benefits, visit our Banking Widgets page.

You can find more helpful technical documentation for this and other products in our developer portal. For support or assistance with integration, feel free to contact us.

Usage

We recommend including this library via a public CDN to automatically benefit from future improvements without requiring any action on your part.

<script type="module" src="https://cdn.jsdelivr.net/npm/@banksapitechnology/embeddable-finance-web-components/dist/efc-loader.js"></script>

ba-product-list

Properties

| Property | Attribute | Type | Description | |-----------|-----------|-----------|-----------------------------| | token | token | string | Valid token to fetch data |

Events

| Event | Type | Description |
|----------------------|---------------------------------------------------------------------------------------------|----------------------------------------------------------------| | addBankAccess | CustomEvent<{sessionLink: string;}> | Event emitted when Add Bank Access button is clicked | | emitError | CustomEvent<{ status: number; statusText: string; }> | Error emitted by component | | manageBankAccess | CustomEvent<void> | Event emitted when Manage Bank Access button is clicked | | openBudgetAnalysis | CustomEvent<void> | Event emitted when button to open Budget Analysis is clicked | | openProduct | CustomEvent<{ category: "DEPOT" \| "ACCOUNT"; bankAccessId: string; productId: string; }> | Event emitted when a product is clicked | |

ba-account-detail

Properties

| Property | Attribute | Type | Description | |-----------------|-------------------|----------|--------------------------------------------------| | bankAccessId | bank-access-id | string | ID of Bank Access to which BankAccount belongs | | bankAccountId | bank-account-id | string | ID of BankAccount | | token | token | string | Valid token to fetch data |

Events

| Event | Type | Description |
|--------------------------|----------------------------------------------------------------------------------------|----------------------------------------------| | emitError | CustomEvent<{ status: number; statusText: string; }> | Error emitted by component | | initSepaSingleTransfer | CustomEvent<{sessionLink: string;}> | Event emitted when Payment icon is clicked | | openTransaction | CustomEvent<{ bankAccessId: string; bankAccountId: string; transactionId: string; }> | Event emitted when Transaction is clicked | | goBack | CustomEvent<void> | Event when back button is clicked |

ba-account-transaction-detail

Properties

| Property | Attribute | Type | Description | |-----------------|-------------------|----------|--------------------------------------------------| | bankAccessId | bank-access-id | string | ID of Bank Access to which BankAccount belongs | | bankAccountId | bank-account-id | string | ID of BankAccount to which Transaction belongs | | transactionId | transaction-id | string | ID of Transaction | | | token | token | string | Valid token to fetch data |

Events

| Event | Type | Description | |-------------|--------------------------------------------------------|-------------------------------------| | emitError | CustomEvent<{ status: number; statusText: string; }> | Error emitted by component | | goBack | CustomEvent<void> | Event when back button is clicked |

ba-depot-detail

Properties

| Property | Attribute | Type | Description | |----------------|------------------|----------|--------------------------------------------| | bankAccessId | bank-access-id | string | ID of Bank Access to which Depot belongs | | depotId | depot-id | string | ID of Depot | | token | token | string | Valid token to fetch data |

Events

| Event | Type | Description | |------------------|---------------------------------------------------------------------------------|--------------------------------------------| | emitError | CustomEvent<{ status: number; statusText: string; }> | Error emitted by component | | openInvestment | CustomEvent<{ bankAccessId: string; depotId: string; investmentId: string; }> | Event emitted when Investment is clicked | | goBack | CustomEvent<void> | Event when back button is clicked |

ba-depot-investment-detail

Properties

| Property | Attribute | Type | Description | |----------------|------------------|----------|--------------------------------------------| | bankAccessId | bank-access-id | string | ID of Bank Access to which Depot belongs | | depotId | depot-id | string | ID of Depot to which Investment belongs | | investmentId | investment-id | string | ID of Investment | | | token | token | string | Valid token to fetch data |

Events

| Event | Type | Description | |-------------|--------------------------------------------------------|-------------------------------------| | emitError | CustomEvent<{ status: number; statusText: string; }> | Error emitted by component | | goBack | CustomEvent<void> | Event when back button is clicked |

ba-budget-analysis

Properties

| Property | Attribute | Type | Description | |------------------|-------------------|----------|------------------------------------------------------| | token | token | string | Valid token to fetch data | | periodEnd | period-end | string | ISO format date string to indicate end of period | | periodStart | period-start | string | ISO format date string to indicate start of period |

Events

| Event | Type | Description | |----------------------------|--------------------------------------------------------|-----------------------------------------------| | emitError | CustomEvent<{ status: number; statusText: string; }> | Error emitted by component | | openCategory | CustomEvent<{ category: string; }> | Event when opening a category | | openCategoryTransactions | CustomEvent<{ category: string; }> | Event when clicking a category for analysis | | goBack | CustomEvent<void> | Event when back button is clicked | | timePeriodChange | CustomEvent<{ start: string; end: string; }> | Event on change of time period |

ba-budget-analysis-parent-category

Properties

| Property | Attribute | Type | Description | |------------------|-------------------|----------|------------------------------------------------------| | parentCategory | parent-category | string | Transaction Parent Category | | token | token | string | Valid token to fetch data | | periodEnd | period-end | string | ISO format date string to indicate end of period | | periodStart | period-start | string | ISO format date string to indicate start of period |

Events

| Event | Type | Description | |----------------------------|--------------------------------------------------------|-----------------------------------------------| | emitError | CustomEvent<{ status: number; statusText: string; }> | Error emitted by component | | openCategoryTransactions | CustomEvent<{ category: string; }> | Event when clicking a category for analysis | | goBack | CustomEvent<void> | Event when back button is clicked | | timePeriodChange | CustomEvent<{ start: string; end: string; }> | Event on change of time period |

ba-budget-analysis-category-transactions

Properties

| Property | Attribute | Type | Description | |---------------|----------------|----------|------------------------------------------------------| | category | category | string | Transaction Category | | token | token | string | Valid token to fetch data | | periodEnd | period-end | string | ISO format date string to indicate end of period | | periodStart | period-start | string | ISO format date string to indicate start of period |

Events

| Event | Type | Description | |--------------------|----------------------------------------------------------------------------------------|-------------------------------------| | emitError | CustomEvent<{ status: number; statusText: string; }> | Error emitted by component | | openTransaction | CustomEvent<{ bankAccessId: string; bankAccountId: string; transactionId: string; }> | Event when opening a transaction | | goBack | CustomEvent<void> | Event when back button is clicked | | timePeriodChange | CustomEvent<{ start: string; end: string; }> | Event on change of time period |