Link Component

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

const MyComponent = () => {
  const api = useYourBackendApi();

  // if you are defining the function inside the component
  // make sure to wrap it in useCallback
  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 api.post('/api/terminal', { publicToken });
    },
    [api],
  );

  const terminal = useTerminalLink({
    // production or sandbox publishable key from the Terminal dashboard
    publishableKey: process.env.REACT_APP_TERMINAL_PUBLISHABLE_KEY,
    onSuccess: exchangeToken,
    params: {
      // optional parameters
      externalId: 'my-external-id',
    },
  });

  return (
    <div>
      <button onClick={() => terminal.open()} disabled={terminal.isOpen}>
        Setup Telematics Integration
      </button>
      <button onClick={() => terminal.close()} disabled={!terminal.isOpen}>
        Close Terminal Link
      </button>
      <button onClick={() => terminal.open({ params: { provider: 'geotab' } })}>
        Setup Geotab Integration
      </button>
      <button onClick={() => terminal.open({ params: { externalId: '1234' } })}>
        Setup Integration with Custom Parameters
      </button>
    </div>
  );
};

export default MyComponent;

import React from 'react';
import { useTerminalLink } from '@terminal-api/link-react';

const MyComponent = ({ onSuccess }: { onSuccess: () => void }) => {
  const terminal = useTerminalLink({
    // production or sandbox publishable key from the Terminal dashboard
    publishableKey: process.env.REACT_APP_TERMINAL_PUBLISHABLE_KEY,
    connectionId: 'conn_01GSKTHCD24NRZ2SBJTPZBCQ1R',
    onSuccess, // token exchange is optional for re-authentication
  });

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

export default MyComponent;