Web integration (old)

Plain HTML integration

Include the Fintoc script in the HTML of each page that uses the Widget.

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

window.onloadWait for the browser to load the Fintoc script before calling its functions. Use the native window.onload event to run code after the script loads.

ES module integration

You can also install the @fintoc/fintoc-js library through npm and use the Widget as an ES module.

npm install @fintoc/fintoc-js

The library exports the asynchronous getFintoc method, which 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

Include the Fintoc script in your application or call getFintoc from the @fintoc/fintoc-js library. You can then use the Fintoc class to connect an account at a financial institution.

Javascript

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

Call widget.open() to open the Widget.

Configure the Widget with the following parameters:

Parameter	Type	Description
`publicKey`	`string`	Public key that identifies your web application or web page in Fintoc. Fintoc assigns each `Link` created with the key to the organization or user that owns the key. The prefix selects the environment: sandbox keys start with `pk_test_`, and production keys start with `pk_live_`.
`holderType`	`string`	Type of account to connect to Fintoc. One of `business` or `individual`. For payment initiation, use `individual`.
`product`	`string`	Product and type of `Link` to create. One of `movements`, `subscriptions`, `invoices`, or `payments`.
`country`	`string`	Two-letter ISO 3166-1 alpha-2 country code for the connection. One of `cl` or `mx`. Defaults to `cl`.
`institutionId`	`string`	Identifier of a financial institution to preselect. For example, `cl_banco_estado` opens the Widget with Banco Estado selected. Check availability with the list institutions endpoint before preselecting an institution.
`username`	`string` or `object`	Username to prefill when making a payment. See the username object attributes. If you send a string, the `editable` attribute uses its default value.
`webhookUrl`	`string`	URL that receives the new `Link` and its `link_token` after successful creation. Only `movements` and `invoices` use this parameter. Integrations for `payments` and `subscriptions` do not need it.
`widgetToken`	`string`	Token created by your backend to initialize and configure the Widget. Only `payments` and `subscriptions` use this parameter.
`onSuccess`	`function`	Callback that runs after the flow finishes successfully.
`onExit`	`function`	Callback that runs when the Widget closes before the flow finishes.
`onEvent`	`function`	Callback that runs after each meaningful action in the Widget.

Use the Widget callbacks and events correctlyNever use the onSuccess, onExit, or onEvent callbacks to determine the resource state. Use these callbacks only to control your frontend flow while waiting for backend confirmation. Confirm the resource state through webhooks or an exchange token. You can use frontend events to measure Widget usage. Do not rely on frontend events to determine whether resource creation succeeded or failed.

Username object

To prefill a username and control whether it can be edited, send an object with the following attributes:

JSON

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

Prefilling the username increases payment conversionFintoc testing shows that prefilling the username increases payment conversion by approximately 3%.

Attribute	Type	Description
`value`	`string`	Username to prefill in the Widget. For Chile, enter the Chilean tax ID. For Mexico, enter the phone number.
`editable`	`bool`	Whether the username can be edited in the Widget. Defaults to `true`.

After you create a widget object, use its open, close, and destroy methods to control it:

Method	Description
`widget.open()`	Opens the Widget.
`widget.close()`	Closes the Widget without destroying the instance. Call `widget.open()` after `widget.close()` to show the Widget again.
`widget.destroy()`	Removes the Widget instance from your application. To reopen the Widget after calling `widget.destroy()`, create another instance with `Fintoc.create()`.

How to use the widget.destroy() methodFintoc.create(args) embeds an iframe in your application. When developing a single-page application, call widget.destroy() to remove the iframe. To reopen the Widget, create a new instance with Fintoc.create(args).

Home

Resources

Payments

Transfers

Movements

Web integration (old)

Plain HTML integration

ES module integration

How it works

Username object

Methods of the Widget object

​Plain HTML integration

​ES module integration

​How it works

​Username object

​Methods of the Widget object

Plain HTML integration

ES module integration

How it works

Username object

Methods of the Widget object