Web Integration

Plain HTML Integration

To integrate the Widget, you just need to include the Fintoc script on your HTML. The Fintoc script needs to be on each page where the Widget needs to be used.

<script src="https://js.fintoc.com/v1/"></script>

📘
window.onload
Remember that, when importing a JavaScript script, if you try to use functions before the browser loads the script, an error will be raised. You can solve this by using the native browser event window.onload.

ES Module Integration

You can also use the Widget as an ES module through npm! Just use our @fintoc/fintoc-js library!

npm install @fintoc/fintoc-js

The library exports an async getFintoc method that returns the Fintoc object!

import { getFintoc } from '@fintoc/fintoc-js';

// You can read more about the parameters below
const options = { ... };

const main = async () => {
  const Fintoc = await getFintoc();
  const widget = Fintoc.create(options);
  widget.open();
}

main();

How it works

When including the Fintoc script on your application (or after using the getFintoc method of the @fintoc/fintoc-js library), you will have access to the Fintoc class, that will allow you to create connections with a financial institution from within your application.

const widget = Fintoc.create({
  holderType,
  product,
  publicKey,
  webhookUrl,
  country,
  institutionId,
  username,
  widgetToken,
  onSuccess,
  onExit,
  onEvent,
})

📘
Note: remember to call the .open() method in order to raise the widget.

Parameter	Type	Description
publicKey	string	The `publicKey` is used to identify your web application or web page within Fintoc. Links created with a `publicKey` will get assigned to the organization or user that owns said `publicKey`. This token will determine whether you're using the sandbox or the production environment. Remember that the `publicKey` of the sandbox starts with `pk_test_`, while the production one starts with `pk_live_`.
holderType	string	The `holderType` parameter can be `business` or `individual`, and determines the type of account that will be connected to Fintoc.
product	string	The `product` parameter can be `movements`, `subscriptions`, `invoices`, or `payments`, and determines the product and type of Link that will be created.
country	string	The `country` parameter must be the `ISO 3166-1 alfa-2` code of the country to which you're trying to connect. It can be `cl` or `mx`. Defaults to `cl`.
institutionId	string	Optional. The `institutionId` parameter corresponds to the `id` of a financial institution. If included, said institution will be pre-selected. For example, the value `mx_banco_banamex` would command the widget to open with Banamex by default.
username	string	Optional. The `username` parameter corresponds to the username of a financial institution. If included it will fill the username field of the financial institution login form and prevent the user from editing it.
webhookUrl	string	Only used for `movements` and `invoices` products, if you are integrating `payments` or `subscriptions` you don't need this. The `webhookUrl` parameter corresponds to the URL that will get a request with the new Link after its successful creation, including its link_token.
widgetToken	string	The `widgetToken` parameter corresponds to the token created by the backend that initializes and configures the widget. Right now, only the `payments` and `subscriptions` products uses a `widgetToken` parameter.
onSuccess	function	The `onSuccess` parameter corresponds to a callback that will be called after a Link gets created successfully.
onExit	function	The `onExit` parameter corresponds to a callback that will be called after a user closes the Widget prematurely.
onEvent	function	The `onEvent` parameter corresponds to a callback that will be called every time after a user executes a meaningful action on the Widget.

Methods of the Widget object

Once a widget object gets created, you can use its methods to interact with it. The available methods are open, close and destroy.

Method	Description
widget.open()	The `open` method opens the Widget whenever it is called.
widget.close()	The `close` method closes the widget whenever it is called. It does not destroy the widget instance, it only hides it from the user. You can call the `open` method after the `close` method and the widget will show again.
widget.destroy()	The `destroy` method removes the Widget instance from your application. If you want to re-open the widget after calling the `destroy` method, you will need to create another Widget instance using `Fintoc.create()`.

📘
How to use the widget.destroy() method
When using Fintoc.create(args), an iframe gets embedded within your application. Sometimes (primarily when developing an SPA), you might need to remove this iframe. This can get done using the destroy method. If you then need to re-open the widget, you will need to create a new instance using the Fintoc.create(args) method once again.