Quick Start

Get your first identity verification flow running in 5 minutes.

Step 1: Install the SDK

npm install vec-idp-web-sdk

Step 2: Create a Container Element

Add a container element where the verification UI will be rendered:

<div id="verification-container"></div>

Step 3: Initialize the SDK

import { createVecuIDVSDK } from 'vec-idp-web-sdk';

const sdk = createVecuIDVSDK({
  deploymentStage: 'sandbox', // Use 'production' for live
  bearerToken: 'your-bearer-token',
  debug: true, // Set to false in production
});

Step 4: Start Verification

const cleanup = await sdk.startVerificationWithCustomer(
  document.getElementById('verification-container'),
  {
    customerInfo: {
      firstName: 'John',
      lastName: 'Doe',
      email: 'john.doe@example.com',
      phone: '+1-555-123-4567',
      address: {
        line1: '123 Main St',
        locality: 'Anytown',
        majorAdminDivision: 'CA',
        country: 'US',
        postalCode: '12345',
        type: 'residential',
      },
    },
    referenceId: `verification-${Date.now()}`,
    mode: 'embedded',
    onProgress: event => {
      console.log(`Progress: ${event.step} (${event.percentage}%)`);
    },
    onSuccess: result => {
      console.log('Verification completed!', result);
      // Handle successful verification
    },
    onError: error => {
      console.error('Verification failed:', error);
      // Handle error
    },
    config: {
      qrCode: true, // Enable mobile handoff
    },
  }
);

Step 5: Clean Up

When the user navigates away or verification is complete, clean up the SDK:

// Call cleanup when done
cleanup();

Complete Example

Here's a complete React example:

import { useEffect, useRef } from 'react';
import { createVecuIDVSDK } from 'vec-idp-web-sdk';

function VerificationPage() {
  const containerRef = useRef<HTMLDivElement>(null);
  const cleanupRef = useRef<(() => void) | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const sdk = createVecuIDVSDK({
      deploymentStage: 'sandbox',
      bearerToken: process.env.NEXT_PUBLIC_BEARER_TOKEN!,
      debug: true,
    });

    sdk
      .startVerificationWithCustomer(containerRef.current, {
        customerInfo: {
          firstName: 'John',
          lastName: 'Doe',
          email: 'john@example.com',
        },
        referenceId: `ref-${Date.now()}`,
        onSuccess: result => {
          console.log('Success!', result);
        },
        onError: error => {
          console.error('Error:', error);
        },
      })
      .then(cleanup => {
        cleanupRef.current = cleanup;
      });

    return () => {
      cleanupRef.current?.();
    };
  }, []);

  return (
    <div>
      <h1>Identity Verification</h1>
      <div ref={containerRef} style={{ minHeight: '500px' }} />
    </div>
  );
}

export default VerificationPage;

What's Next?

Now that you have a basic verification flow working:

1. Configuration - Customize the SDK behavior
2. API Reference - Explore all available methods
3. Events - Handle verification events
4. Webhooks - Set up server-side notifications
5. Testing - Test your integration