Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Truv Bridge SDK for React
@truv/react | npm | GitHub
npm install @truv/react
yarn add @truv/react
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();
}
}}
/>
</>
);
}
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.onEvent callback receives a third source parameter. See Bridge Events for all event types, payloads, and error codes.
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);
}}
/>
</>
);
}
Was this page helpful?