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-bam-dashboard

Bank Access Management dashboard. Allows users to view, refresh, reauthenticate, edit product selection, and delete bank accesses.

Properties

| Property | Attribute | Type | Description | |----------------------------|--------------------------------|--------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------| | token | token | string | Valid token to authorize API requests | | maxTransactions | max-transactions | 'none' \| 'all' \| 'paymentAccounts' | Controls whether to fetch transactions older than 90 days when creating a new bank access. none (default), all, or paymentAccounts only | | bypassAddBankAccessModal | bypass-add-bank-access-modal | boolean | Skip the "Weiteren Bankzugang hinzufügen" confirmation modal and create the bank access directly. Default: false | | disableEbics | disable-ebics | boolean | Hide the EBICS connection type option; new bank accesses always use the standard connection. Default: false | | paymentAccountsOnly | payment-accounts-only | boolean | Preset for "Ausschließlich Zahlungskonten hinzufügen"; also used directly when the modal is bypassed. Default: true | | hideBackButton | hide-back-button | boolean | Do not render the "Zurück" button in the toolbar. Default: false |

Events

| Event | Type | Description | |------------------------------|--------------------------------------------------------|------------------------------------------------------------------------------------------| | openRegprotect | CustomEvent<{ sessionLink: string; }> | Emitted when a RegProtect session link is available (create, refresh, or reauthenticate) | | emitError | CustomEvent<{ status: number; statusText: string; }> | Error emitted by component (includes token invalid and dashboard load errors) | | dashboardLoaded | CustomEvent<void> | Emitted when the bank access list has been successfully loaded | | bankAccessListStateChanged | CustomEvent<{ hasBankAccesses: boolean; }> | Emitted after loading with the current state of the bank access list | | bankAccessListEmpty | CustomEvent<{ empty: boolean; }> | Emitted after loading indicating whether the bank access list is empty | | goBack | CustomEvent<void> | Emitted when the back button is clicked; cancelable — without preventDefault() the component falls back to window.history.back() |

Slots

| Slot Name | Description | |------------------|------------------------------------------------------------------------------------------------------| | custom-element | Allows the host app to inject custom UI elements below the "Weiteren Bankzugang hinzufügen" button. |

Usage:

<ba-bam-dashboard token="your_token">
  <button slot="custom-element" class="btn btn-primary" onclick="handleProceed()">
    Continue to Next Step
  </button>
</ba-bam-dashboard>

ba-product-list

Properties

| Property | Attribute | Type | Description | |-------------------|--------------------|--------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------| | token | token | string | Valid token to fetch data | | maxTransactions | max-transactions | 'none' \| 'all' \| 'paymentAccounts' | Controls whether to fetch transactions older than 90 days when creating a new bank access. none (default), all, or paymentAccounts only | | bypassAddBankAccessModal | bypass-add-bank-access-modal | boolean | Skip the "Weiteren Bankzugang hinzufügen" confirmation modal and create the bank access directly. Default: false | | disableEbics | disable-ebics | boolean | Hide the EBICS connection type option; new bank accesses always use the standard connection. Default: false | | paymentAccountsOnly | payment-accounts-only | boolean | Preset for "Ausschließlich Zahlungskonten hinzufügen"; also used directly when the modal is bypassed. Default: true | | hideBackButton | hide-back-button | boolean | Do not render the "Zurück" button in the toolbar. Default: false |

Events

| Event | Type | Description | |----------------------|---------------------------------------------------------------------------------------------|----------------------------------------------------------------| | addBankAccess | CustomEvent<{ sessionLink: string; }> | Emitted with a RegProtect session link when adding a bank access | | emitError | CustomEvent<{ status: number; statusText: string; }> | Error emitted by component | | manageBankAccess | CustomEvent<void> | Emitted when Manage Bank Access button is clicked | | openBudgetAnalysis | CustomEvent<void> | Emitted when button to open Budget Analysis is clicked | | openProduct | CustomEvent<{ category: "DEPOT" \| "ACCOUNT"; bankAccessId: string; productId: string; }> | Emitted when a product is clicked | | goBack | CustomEvent<void> | Emitted when the back button is clicked; cancelable — without preventDefault() the component falls back to window.history.back() |

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 |