Launch the demo

Once you have your API keys, it's time to run the Truv React Native Demo app locally.

Make sure you have node and yarn installed.

1. git clone [email protected]:truvhq/demo-react-native.git
2. cd demo-react-native
3. yarn
4. yarn start

Step-by-step overview

This flow involves a user, the application front end, the application back end and the Truv. You can see a visual diagram of tokens and data exchange in Bridge section of docs.

1. Authorize and initialize Bridge

The app sends an API request to Truv for bridge_token.

fetch(`https://prod.citedelid.com/v1/bridge-tokens/`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Access-Client-Id': '123456',
        'X-Access-Secret': 'a1b2c3d4f5g6',
      },
      body: JSON.stringify({
        product_type: 'income',
        provider_id: 'adp',
      }),
    })

The app uses our SDK to load a mobile page from Truv's CDN with bridge_token into WebView. You need to provide a valid bridge_token to the component.

<TruvBridge
  bridgeToken="3ksd54jgn8tk7k4tyjds2sfnjsrt"
  onClose={() => {
    console.log('bridge closed');
  }}
  onError={() => {
    console.log('bridge error');
  }}
  onEvent={(event) => console.log('event from bridge: ', event)}
  onLoad={() => {
    console.log('bridge loaded');
  }}
  onSuccess={() => {
    console.log('bridge succeeded');
  }}
/>

SDK provides callbacks for events happened on the page. You can use onLoad, onClose, onSuccess, onError and onEvent callbacks