React Native

Check out some examples of how to set up deeplinks and listen for webview redirects in React Native 📱.


In order to be able to use the hosted widget in your React Native app, make sure that you:

Handle events in your webview

In the code sample below you can see an example of how to listen and handle for events within your 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 = `${token}`;

  useEffect(() => {
  }, [belvoWidgetURL, payload]);

  const buildPayload = rawPayload => {
    return Object.keys(rawPayload)
      .map(key => key + '=' + rawPayload[key])

  const handleBelvoEvent = event => {
    const webviewEvent = new URL(event.url);

    if (webviewEvent.protocol === 'belvowidget:') {
      const parseParams = Object.fromEntries(webviewEvent.searchParams);

      switch (webviewEvent.hostname) {
        case 'success':
          const {link, institution} = parseParams;
          // Do something with the link and institution.
          return false;
        case 'exit':
          // If the redirect starts with "exit",
          // Do something with the data.
          return false;
        case 'error':
          const {error, error_message} = parseParams;
          // If the redirect starts with "error",
          // Do something with the error data.
          return false;
      return false;
    return true;

  return (
        uri: belvoURI,