React Native
Pré-requisitos
Para poder usar o hosted widget no seu aplicativo React Native, certifique-se de que você:
- Pode criar tokens de
accessno seu servidor. - Sabe como implementar webviews para sua plataforma. Para mais informações, consulte os artigos sobre webview na página do github do React Native.
Manipular eventos na sua webview
No exemplo de código abaixo, você pode ver um exemplo de como escutar e manipular eventos dentro da sua webview.
Exemplo de Manipulação de Webview
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;
// Faça algo com o link e a instituição.
return false;
case 'exit':
// Se o redirecionamento começar com "exit",
// Faça algo com os dados.
return false;
case 'error':
const {error, error_message} = parseParams;
// Se o redirecionamento começar com "error",
// Faça algo com os dados do erro.
return false;
}
return false;
}
return true;
};
// Insira o código para escutar eventos adicionais aqui
return (
<WebView
source={{
uri: belvoURI,
}}
originWhitelist={['your-url-here://*']}
onShouldStartLoadWithRequest={handleBelvoEvent}
/>
);Ouvindo eventos adicionais
Nosso widget para webviews também envia dados adicionais sobre eventos que o usuário encontra ao longo do widget. Por exemplo, quando o usuário vai da tela de seleção de instituição para a tela de login de credenciais, nosso widget enviará um evento.
Os eventos são enviados como payloads JSON com o seguinte esquema:
PAGE_LOAD Event
{
"eventName": "PAGE_LOAD",
"metadata":{
"page": "/institutions", // Página para a qual o usuário é direcionado
"from": "/consent", // Página onde o usuário estava anteriormente
"institution_name": "", // Nota: Este campo só aparece DEPOIS que eles selecionaram uma instituição
}
}Para ouvir esses eventos, basta adicionar o seguinte código à sua aplicação:
<WebView
source={{
uri: // ...
}}
onMessage={(event) => {
// faça algo com event.nativeEvent.data
}}
/>Pronto! Agora você pode ouvir eventos adicionais na sua webview!