Integración web (OLD)

Integración con HTML plano

Para integrar el Widget solo necesitas incluir el script de Fintoc en tu HTML. El script de Fintoc debe estar en cada página donde se necesite usar el Widget.

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

window.onloadRecuerda que, al importar un script de JavaScript, si intentas usar funciones antes de que el navegador cargue el script, se lanzará un error. Puedes resolver esto usando el evento nativo del navegador window.onload.

Integración como módulo ES

¡También puedes usar el Widget como un módulo ES a través de npm! ¡Solo usa nuestra librería @fintoc/fintoc-js!

npm install @fintoc/fintoc-js

¡La librería exporta un método async getFintoc que devuelve el objeto Fintoc!

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

Cómo funciona

Al incluir el script de Fintoc en tu aplicación (o después de usar el método getFintoc de la librería @fintoc/fintoc-js), tendrás acceso a la clase Fintoc, que te permitirá crear conexiones con una institución financiera desde dentro de tu aplicación.

Javascript

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

Nota: recuerda llamar al método .open() para abrir el widget.

Parámetro	Tipo	Descripción
publicKey	string	El `publicKey` se usa para identificar tu aplicación web o página web dentro de Fintoc. Los Links creados con un `publicKey` se asignarán a la organización o usuario que es dueño de dicho `publicKey`. Este token determinará si estás usando el sandbox o el entorno de producción. Recuerda que el `publicKey` del sandbox empieza con `pk_test_`, mientras que el de producción empieza con `pk_live_`.
holderType	string	El parámetro `holderType` puede ser `business` o `individual`, y determina el tipo de cuenta que se conectará a Fintoc. Para el producto payment initiation siempre debes usar `individual` como holder_type.
product	string	El parámetro `product` puede ser `movements`, `subscriptions`, `invoices` o `payments`, y determina el producto y el tipo de Link que se creará.
country	string	El parámetro `country` debe ser el código `ISO 3166-1 alfa-2` del país al que estás intentando conectarte. Puede ser `cl` o `mx`. Por defecto es `cl`.
institutionId	string	* Opcional*. El parámetro `institutionId` corresponde al `id` de una institución financiera. Si se incluye, dicha institución será preseleccionada. Por ejemplo, el valor `cl_banco_estado` haría que el widget se abra con Banco Estado por defecto. Antes de preseleccionar una institución, revisa la disponibilidad usando el endpoint list institutions.
username	string u object	* Opcional*. El `username` rellena previamente el campo username al hacer un pago. Los atributos del objeto username están abajo. Si se envía un string, tomará el valor por defecto para el atributo editable.
webhookUrl	string	* Solo se usa para los productos `movements` e `invoices`, si estás integrando `payments` o `subscriptions` no lo necesitas. El parámetro `webhookUrl` corresponde a la URL que recibirá una solicitud con el nuevo Link* después de su creación exitosa, incluyendo su link_token.
widgetToken	string	El parámetro `widgetToken` corresponde al token creado por el backend que inicializa y configura el widget. Por ahora, solo los productos `payments` y `subscriptions` usan un parámetro `widgetToken`.
onSuccess	function	El parámetro `onSuccess` corresponde a un callback que será llamado después de que el flujo termine exitosamente.
onExit	function	El parámetro `onExit` corresponde a un callback que será llamado después de que un usuario cierre el Widget prematuramente.
onEvent	function	El parámetro `onEvent` corresponde a un callback que será llamado cada vez que un usuario ejecute una acción significativa en el Widget.

Usa los callbacks y eventos del Widget correctamenteNunca uses los callbacks onSuccess, onExit u onEvent para obtener el estado del recurso que se está creando. Solo deberías usar estos callbacks para manejar el flujo de tu aplicación frontend mientras esperas la confirmación del backend, ya sea vía Webhooks o intercambiando algún exchange token. Los eventos del frontend también se pueden usar para generar métricas sobre el uso general del widget, pero nunca deberías depender únicamente de ellos para asumir que un recurso fue creado o falló en ser creado.

Objeto Username

Para rellenar previamente un username y cambiar los valores por defecto, puedes enviar un objeto con los siguientes atributos:

JSON

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

Usar la opción de pre-rellenado aumenta la conversión de pagosNuestras pruebas han mostrado que usar el pre-rellenado puede aumentar la conversión en alrededor de un 3%.

Atributo	Tipo	Descripción
value	string	El username que se pre-rellenará en el widget. En Chile debes ingresar el RUT del usuario y en México debes ingresar el número de teléfono del usuario.
editable	bool	Si el campo es editable o no en el widget. Por defecto está en `true`.

Una vez que se crea un objeto widget, puedes usar sus métodos para interactuar con él. Los métodos disponibles son open, close y destroy.

Método	Descripción
widget.open()	El método `open` abre el Widget cada vez que es llamado.
widget.close()	El método `close` cierra el widget cada vez que es llamado. No destruye la instancia del widget, solo lo oculta del usuario. Puedes llamar al método `open` después del método `close` y el widget volverá a mostrarse.
widget.destroy()	El método `destroy` elimina la instancia del Widget de tu aplicación. Si quieres volver a abrir el widget después de llamar al método `destroy`, necesitarás crear otra instancia del Widget usando `Fintoc.create()`.

Cómo usar el método widget.destroy()Al usar Fintoc.create(args), un iframe se embebe dentro de tu aplicación. A veces (principalmente al desarrollar una SPA), podrías necesitar eliminar este iframe. Esto se puede hacer usando el método destroy. Si luego necesitas volver a abrir el widget, necesitarás crear una nueva instancia usando el método Fintoc.create(args) nuevamente.

Inicio

Recursos

Pagos

Transferencias

Domiciliación bancaria

Movimientos

Integración web (OLD)

Integración con HTML plano

Integración como módulo ES

Cómo funciona

Objeto Username

Métodos del objeto Widget

​Integración con HTML plano

​Integración como módulo ES

​Cómo funciona

​Objeto Username

​Métodos del objeto Widget

Integración con HTML plano

Integración como módulo ES

Cómo funciona

Objeto Username

Métodos del objeto Widget