Saltar al contenido principal

Widget

Existen 3 ambientes:

  • El ambiente Sandbox se usa para integrar el widget. Aquí se reciben usuarios y credenciales ficticias, sin necesidad de tener una cuenta real de las entidades que se van a consultar.
    • URL: https://widget-sandbox.boufin.com
  • El ambiente Staging se usa para probar que la integración este correcta en los ambientes de QA del cliente.
    • URL: https://widget-staging.boufin.com
  • El entorno de Producción se utiliza para la puesta en marcha del widget en el ambiente real del cliente. Antes de llegar a este punto, es recomendable realizar pruebas en el ambiente de sandbox y de stage para asegurarse de que la integración se realiza correctamente y que se obtienen los resultados esperados.
    • URL: https://widget.boufin.com

Widget Web​

Para insertar el widget Boufin en tu sitio u aplicación web, se recomienda seguir el siguiente ejemplo:

Se debe generar el Token OTP en el backend previamente

<head>
  <script src="https://[URL]/cdn/widget.bundle.js"></script>
</head>
<body>
  <div id="boufin-widget"></div>

  <script>
    const widget = new BoufinWidget({
      containerId: 'boufin-widget', // id del contenedor
      onStart: (taskId) => {
        // evento que retorna el taskId cuando se ha iniciado la tarea de extracción.
      },
      onSuccess: (taskId) => {
        // evento que retorna el taskId cuando ha terminado con éxito la tarea
        // de extracción.
      },
      onError: (error) => {
        // evento que ocurre cuando hay un error en el flujo del widget.
        // retorna el mensaje de error.
      },
      onClose: () => {
        // evento que ocurre cuando se da click al botón cerrar al término del flujo.
      }
    });

    widget.create(tokenOtp);
  </script>
</body>

Widget WebView​

React Native​

Para desplegar el widget Boufin en un WebView de React Native, Seguir los siguientes pasos:

  • Generar el Token OTP desde el backend
  • Seguir la documentación del WebView https://github.com/react-native-webview/react-native-webview y pasar al prop source la uri https://[URL]?token_otp={token_otp}
  • Los eventos del widget son enviados como mensajes usando ReactNativeWebView.postMessage, para capturarlos se recomienda seguir el siguiente ejemplo:
import { WebView } from 'react-native-webview';

export default function BoufinWidget({ token }) {
  const widgetUri = `https://[URL]?token_otp=${token}`;

  const messageHandler = (event) => {
    const { code, data } = JSON.parse(event.nativeEvent.data);
    switch (code) {
      case 'start':
        // evento que retorna el taskId cuando se ha iniciado la tarea de extracción.
        return;
      case 'success':
        // evento que retorna el taskId cuando ha terminado con éxito la tarea
        // de extracción.
        return;
      case 'error':
        // evento que ocurre cuando hay un error en el flujo del widget.
        // retorna el mensaje de error.
        return;
      case 'close':
        // evento que ocurre cuando se da click al botón cerrar al término del flujo.
        return;
      default:
        return;
    }
  };

  return (
    <WebView
      source={{ uri: widgetUri }}
      originWhitelist={['[SUBDOMAIN].boufin.com*']}
      onMessage={messageHandler}
    />
  );
}