Documentación de Widget de Factoring

Bienvenido a la documentación del widget de Factoring de Fingo. En esta documentación te explicaremos como embeber Fingo en tu aplicación y como interactuar con fingo a través de tu aplicación. . El widget de Fingo es una manera para que los usuarios de tu plataforma puedan obtener financiamiento a través de fingo sin dejar tu aplicación. Esta integración funciona a través del uso de un iframe el cual desplegará nuestro widget de financiamiento.

Proceso de Autenticación y Comunicación entre Servidor y Cliente con Fingo

Para permitir que los usuarios de tu aplicación interactúen de manera segura con Fingo, es necesario un proceso de autenticación seguro. Con el uso de las llaves de encriptación que te entregará Fingo es necesario que generes los tokens necesarios en tu servidor para poder desplegar el widget de factoring en tu plataforma.

Requisitos para la instalación

Para poder acceder al Widget de factoring necesitas distintas llaves que te proporcionará Fingo:

También es necesario que nos indiques los dominios por los cuales quieres acceder al widget de factoring.

Paso 1: Encriptación de la Información del Usuario en el Servidor

import jwt
import os

payload = {
    "company_info": {
        "rut": "7654321-1",
        "name": "Ejemplo S.A." 
    },
    "user_info": {
        "email": "usuario@example.com", 
        "rut": "12345678-9", 
        "phone_number": "+56912345678", 
        "first_name": "Test", 
        "last_name": "Apellido" 
    },
    "widget_key": "example_widget_key"
}

# Obtener la llave secreta desde las variables de entorno
fingo_secret_key = os.getenv('FINGO_SECRET_KEY')

# Encriptar el payload usando la llave secreta
widget_token = jwt.encode(payload, fingo_secret_key, algorithm='HS256')

Fingo proporciona una llave de encriptación única que debes usar para cifrar la información del usuario y su empresa. Esta encriptación debe realizarse en el servidor antes de enviar la información encriptada al cliente para desplegar el widget de Fingo. Como el propósito de este proceso es que tu usario pueda financiarse con Fingo, se necesita tanto la información de quien está accediendo como la empresa que está utilizando en tu plataforma. De esta manera se le creará la cuenta y luego seguirá el flujo de factoring. A continuación mostramos un ejemplo de código de encriptación y la explicación de las variables.

Para la informaciónd de la empresa es necesario armar un payload con la información de la empresa y del usuario y el widget a solicitar. En este caso, el payload contiene la información de la empresa y del usuario, que se encripta usando la llave secreta proporcionada por Fingo. El payload tiene el formato de un objeto JSON y contiene las siguientes variables:

Variables de la empresa

Para la empresa es necesario el rut de la empresa autenticada y su razón social. Esta información va dentro del parámetro company_info.

Variables del usuario

Para el usuario es necesario el email, el rut, el número de teléfono, el nombre y el apellido. Esta información va dentro del parámetro user_info.

Variables del widget

Para el widget es necesario la llave del widget de Fingo. Este campo va en el payload con el nombre widget_key. Este campo nos indica de qué producto se trata

En este paso, hemos creado un token JWT que contiene la información del usuario y de la empresa. Este token está encriptado usando la llave secreta proporcionada por Fingo (FINGO_SECRET_KEY).

Paso 2: Desplegar el Widget de Fingo en tu plataforma

import React from 'react';
import Fingo from 'fingo-factoring-widget'; // Versión 2.1.3

// Variables obtenidas desde el servidor
const WIDGET_TOKEN = ''; // Token único para el usuario y la empresa, generado en el servidor
const AUTH_TOKEN = ''; // Tu API KEY proporcionada por Fingo

const SDK = () => {
  // Crear una instancia del widget de Fingo
  const FingoWidget = new Fingo(
    WIDGET_TOKEN,
    AUTH_TOKEN,
  );

  return (
    <div id="buttons-container">
      <button onClick={() => FingoWidget.open()}>Abrir Widget</button>
      <button onClick={() => FingoWidget.close()}>Cerrar Widget</button>
      <div id="iframe-container"></div> {/* Contenedor para el iframe del widget */}
    </div>
  );
};

export default SDK;

Una vez que tienes la información del usuario encriptada, puedes proceder a desplegar el widget de Fingo en tu página web. Para este paso. disponibilizamos un paquete en npm el cual puedes instalar en tu proyecto. Este maneja el despliegue del Iframe. Este paquete es 'fingo-factoring-widget', entrega un objeto llamado Fingo, el cual recibe los parámetros del token generado en el servidor y tu API KEY, luego permite abrir y cerrar el widget de factoring.

El widget siempre buscará desplegarse en el contenedor con id "iframe-container". El flujo de despliegue del widget puede depender de tus requisitos, en este caso quisimos ejemplificar los métodos de abrir y cerrar el widget con botones.

Métodos

El objeto Fingo trae los siguientes métodos:

• Fingo.open() - Abre el widget de factoring y autentica al usuario.
• Fingo.close() - Cierra el widget de factoring. Esta forma de cerrar permite volver a abrirlo con la misma sesión.
• Fingo.destroy() - Destruye el widget de factoring. El cual equivale a cerrar el widget y eliminar el iframe con su información. Te dejamos un ejemplo de cómo puedes desplegar el widget en tu página web en React.

Entorno de prueba

import React from 'react';
import Fingo from 'fingo-factoring-widget'; // Versión 2.1.3

// Variables obtenidas desde el servidor
const WIDGET_TOKEN = ''; // Token único para el usuario y la empresa, generado en el servidor
const AUTH_TOKEN = ''; // Tu API KEY proporcionada por Fingo

const SDK = () => {
  // Crear una instancia del widget de Fingo
  const FingoWidget = new Fingo(
    WIDGET_TOKEN,
    AUTH_TOKEN,
    'staging' // Entorno de prueba
  );

  return (
    <div id="buttons-container">
      <button onClick={() => FingoWidget.open()}>Abrir Widget</button>
      <button onClick={() => FingoWidget.close()}>Cerrar Widget</button>
      <div id="iframe-container"></div> {/* Contenedor para el iframe del widget */}
    </div>
  );
};

export default SDK;

El widget de Fingo se puede probar en un entorno de desarrollo local. Para esto Fingo te puede entregar llaves de prueba para que puedas probar el widget en tu entorno de desarrollo. Luego para autenticar con nuestro entorno de prueba debes entregar un tercer parámetro en la instancia del widget con el valor staging.