@mbenko/web-form v1.4.0

Web Form Loader

For the introduction to what is Web Form please refer to our documentation.

Web Form is bundled as 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 the 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 and the Web (for example CSS styling issues). To make things even easier, we provide you a Web Form Loader.

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

Usage via script

For example, to use Web Form in simple HTML code we could do it like this:

<div id="webFormContainer"></div>
<script src="https://unpkg.com/@finapi/web-form/dist/web-form.min.js"></script>

<script>
    const loadWebForm = function (token) {
        FinApiWebForm.load(
            document.querySelector("#webFormContainer"),
            { token: token }
        );
    };
    const unloadWebForm = function (token) {
        FinApiWebForm.unload();
    };
</script>

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

At one moment Web Form Loader will allow rendering only one instance of Web Form. If there is already some Web Form injected to page, Loader will first unload it and only then it will inject new instance.

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

UNPKG exposes files from NPM packages. If in the URL is no version defined, it will always grab a file from the latest NPM package version. For more details please visit https://unpkg.com/

Usage as module

Web Form Loader can be installed also as NPM package:

npm install @finapi/web-form

This package exports again function load and unload, and additionally it provides also TypeScript type declarations.

An example use in React framework could look like this:

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

interface WebFormComponentProps {
  properties: WebFormProps;
}

export default function WebFormComponent(props: WebFormComponentProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const { webFormProperties } = { ...props };

  const loadWebForm = useCallback(() => {
    if (containerRef.current) {
      load(containerRef.current, webFormProperties);
    }
  }, [webFormProperties]);

  const unloadWebForm = useCallback(() => {
    unload();
  }, []);

  return (
    <div>
      <button onClick={unloadWebForm}>Unload Web Form</button>
      <div ref={containerRef}></div>
    </div>
  );
}

Web Form Loader module requires as minimum ES5 support.