Web Integration (OLD)
Reference to integrate the Widget on your web application or web page
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.onloadRemember that, when importing a JavaScript
script
, if you try to use functions before the browser loads thescript
, an error will be raised. You can solve this by using the native browser eventwindow.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 |
holderType | string | The |
product | string | The |
country | string | The |
institutionId | string |
|
username | string or object |
The attributes of the username object are below. If a string is sent, it will take the default value for the editable attribute. |
webhookUrl | string |
The |
widgetToken | string | The Right now, only the |
onSuccess | function | The |
onExit | function | The |
onEvent | function | The |
Use the Widget callbacks and events correctlyNever use the
onSuccess
,onExit
oronEvent
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 Object
To pre-fill a username and change the default values, you can send an object with the following attributes
username = {
value: "123456789",
editable: true
}
Using the pre-fill option boosts payment conversionOur testing has shown that using the pre-fill can boost conversion by around 3%
Attribute | Type | Description |
---|---|---|
value | string | The username that will be pre-filled on the widget. In Chile you should input the user's RUT and in Mexico you should input the user's phone number. |
editable | bool | Whether the field is editable or not in the widget. By default it's set to true . |
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 thewidget.destroy()
methodWhen using
Fintoc.create(args)
, aniframe
gets embedded within your application. Sometimes (primarily when developing an SPA), you might need to remove thisiframe
. This can get done using thedestroy
method. If you then need to re-open the widget, you will need to create a new instance using theFintoc.create(args)
method once again.
Updated 11 days ago