@banksapitechnology/bam-web-component v1.0.2

bam-web-component

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 src="https://cdn.jsdelivr.net/npm/@banksapitechnology/bam-web-component/dist/bam.min.js"></script>

The web component is authenticated by a BANKS/Connect token. Provide the token either through the token prop or by storing it in the LocalStorage under the key ba-token.

ba-bam-dashboard

Properties

Events

Example payload

{
    sessionLink: "https://banksapi.io/some-session-link&callbackUrl=...",
    reason: "accessCreated" // optional
}

REG/Protect integration

When using <ba-bam-dasboard> web component, you can hook into REG/Protect web component use cases like:

• Add Bank Access
• Providing Strong Customer Authentication (SCA)
• Change Bank Products

This is accomplished through the REG/Protect web component An example implementation is shown below

<div id="wc-container">
  <ba-bam-dasboard token="your_banksconnect_token_here"></ba-bam-dasboard>
</div>

<script src="https://cdn.jsdelivr.net/npm/@banksapitechnology/bam-web-component/dist/bam.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@banksapitechnology/regprotect-web-component/dist/ba-regprotect.js"></script>
<script>
  const container = document.getElementById('wc-container');

  container.addEventListener('regprotect-redirect', (event) => {
    const { sessionLink, reason } = event.detail;
    console.log('[Host] RegProtect triggered:', sessionLink, reason);

    // Optional: Clean up or hide existing component
    container.innerHTML = ''; // or animate out <ba-bam-dasboard> manually

    // Add <ba-regprotect> dynamically
    const regprotect = document.createElement('ba-regprotect');
    regprotect.setAttribute('sessionLink', sessionLink);
    container.appendChild(regprotect);

    // (Optional) Handle further REG/Protect completion events
    regprotect.addEventListener('subscribed', () => {
      console.log('[Host] REG/Protect finished. Restoring dashboard...');

      const bam = document.createElement('ba-bam-dasboard');
      bam.setAttribute('token', localStorage.getItem('ba-token'));
      container.replaceChildren(bam);
    });
  });
</script>