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
an 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.

$3

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).

$3

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

$3

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 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.

$3

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

$3

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

$3

| 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 |
| jsStaticResourcesServer | https://js-static-resources-finapi-general-sandbox.finapi.io | https://js-static-resources-finapi-general-live.finapi.io |

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

$3

``html











`

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

$3

`html











`

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

$3

`html











`

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

$3

`html











`

$3

`html











`

$3

`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

$3

`
npm install @finapi/finapi-js-loader
`

$3

`tsx
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

;
}

export default AppGi;
`

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

$3

`tsx
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

;
}

export default AppKcAcc;
`

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

$3

`tsx
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

;
}

export default AppKcL;
`

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

$3

`tsx
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

;
}

export default AppKcB2b;
`

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

$3

`tsx
import { DigitalAccountCheck } from '@finapi/finapi-js-loader';
import React from 'react';

function AppKcDacB2c() {
const containerRef = (container: HTMLDivElement) => {
if (container) {
const widget = new DigitalAccountCheck(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

;
}

export default AppKcDacB2c;
`

> Note: Refer to DigitalAccountCheckProperties
> and DigitalAccountCheckCallbacks
> to understand the available widgetProperties and widgetCallbacks definition.

$3

`tsx
import { DigitalAccountCheck } from '@finapi/finapi-js-loader';
import React from 'react';

function AppKcDacB2b() {
const containerRef = (container: HTMLDivElement) => {
if (container) {
const widget = new DigitalAccountCheck(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

;
}

export default AppKcDacB2b;
`

> Note: Refer to DigitalAccountCheckProperties
> and DigitalAccountCheckCallbacks
> to understand the available widgetProperties and widgetCallbacks` definition.