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

​
Install

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

​
Embedded Orders

Use isOrder: true when initializing Bridge for multi-connection verification workflows (VOIE, VOE, VOA). 
import TruvBridge from '@truv/bridge';

const bridge = TruvBridge.init({
  bridgeToken: 'your_bridge_token',
  isOrder: true,
  onLoad: function () {
    console.log('Order page loaded');
  },
  onSuccess: function () {
    console.log('User connected all accounts');
  },
  onClose: function () {
    console.log('Order page closed');
  },
  onEvent: function (type, payload, source) {
    console.log('Event:', type, 'Source:', source);

    if (type === 'COMPLETED' && source === 'order') {
      // Order reached final state — advance the user
      navigateToNextStep();
    }
  }
});

bridge.open();
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 that distinguishes order-page events from connection-widget events. Order page events (source: "order"): 
onEvent('LOAD', undefined, 'order')       // Fires same time as onLoad()
onEvent('CLOSE', undefined, 'order')      // Fires same time as onClose()
onEvent('SUCCESS', undefined, 'order')    // Fires same time as onSuccess()
onEvent('COMPLETED', undefined, 'order')  // Fires on final state (success or skipped)
Connection widget events (source: "bridge"): 
onEvent(bridgeEventType, bridgeEventPayload, 'bridge');
See Bridge Events for the full list of connection widget event types and payloads.

​
Position

The position parameter controls how the embedded order page is displayed. The default type is 'dialog'.
  • { type: 'dialog' }: The bridge appears as a dialog window, which overlays the rest of the interface and disables scrolling.
  • { type: 'inline', container: HTMLElement }: The embedded order page is integrated within an existing element, allowing the interface to function without blocking the rest of the interface or global scrolling. Ensure that your interface functions seamlessly across various devices, particularly on mobile devices such as iPhones and Androids, including compatibility with virtual keyboards.
const bridge = TruvBridge.init({
  bridgeToken: '<token>',
  isOrder: true,
  position: {
    type: 'inline',
    container: document.querySelector('#inline-order-container')
  }
});
There are important requirements when using inline position:
  1. The container element must remain stable while the bridge is open. The container and all its parent elements must not be unmounted or moved to a different parent node.
  2. You must manually close the bridge before removing the parent container, for example when navigating to another page in a single-page application without a full reload.
  3. Only one bridge instance can be open on the page at a time.

​
Bridge Widget

Use the Bridge Widget flow (without isOrder) for single-connection flows like Direct Deposit Switch and Paycheck Linked Lending. 
import TruvBridge from '@truv/bridge';

const bridge = TruvBridge.init({
  bridgeToken: 'your_bridge_token',
  onSuccess: (publicToken, metaData) => {
    console.log('public_token:', publicToken);
    // Send publicToken to your backend for exchange
  },
  onClose: () => {
    console.log('Widget closed');
  }
});

bridge.open();