@finapi/finapi-js-loader - v0.38.0

finAPI JS Loader for Web Components

The loader's primary responsibility is to fetch bundled finAPI Web Components (or: Widgets) and inject them into the host document. The loader is available as an NPM package or a UMD module, which can be imported into host pages.

Widget Authentication

Widgets require a process (-token), or a mandator ID that allows the widget to create a process by himself.

Please refer to the DI Solutions Public Documentation to understand the authorization process with finAPIs Process Controller API and its prerequisites.

Prerequisites

To test the finAPI widgets, please request a test mandator via our homepage to obtain client credentials. Same applies for if you decided to order our product(s).

Creating a Process with your own Backend Service

With your mandator's client ID and secret, your backend service can create a process via the finAPI Process Controller POST /processes API.

Creating a Process from your Frontend (-Application)

With your mandator ID, your frontend can create a process via the finAPI Process Controller via POST /processes/{mandatorId}/link.

Another option is to start your application using a redirect with the API endpoint GET /processes/{mandatorId}/link, redirecting to your website, passing the processToken as a query parameter of the URL.

Note: it is mandatory for this approach to have your mandator configured in the finAPI Process Controller. Please contact support@finapi.io to have it set up for you.

Sandbox and Live Environments

If you are developing your application against our sandbox environment, please change/add the following URLs to our examples.

JS Loader Script (UMD only)

Sandbox Live
URL https://js-loader-finapi-general-sandbox.finapi.io https://js-loader-finapi-general-live.finapi.io

Widget Class Constructor Parameters

Sandbox Live (default)
target https://widget-library-finapi-general-sandbox.finapi.io https://widget-library-finapi-general-live.finapi.io

Widget Properties

property Sandbox Live (default)
processctlServer https://di-processctl-finapi-general-sandbox.finapi.io https://di-processctl-finapi-general-live.finapi.io
processctlSolutionsServer https://di-processctl-finapi-general-sandbox.finapi.io https://di-processctl-finapi-general-live.finapi.io
cmsServer https://cms-finapi-general-sandbox.finapi.io https://cms-finapi-general-live.finapi.io

Loading a Widget using the Universal Module Definition in plain HTML page

GiroIdent Basis

<html>
  <head>
    <script src="https://js-loader-finapi-general-live.finapi.io/finapi-js-loader.umd.production.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const container = document.getElementById('container');
        const loader = window['@finapi/finapi-js-loader'];
        const widget = new loader.GiroIdentBasis(container);
        const processToken = 'PROCESS_TOKEN'; // process token, pass it to your application
        const widgetProperties = {
          processToken,
          // personal details for the user to be identified
          firstName: 'USER_FIRST_NAME',
          lastName: 'USER_LAST_NAME',
        };
        const widgetCallbacks = {}; // optionally register your own functions to be called
        widget.load(widgetProperties, widgetCallbacks);
      });
    </script>
  </body>
</html>

Note: Refer to GiroIdentProperties and GiroIdentCallbacks to understand the available widgetProperties and widgetCallbacks definition.

KontoCheck (KreditCheck B2C Account)

<html>
  <head>
    <script src="https://js-loader-finapi-general-live.finapi.io/finapi-js-loader.umd.production.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const container = document.getElementById('container');
        const loader = window['@finapi/finapi-js-loader'];
        const widget = new loader.CreditcheckAccount(container);
        const processToken = 'PROCESS_TOKEN'; // process token, pass it to your application
        const widgetProperties = { processToken };
        const widgetCallbacks = {}; // optionally register your own functions to be called
        widget.load(widgetProperties, widgetCallbacks);
      });
    </script>
  </body>
</html>

Note: Refer to CreditCheckAccountProperties and CreditCheckAccountCallbacks to understand the available widgetProperties and widgetCallbacks definition.

KreditCheck (KreditCheck B2C Loan)

<html>
  <head>
    <script src="https://js-loader-finapi-general-live.finapi.io/finapi-js-loader.umd.production.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const container = document.getElementById('container');
        const loader = window['@finapi/finapi-js-loader'];
        const widget = new loader.CreditCheckLoan(container);
        const processToken = 'PROCESS_TOKEN'; // process token, pass it to your application
        const widgetProperties = { processToken };
        const widgetCallbacks = {}; // optionally register your own functions to be called
        widget.load(widgetProperties, widgetCallbacks);
      });
    </script>
  </body>
</html>

Note: Refer to CreditCheckLoanProperties and CreditCheckLoanCallbacks to understand the available widgetProperties and widgetCallbacks definition.

KreditCheck B2B

<html>
  <head>
    <script src="https://js-loader-finapi-general-live.finapi.io/finapi-js-loader.umd.production.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const container = document.getElementById('container');
        const loader = window['@finapi/finapi-js-loader'];
        const widget = new loader.CreditCheckB2B(container);
        const processToken = 'PROCESS_TOKEN'; // process token, pass it to your application
        const widgetProperties = { processToken };
        const widgetCallbacks = {}; // optionally register your own functions to be called
        widget.load(widgetProperties, widgetCallbacks);
      });
    </script>
  </body>
</html>

Note: Refer to CreditCheckB2BProperties and CreditCheckB2BCallbacks to understand the available widgetProperties and widgetCallbacks definition.

Loading a Widget using NPM package in a React Application

Loader Installation

npm install @finapi/finapi-js-loader

GiroIdent Basis

import { GiroIdentBasis } from '@finapi/finapi-js-loader';
import React from 'react';

function AppGi() {
  const containerRef = (container: HTMLDivElement) => {
    if (container) {
      const widget = new GiroIdentBasis(container);
      const processToken = 'PROCESS_TOKEN'; // process token, pass it to your application
      const widgetProperties = {
        processToken,
        // personal details for the user to be identified
        firstName: 'USER_FIRST_NAME',
        lastName: 'USER_LAST_NAME',
      };
      const widgetCallbacks = {}; // optionally register your own functions to be called
      widget.load(widgetProperties, widgetCallbacks);
    }
  };
  return <div className="AppGi" ref={containerRef}></div>;
}

export default AppGi;

Note: Refer to GiroIdentProperties and GiroIdentCallbacks to understand the available widgetProperties and widgetCallbacks definition.

KontoCheck (KreditCheck B2C Account) Integration

import { CreditCheckAccount } from '@finapi/finapi-js-loader';
import React from 'react';

function AppKcAcc() {
  const containerRef = (container: HTMLDivElement) => {
    if (container) {
      const widget = new CreditCheckAccount(container);
      const processToken = 'PROCESS_TOKEN'; // process token, pass it to your application
      const widgetProperties = { processToken };
      const widgetCallbacks = {}; // optionally register your own functions to be called
      widget.load(widgetProperties, widgetCallbacks);
    }
  };
  return <div className="AppKcAcc" ref={containerRef}></div>;
}

export default AppKcAcc;

Note: Refer to CreditCheckAccountProperties and CreditCheckAccountCallbacks to understand the available widgetProperties and widgetCallbacks definition.

KreditCheck (KreditCheck B2C Loan) Integration

import { CreditCheckLoan } from '@finapi/finapi-js-loader';
import React from 'react';

function AppKcL() {
  const containerRef = (container: HTMLDivElement) => {
    if (container) {
      const widget = new CreditCheckLoan(container);
      const processToken = 'PROCESS_TOKEN'; // process token, pass it to your application
      const widgetProperties = { processToken };
      const widgetCallbacks = {}; // optionally register your own functions to be called
      widget.load(widgetProperties, widgetCallbacks);
    }
  };
  return <div className="AppKcL" ref={containerRef}></div>;
}

export default AppKcL;

Note: Refer to CreditCheckLoanProperties and CreditCheckLoanCallbacks to understand the available widgetProperties and widgetCallbacks definition.

KreditCheck B2B Integration

import { CreditCheckB2B } from '@finapi/finapi-js-loader';
import React from 'react';

function AppKcB2b() {
  const containerRef = (container: HTMLDivElement) => {
    if (container) {
      const widget = new CreditCheckB2B(container);
      const processToken = 'PROCESS_TOKEN'; // process token, pass it to your application
      const widgetProperties = { processToken };
      const widgetCallbacks = {}; // optionally register your own functions to be called
      widget.load(widgetProperties, widgetCallbacks);
    }
  };
  return <div className="AppKcB2b" ref={containerRef}></div>;
}

export default AppKcB2b;

Note: Refer to CreditCheckB2BProperties and CreditCheckB2BCallbacks to understand the available widgetProperties and widgetCallbacks definition.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc