Link Component

Accessing Terminal Link
Terminal Link is a user-friendly, hosted page designed to facilitate authentication with any telematics provider. It provides a simple, self-serve flow for customers or partners to connect their telematics accounts.
You have two options to integrate Terminal Link into your application:
- Directly link to the hosted page.
- Embed it within your application using one of our SDKs.
React SDK
JS SDK
Hosted Page
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
- Initialize auth link with desired options (see available options below)
- Open link and wait for user to complete authentication
- Handle
onSuccess
callback and exchange public token for a connection token on your backend usingPOST /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.
Your publishable key.
Optional connection ID to update. If not provided, a new connection will be created.
Base URL for the link. Defaults based on the publishable key (production or sandbox).
Can also provide a configured link URL directly.
Called when link is successfully completed.