React Native
Requisitos previos
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.
Manejar eventos en tu webview
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}
/>
);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!