Para poder usar el hosted widget en tu aplicación React Native, asegúrate de que:
- Puedes crear tokens de
accessen 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.
En el ejemplo de código a continuación, puedes ver un ejemplo de cómo escuchar y manejar eventos dentro de tu webview.
Webview Handling Example
import React, {useState, useEffect} from 'react';
import {WebView} from 'react-native-webview';
import {URL} from 'react-native-url-polyfill';
export default function BelvoWidget({token, payload}) {
const [belvoURI, setBelvoURI] = useState('');
let belvoWidgetURL = `https://widget.belvo.io/?access_token=${token}`;
useEffect(() => {
setBelvoURI(`${belvoWidgetURL}&${buildPayload(payload)}`);
}, [belvoWidgetURL, payload]);
const buildPayload = rawPayload => {
return Object.keys(rawPayload)
.map(key => key + '=' + rawPayload[key])
.join('&');
};
const handleBelvoEvent = event => {
console.log({event});
const webviewEvent = new URL(event.url);
if (webviewEvent.protocol === 'your-url-here:') {
const parseParams = Object.fromEntries(webviewEvent.searchParams);
switch (webviewEvent.hostname) {
case 'success':
const {link, institution} = parseParams;
// Haz algo con el link y la institución.
return false;
case 'exit':
// Si el redireccionamiento comienza con "exit",
// Haz algo con los datos.
return false;
case 'error':
const {error, error_message} = parseParams;
// Si el redireccionamiento comienza con "error",
// Haz algo con los datos del error.
return false;
}
return false;
}
return true;
};
// Inserta código para escuchar eventos adicionales aquí
return (
<WebView
source={{
uri: belvoURI,
}}
originWhitelist={['your-url-here://*']}
onShouldStartLoadWithRequest={handleBelvoEvent}
/>
);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!