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();

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.

📘

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.

How to set up and deploy the widget

Depending on the product you're using, there's different ways to set up and deploy the widget on your front end.

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.

📘

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

Payment Initiation

const widget = Fintoc.create({
  product,
  publicKey,
  sessionToken,
  onSuccess,
  onExit,
  onEvent,
})

Movements

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

Direct Debit

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

❗️

Use the Widget callbacks and events correctly

Never use the onSuccess, onExit or onEvent callbacks to get the state of the resource being created. You should only use these callbacks to handle the flow of your frontend application, while waiting backend confirmation, either via Webhooks or by exchanging some exchange token. Frontend events can also be used to generate metrics about general widget usage, but you should never rely solely on them to assume a resource was created or failed to be created.

Username and holderId Objects

To pre-fill a username or a holderId and change the default values, you can send an object with the following attributes

username = {
  value: "123456789",
  editable: true
}

holderId = {
  value: "123456789",
  editable: true
}

📘

Using the pre-fill option boosts payment conversion

Our testing has shown that using the pre-fill can boost conversion by around 3%