Framework Examples

React
Vue 3
Angular
Vanilla JS

import { useCallback, useState } from 'react';
import { Transcrypts, type VerificationResult } from 'transcrypts';

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

export function VerifyButton() {
  const [result, setResult] = useState<VerificationResult | null>(null);
  const [loading, setLoading] = useState(false);

  const handleVerify = useCallback(async () => {
    setLoading(true);
    try {
      const res = await transcrypts.verify({ ssn: '123-45-6789' });
      setResult(res);
    } catch (err) {
      console.error('Verification error:', err);
    } finally {
      setLoading(false);
    }
  }, []);

  return (
    <div>
      <button onClick={handleVerify} disabled={loading}>
        {loading ? 'Verifying...' : 'Verify Employment'}
      </button>
      {result?.verified && <p>Verified successfully.</p>}
    </div>
  );
}

<script setup lang="ts">
import { ref } from 'vue';
import { Transcrypts, type VerificationResult } from 'transcrypts';

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

const result = ref<VerificationResult | null>(null);
const loading = ref(false);

async function handleVerify() {
  loading.value = true;
  try {
    result.value = await transcrypts.verify({ ssn: '123-45-6789' });
  } catch (err) {
    console.error('Verification error:', err);
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <button :disabled="loading" @click="handleVerify">
    {{ loading ? 'Verifying...' : 'Verify Employment' }}
  </button>
  <p v-if="result?.verified">Verified successfully.</p>
</template>

verification.service.ts

import { Injectable } from '@angular/core';
import { Transcrypts, type VerificationResult } from 'transcrypts';

@Injectable({ providedIn: 'root' })
export class VerificationService {
  private transcrypts = new Transcrypts({ apiKey: 'your-api-key' });

  verify(ssn: string): Promise<VerificationResult> {
    return this.transcrypts.verify({ ssn });
  }
}

verify.component.ts

import { Component } from '@angular/core';
import { VerificationService } from './verification.service';

@Component({
  selector: 'app-verify',
  template: `
    <button (click)="onVerify()" [disabled]="loading">
      {{ loading ? 'Verifying...' : 'Verify Employment' }}
    </button>
    <p *ngIf="verified">Verified successfully.</p>
  `,
})
export class VerifyComponent {
  loading = false;
  verified = false;

  constructor(private verificationService: VerificationService) {}

  async onVerify() {
    this.loading = true;
    try {
      const result = await this.verificationService.verify('123-45-6789');
      this.verified = result.verified;
    } catch (err) {
      console.error('Verification error:', err);
    } finally {
      this.loading = false;
    }
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Transcrypts Example</title>
</head>
<body>
  <button id="verify-btn">Verify Employment</button>
  <p id="status"></p>

  <script type="module">
    import { Transcrypts } from 'https://cdn.jsdelivr.net/npm/transcrypts/dist/index.js';

    const transcrypts = new Transcrypts({ apiKey: 'your-api-key' });
    const btn = document.getElementById('verify-btn');
    const status = document.getElementById('status');

    btn.addEventListener('click', async () => {
      btn.disabled = true;
      btn.textContent = 'Verifying...';

      try {
        const result = await transcrypts.verify({ ssn: '123-45-6789' });
        status.textContent = result.verified
          ? 'Verified successfully.'
          : 'Verification was not completed.';
      } catch (err) {
        status.textContent = 'Error: ' + err.message;
      } finally {
        btn.disabled = false;
        btn.textContent = 'Verify Employment';
      }
    });
  </script>
</body>
</html>

Getting Started

Widget