Link Component

Terminal provides a React hook that makes it easy to embed the link in your application.

View the package on NPM here: @terminal-api/link-react

Installation

npm install @terminal-api/link-react

Usage

Creating a Connection

Terminal handles capturing, validating and securely storing customer’s credentials to ensure that each TSP integration is as consistent as possible.

Here’s an overview of the steps involved when using the React hook:

Steps

1. Initialize auth link with desired options (see available options below)
2. Open link and wait for user to complete authentication
3. Handle onSuccess callback and exchange public token for a connection token on your backend using POST /tsp/v1/public-token/exchange

Re-Authenticating a Connection

In certain scenarios, connections may become disconnected. This can occur when customers modify their password or withdraw access.

In such cases, Terminal updates the Connection status to disconnected and prompts you to reauthenticate the customer’s TSP to continue syncing.

The reauthentication process mirrors the link flow, but requires the connectionId parameter to specify which connection needs to be updated.

Examples

import { useCallback } from "react";
import { useTerminalLink } from "@terminal-api/link-react";

const MyComponent = () => {
  const exchangeToken = useCallback(
    async ({ publicToken }: { publicToken: string }) => {
      // Send the public token to your backend to exchange for a connection token
      // and store it in your database.
      return await authenticatedAxios.post("/api/terminal", { publicToken });
    },
    [],
  );

  const terminal = useTerminalLink({
    // production or sandbox publishable key from the Terminal dashboard
    publishableKey: process.env.REACT_APP_TERMINAL_PUBLISHABLE_KEY,
    onSuccess: exchangeToken,
  });

  return (
    <button onClick={() => terminal.open()} disabled={terminal.isOpen}>
      Setup Telematics Integration
    </button>
  );
};

export default MyComponent;

Available Options

The link SDK provides a number of options to customize the behavior of the link.

Can either provide a url or publishableKey to configure the link.