Skip to main content
Package: @truv/react | npm | GitHub

​
Install

npm install @truv/react
Or with yarn: 
yarn add @truv/react

​
Embedded Orders

Use isOrder={true} when rendering the Bridge component for multi-connection verification workflows (VOIE, VOE, VOA). 
import { useState } from 'react';
import { TruvBridge } from '@truv/react';

function VerificationFlow({ bridgeToken }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Verify Income</button>
      <TruvBridge
        bridgeToken={bridgeToken}
        isOrder={true}
        isOpened={isOpen}
        onClose={() => setIsOpen(false)}
        onSuccess={() => {
          console.log('User connected all accounts');
        }}
        onEvent={(type, payload, source) => {
          if (type === 'COMPLETED' && source === 'order') {
            navigateToNextStep();
          }
        }}
      />
    </>
  );
}
Wait for the COMPLETED event with source: "order" before advancing the user in your application. Do not use onSuccess or onClose to advance. The order may still have pending connections.
The onEvent callback receives a third source parameter. See Bridge Events for all event types, payloads, and error codes.

​
Bridge Widget

Use the Bridge component without isOrder for single-connection flows like Direct Deposit Switch and Paycheck Linked Lending. 
import { useState } from 'react';
import { TruvBridge } from '@truv/react';

function DepositSwitch({ bridgeToken }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Connect Payroll</button>
      <TruvBridge
        bridgeToken={bridgeToken}
        isOpened={isOpen}
        onClose={() => setIsOpen(false)}
        onSuccess={(publicToken, metaData) => {
          console.log('public_token:', publicToken);
        }}
      />
    </>
  );
}