@finapi/finapi-js-loader

Version:

finAPI JS Loader

127 lines • 86.6 kB

HTML

<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>@finapi/finapi-js-loader - v0.45.0</title><meta name="description" content="Documentation for @finapi/finapi-js-loader"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">@finapi/finapi-js-loader - v0.45.0</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h2>@finapi/finapi-js-loader - v0.45.0</h2></div><div class="tsd-panel tsd-typography"><a id="md:finapi-js-loader-for-web-components" class="tsd-anchor"></a><h1><a href="#md:finapi-js-loader-for-web-components">finAPI JS Loader for Web Components</a></h1>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. <a id="md:widget-authentication" class="tsd-anchor"></a><h2><a href="#md:widget-authentication">Widget Authentication</a></h2>Widgets require a <a href="interfaces/CreditCheckAccountProperties.html#processToken">process</a> (-token), or a <a href="interfaces/CreditCheckAccountProperties.html#mandatorId">mandator ID</a> that allows the widget to create a process by himself. Please refer to the <a href="https://documentation.finapi.io/dippd/obtain-authorization-via-process-controller">DI Solutions Public Documentation</a> to understand the authorization process with finAPIs <a href="https://docs.finapi.io/?product=processctl#post-/processes">Process Controller API</a> and its prerequisites. <a id="md:prerequisites" class="tsd-anchor"></a><h3><a href="#md:prerequisites">Prerequisites</a></h3>To test the finAPI widgets, please request a test mandator via our <a href="https://www.finapi.io/jetzt-testen/">homepage</a> to obtain client credentials. Same applies for if you decided to <a href="https://www.finapi.io/jetzt-bestellen/">order</a> our product(s). <a id="md:creating-a-process-with-your-own-backend-service" class="tsd-anchor"></a><h3><a href="#md:creating-a-process-with-your-own-backend-service">Creating a Process with your own Backend Service</a></h3>With your mandator's client ID and secret, your backend service can create a process via the finAPI Process Controller <a href="https://docs.finapi.io/?product=processctl#post-/processes">POST /processes</a> API. <a id="md:creating-a-process-from-your-frontend--application" class="tsd-anchor"></a><h3><a href="#md:creating-a-process-from-your-frontend--application">Creating a Process from your Frontend (-Application)</a></h3>With your mandator ID, your frontend can create a process via the finAPI Process Controller via <a href="https://docs.finapi.io/?product=processctl#post-/processes/-mandatorId-/link">POST /processes/{mandatorId}/link</a>. Another option is to start your application using a redirect with the API endpoint <a href="https://docs.finapi.io/?product=processctl#get-/processes/-mandatorId-/link">GET /processes/{mandatorId}/link</a>, redirecting to your website, passing the <code>processToken</code> as a query parameter of the URL. <blockquote> Note: it is mandatory for this approach to have your mandator configured in the finAPI Process Controller. Please contact <a href="mailto:support@finapi.io">support@finapi.io</a> to have it set up for you. </blockquote> <a id="md:sandbox-and-live-environments" class="tsd-anchor"></a><h2><a href="#md:sandbox-and-live-environments">Sandbox and Live Environments</a></h2>If you are developing your application against our sandbox environment, please change/add the following URLs to our examples. <a id="md:js-loader-script-umd-only" class="tsd-anchor"></a><h3><a href="#md:js-loader-script-umd-only">JS Loader Script (UMD only)</a></h3><table> <thead> <tr> <th></th> <th>Sandbox</th> <th>Live</th> </tr> </thead> <tbody><tr> <td>URL</td> <td><a href="https://js-loader-finapi-general-sandbox.finapi.io">https://js-loader-finapi-general-sandbox.finapi.io</a></td> <td><a href="https://js-loader-finapi-general-live.finapi.io">https://js-loader-finapi-general-live.finapi.io</a></td> </tr> </tbody></table> <a id="md:widget-class-constructor-parameters" class="tsd-anchor"></a><h3><a href="#md:widget-class-constructor-parameters">Widget Class Constructor Parameters</a></h3><table> <thead> <tr> <th></th> <th>Sandbox</th> <th>Live (default)</th> </tr> </thead> <tbody><tr> <td>target</td> <td><a href="https://widget-library-finapi-general-sandbox.finapi.io">https://widget-library-finapi-general-sandbox.finapi.io</a></td> <td><a href="https://widget-library-finapi-general-live.finapi.io">https://widget-library-finapi-general-live.finapi.io</a></td> </tr> </tbody></table> <a id="md:widget-properties" class="tsd-anchor"></a><h3><a href="#md:widget-properties">Widget Properties</a></h3><table> <thead> <tr> <th>property</th> <th>Sandbox</th> <th>Live (default)</th> </tr> </thead> <tbody><tr> <td>processctlServer</td> <td><a href="https://di-processctl-finapi-general-sandbox.finapi.io">https://di-processctl-finapi-general-sandbox.finapi.io</a></td> <td><a href="https://di-processctl-finapi-general-live.finapi.io">https://di-processctl-finapi-general-live.finapi.io</a></td> </tr> <tr> <td>processctlSolutionsServer</td> <td><a href="https://di-processctl-finapi-general-sandbox.finapi.io">https://di-processctl-finapi-general-sandbox.finapi.io</a></td> <td><a href="https://di-processctl-finapi-general-live.finapi.io">https://di-processctl-finapi-general-live.finapi.io</a></td> </tr> <tr> <td>jsStaticResourcesServer</td> <td><a href="https://js-static-resources-finapi-general-sandbox.finapi.io">https://js-static-resources-finapi-general-sandbox.finapi.io</a></td> <td><a href="https://js-static-resources-finapi-general-live.finapi.io">https://js-static-resources-finapi-general-live.finapi.io</a></td> </tr> </tbody></table> <a id="md:loading-a-widget-using-the-universal-module-definition-in-plain-html-page" class="tsd-anchor"></a><h2><a href="#md:loading-a-widget-using-the-universal-module-definition-in-plain-html-page">Loading a Widget using the Universal Module Definition in plain HTML page</a></h2><a id="md:giroident-basis" class="tsd-anchor"></a><h3><a href="#md:giroident-basis">GiroIdent Basis</a></h3><pre><code class="language-html"><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> </code><button>Copy</button></pre> <blockquote> Note: Refer to <a href="interfaces/GiroIdentProperties.html">GiroIdentProperties</a> and <a href="interfaces/GiroIdentCallbacks.html">GiroIdentCallbacks</a> to understand the available <code>widgetProperties</code> and <code>widgetCallbacks</code> definition. </blockquote> <a id="md:kontocheck-kreditcheck-b2c-account" class="tsd-anchor"></a><h3><a href="#md:kontocheck-kreditcheck-b2c-account">KontoCheck (KreditCheck B2C Account)</a></h3><pre><code class="language-html"><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> </code><button>Copy</button></pre> <blockquote> Note: Refer to <a href="interfaces/CreditCheckAccountProperties.html">CreditCheckAccountProperties</a> and <a href="types/CreditCheckAccountCallbacks.html">CreditCheckAccountCallbacks</a> to understand the available <code>widgetProperties</code> and <code>widgetCallbacks</code> definition. </blockquote> <a id="md:kreditcheck-kreditcheck-b2c-loan" class="tsd-anchor"></a><h3><a href="#md:kreditcheck-kreditcheck-b2c-loan">KreditCheck (KreditCheck B2C Loan)</a></h3><pre><code class="language-html"><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> </code><button>Copy</button></pre> <blockquote> Note: Refer to <a href="interfaces/CreditCheckLoanProperties.html">CreditCheckLoanProperties</a> and <a href="types/CreditCheckLoanCallbacks.html">CreditCheckLoanCallbacks</a> to understand the available <code>widgetProperties</code> and <code>widgetCallbacks</code> definition. </blockquote> <a id="md:kreditcheck-b2b" class="tsd-anchor"></a><h3><a href="#md:kreditcheck-b2b">KreditCheck B2B</a></h3><pre><code class="language-html"><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> </code><button>Copy</button></pre> <a id="md:digital-account-check-b2c" class="tsd-anchor"></a><h3><a href="#md:digital-account-check-b2c">Digital Account Check (B2C)</a></h3><pre><code class="language-html"><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.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); }); </script> </body> </html> </code><button>Copy</button></pre> <a id="md:digital-account-check-b2b" class="tsd-anchor"></a><h3><a href="#md:digital-account-check-b2b">Digital Account Check (B2B)</a></h3><pre><code class="language-html"><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.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); }); </script> </body> </html> </code><button>Copy</button></pre> <blockquote> Note: Refer to <a href="interfaces/CreditCheckB2BProperties.html">CreditCheckB2BProperties</a> and <a href="types/CreditCheckB2BCallbacks.html">CreditCheckB2BCallbacks</a> to understand the available <code>widgetProperties</code> and <code>widgetCallbacks</code> definition. </blockquote> <a id="md:loading-a-widget-using-npm-package-in-a-react-application" class="tsd-anchor"></a><h2><a href="#md:loading-a-widget-using-npm-package-in-a-react-application">Loading a Widget using NPM package in a React Application</a></h2><a id="md:loader-installation" class="tsd-anchor"></a><h3><a href="#md:loader-installation">Loader Installation</a></h3><pre><code>npm install @finapi/finapi-js-loader </code><button>Copy</button></pre> <a id="md:giroident-basis-1" class="tsd-anchor"></a><h3><a href="#md:giroident-basis-1">GiroIdent Basis</a></h3><pre><code class="language-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 <div className="AppGi" ref={containerRef}></div>; } export default AppGi; </code><button>Copy</button></pre> <blockquote> Note: Refer to <a href="interfaces/GiroIdentProperties.html">GiroIdentProperties</a> and <a href="interfaces/GiroIdentCallbacks.html">GiroIdentCallbacks</a> to understand the available <code>widgetProperties</code> and <code>widgetCallbacks</code> definition. </blockquote> <a id="md:kontocheck-kreditcheck-b2c-account-integration" class="tsd-anchor"></a><h3><a href="#md:kontocheck-kreditcheck-b2c-account-integration">KontoCheck (KreditCheck B2C Account) Integration</a></h3><pre><code class="language-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 <div className="AppKcAcc" ref={containerRef}></div>; } export default AppKcAcc; </code><button>Copy</button></pre> <blockquote> Note: Refer to <a href="interfaces/CreditCheckAccountProperties.html">CreditCheckAccountProperties</a> and <a href="types/CreditCheckAccountCallbacks.html">CreditCheckAccountCallbacks</a> to understand the available <code>widgetProperties</code> and <code>widgetCallbacks</code> definition. </blockquote> <a id="md:kreditcheck-kreditcheck-b2c-loan-integration" class="tsd-anchor"></a><h3><a href="#md:kreditcheck-kreditcheck-b2c-loan-integration">KreditCheck (KreditCheck B2C Loan) Integration</a></h3><pre><code class="language-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 <div className=