...
This means you can attach a 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.
| Info |
|---|
Type definitions as well as all options supported by the Web Form Loader can always be found here: https://webform-dist.finapi.io/latest/docs/modules.html |
Usage
Usage via script
To use Web Form in simple HTML code, one could do it like this:
| Code Block | ||
|---|---|---|
| ||
<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,
// these are examples of how optional properties can be set:
targetUrl: "https://webform-live.finapi.io",
layoutConfig: "xs",
backToAppUrl: "https://customer.app",
customerSupportUrl: "https://finapi.io",
language: "de"
},
{
onLoaded: function() {
// handle "onLoaded" event
},
onComplete: function() {
// handle "on completeonComplete" event
},
onFail: function() {
// handle "on failonFail" event
},
onAbort: function() {
// handle "on abortonAbort" event
},
onLoadError: function() {
// handle "on load erroronLoadError" event
}
}
);
};
document.addEventListener("DOMContentLoaded", function() {
createWebForm();
});
</script> |
...
| Code Block | ||
|---|---|---|
| ||
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,
// these are examples of how optional properties can be set:
targetUrl: "https://webform-live.finapi.io",
layoutConfig: "xs",
backToAppUrl: "https://customer.app",
customerSupportUrl: "https://finapi.io",
language: "de"
},
{
onLoaded: function() {
// handle "onLoaded" event
},
onComplete: function() {
// handle "on completeonComplete" event
},
onFail: function() {
// handle "on failonFail" event
},
onAbort: function() {
// handle "on abortonAbort" event
},
onLoadError: function() {
// handle "on load erroronLoadError" event
}
}
);
}, []);
const containerRef = (container: HTMLDivElement) => {
if (container) {
createWebForm(container);
}
};
return <div ref={containerRef}></div>;
}
export default App; |
...