Saltar al contenido
Última actualización

React Native

Requisitos previos

Para poder usar el hosted widget en tu aplicación React Native, asegúrate de que:

  • Puedes crear tokens de access en tu servidor.
  • Sabes cómo implementar webviews para tu plataforma. Para más información, consulta los artículos sobre webview en la página de github de React Native.

Manejar eventos en tu webview

En el siguiente ejemplo de código puedes ver cómo escuchar y manejar eventos dentro de tu webview.

Webview Handling Example
import React, {useState, useEffect} from 'react';
import {Linking} from 'react-native';
import {WebView} from 'react-native-webview';
import {URL} from 'react-native-url-polyfill';

const BELVO_URI = 'https://widget.belvo.io/';

export default function BelvoWidget({token, payload}) {
  const [belvoURI, setBelvoURI] = useState('');

  useEffect(() => {
    setBelvoURI(`${BELVO_URI}?access_token=${token}&${buildPayload(payload)}`);
  }, [token, payload]);

  const buildPayload = (rawPayload) =>
    Object.keys(rawPayload)
      .map((key) => `${key}=${rawPayload[key]}`)
      .join('&');

  const handleBelvoEvent = (event) => {
    const {url} = event;

    // Abre las URLs de instituciones / externas https en el navegador del sistema — no las cargues dentro del WebView.
    if (url.startsWith('https://') && !url.startsWith(BELVO_URI)) {
      Linking.openURL(url);
      return false;
    }

    const webviewEvent = new URL(url);
    if (webviewEvent.protocol === 'your-url-here:') {
      const params = Object.fromEntries(webviewEvent.searchParams);

      switch (webviewEvent.hostname) {
        case 'success': {
          const {link, institution} = params;
          // Haz algo con el link y la institución.
          return false;
        }
        case 'exit':
          // Maneja la salida.
          return false;
        case 'error':
          // Maneja el error (params.error, params.error_message).
          return false;
      }
      return false;
    }

    return true;
  };

  return (
    <WebView
      source={{uri: belvoURI}}
      originWhitelist={['your-url-here://*']}
      onShouldStartLoadWithRequest={handleBelvoEvent}
    />
  );
}
Importante

Las URLs de instituciones y otras externas https:// deben abrirse en el navegador del sistema usando Linking.openURL() — no cargarlas dentro del WebView. Cargar estas URLs en el WebView puede romper los redireccionamientos de las instituciones.

Escuchando eventos adicionales

Nuestro widget para webviews también envía datos adicionales sobre los eventos que el usuario encuentra a lo largo del widget. Por ejemplo, cuando el usuario pasa de la pantalla de selección de institución a la pantalla de inicio de sesión de credenciales, nuestro widget enviará un evento.

Los eventos se envían como cargas JSON con el siguiente esquema:

PAGE_LOAD Event
{
    "eventName": "PAGE_LOAD",
    "metadata":{
        "page": "/institutions", // Página a la que se dirige el usuario
        "from": "/consent", // Página donde estaba el usuario anteriormente
        "institution_name": "", // Nota: Este campo solo aparece DESPUÉS de que hayan seleccionado una institución
    }
}

Para escuchar estos eventos, solo agrega el siguiente código a tu aplicación:

<WebView
      source={{
        uri: // ...
      }}
      onMessage={(event) => {
        // do something with event.nativeEvent.data
      }}
/>

¡Listo! ¡Ahora puedes escuchar eventos adicionales en tu webview!

iOS (Swift)

Android (Kotlin)