Skip to main content
The widget emits events during the verification lifecycle. Each event conforms to the TranscryptsEvent interface.

TranscryptsEvent Interface

interface TranscryptsEvent {
  type: TranscryptsEventType;
  payload?: Record<string, unknown>;
}

type TranscryptsEventType =
  | 'ready'
  | 'loaded'
  | 'verification_started'
  | 'verification_complete'
  | 'verification_failed'
  | 'close';

Event Details

EventWhen FiredPayload
readyWidget has loaded and parsed the session token{}
loadedUser data has been fetched and rendered{ ssn: "***-**-1234" }
verification_startedUser began verification for a specific job{}
verification_completeUser clicked Continue after verifying jobsSee payload below
verification_failedAn error occurred during verification{ message: "error description" }
closeUser dismissed the widget (backdrop click){}

verification_complete Payload

{
  success: boolean;
  verified: boolean;
  verificationId: string;   // Unique verification identifier
  workExperience: Array<{
    id: string;
    companyName: string;
    position: string;
    startDate: string;       // ISO date string
    endDate?: string;        // ISO date string, undefined if current job
    isCurrentJob: boolean;
    verified: boolean;
  }>;
}

verification_failed Payload

{
  message: string;           // Human-readable error description
}

Listening with .on()

The SDK exposes an .on() method that lets you subscribe to widget events. It returns an unsubscribe function.

Method Signature

on(
  eventType: TranscryptsEventType,
  callback: (event: TranscryptsEvent) => void
): () => void

Parameters

ParameterTypeDescription
eventTypeTranscryptsEventTypeThe event type to listen for
callback(event: TranscryptsEvent) => voidFunction called when the event fires
Returns: A function that, when called, removes the listener.

Code Example

const transcrypts = new Transcrypts({ apiKey: 'your-api-key' });

// Subscribe to the "ready" event
const unsubscribeReady = transcrypts.on('ready', (event) => {
  console.log('Widget is ready');
});

// Subscribe to the "loaded" event
const unsubscribeLoaded = transcrypts.on('loaded', (event) => {
  console.log('User data loaded, masked SSN:', event.payload?.ssn);
});

// Subscribe to verification completion
const unsubscribeComplete = transcrypts.on('verification_complete', (event) => {
  console.log('Verification result:', event.payload);
});

Multiple Listeners

You can register multiple listeners for the same event type. Each callback is stored independently and fires in registration order.
// Both callbacks fire when "loaded" is emitted
transcrypts.on('loaded', (event) => {
  analytics.track('widget_loaded');
});

transcrypts.on('loaded', (event) => {
  updateUI(event.payload);
});

Cleanup Patterns

Always unsubscribe listeners when they are no longer needed to prevent memory leaks.

Array Approach

// Store unsubscribe functions
const unsubscribers: Array<() => void> = [];

unsubscribers.push(transcrypts.on('ready', handleReady));
unsubscribers.push(transcrypts.on('loaded', handleLoaded));
unsubscribers.push(transcrypts.on('verification_complete', handleComplete));

// Clean up all listeners at once
function cleanupListeners() {
  unsubscribers.forEach((unsub) => unsub());
  unsubscribers.length = 0;
}

React useEffect Example

useEffect(() => {
  const unsubReady = transcrypts.on('ready', () => setWidgetReady(true));
  const unsubLoaded = transcrypts.on('loaded', (e) => setMaskedSSN(e.payload?.ssn));
  const unsubFailed = transcrypts.on('verification_failed', (e) => {
    setError(e.payload?.message);
  });

  return () => {
    unsubReady();
    unsubLoaded();
    unsubFailed();
  };
}, [transcrypts]);