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.
No exemplo de código abaixo, você pode ver um exemplo de como escutar e manipular eventos dentro da sua webview.
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;
// Abra URLs de instituições / externas https no navegador do sistema — não as carregue dentro do 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;
// Faça algo com o link e a instituição.
return false;
}
case 'exit':
// Manipule a saída.
return false;
case 'error':
// Manipule o erro (params.error, params.error_message).
return false;
}
return false;
}
return true;
};
return (
<WebView
source={{uri: belvoURI}}
originWhitelist={['your-url-here://*']}
onShouldStartLoadWithRequest={handleBelvoEvent}
/>
);
}URLs de instituições e outras externas https:// devem ser abertas no navegador do sistema usando Linking.openURL() — não carregadas dentro do WebView. Carregar essas URLs no WebView pode quebrar redirecionamentos de instituições.
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:
{
"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!