Prerequisites

CORS configuration

Since the embedded Web Form works as a part of your web page, but still has to communicate with *.finapi.io domains, all modern web browsers will apply Cross-Origin Resource Sharing (CORS) policies to all requests triggered by the Web Form scripts. finAPI Web Form 2.0 backend takes care of it and makes sure to only process requests from domains you allow. By default, no domains are allowed for customers, and they must be explicitly configured.

If you try to use the embedded Web Form, but it apparently fails, and you see “CORS error” in the Network tab of DevTools in the browser, it means CORS configuration is missing for your mandator.

To eliminate this issue, you need to provide us with all domains where you are going to use the embedded Web Form. For that, please raise a request to our support team, and they will take care of the rest.

Web Form Loader

Web Form is bundled as a Web Component.

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. (source)

This means you can attach Web Form as a custom DOM element to your web page. Web Form is rendered under Shadow root which prevents conflicts with your host application (e.g. CSS styling issues). To make things even easier, we provide you with a Web Form Loader.

Web Form Loader is a small JavaScript library that takes care of loading and unloading Web Form to and from your page.

Usage

Usage via script

To use Web Form in simple HTML code, one could do it like this:

<div id="webFormContainer"></div>
<script src="https://webform-dist.finapi.io/latest/dist/web-form.min.js"></script>

<script>
    const createWebForm = async function () {
        // Replace following line with real REST request to create Web Form and its token
        const token = await Promise.resolve("token");
        FinApiWebForm.load(
            document.querySelector("#webFormContainer"),
            { token: token }
        );
    };

    document.addEventListener("DOMContentLoaded", function() {
       createWebForm();
    });
</script>
HTML

Before you can load Web Form you will need to first obtain a valid token - more info in Web Form Basics. For each next load, a new token should be provided.

web-form.min.js contains IIFE - immediately invoked function expression, which will create globally-scoped variable FinApiWebForm. This variable name is therefore reserved.

It is possible to "freeze" the version by replacing the latest tag with the desired version: https://webform-dist.finapi.io/2.6.0/dist/web-form.min.js

A list of all the available versions can be found in the NPM version history.

Usage as a module

Web Form Loader can also be installed as an NPM package:

npm install @finapi/web-form
NONE

This package exports functions load() and unload(). It also provides TypeScript type declarations.

An example use in React framework could look like this:

import React, { useCallback } from "react";
import { load } from "@finapi/web-form";

function App() {
  return <FinApiWebForm />;
}

function FinApiWebForm() {
  const createWebForm = useCallback(async (target: HTMLElement) => {
    // Replace following line with real REST request to create Web Form and its token
    const token = await Promise.resolve("token");
    load(target, { token: token  });
  }, []);

  const containerRef = (container: HTMLDivElement) => {
    createWebForm(container);
  };

  return <div ref={containerRef}></div>;
}

export default App;
TYPESCRIPT

Web Form Loader module requires minimum ES5 support.

Docs

Web Form Loader typedoc can be found here: https://webform-dist.finapi.io/latest/docs/modules.html

Versions and tags

A list of all the available versions can be found in the NPM version history.

  • latest - stable release version that is tested and synced with the live production environment.

  • alpha - an unstable pre-release version that might be out of sync with the live production environment.

Demo

We have prepared mini-DEMO(s) on how standalone and embeddable Web Forms could look. Please feel free to take a look.

00:00 General Introduction
01:45 Explanation on how standalone Web Form works
05:14 Demo
12:05 Explanation on how to embed the Web Form into a customer web page
15:00 Demo
19:42 Explanation on how to integrate the Web Form into an Android app
21:51 Demo