Quick Start

Depending on your use case, you can integrate Spidify using either the Managed UI or the Headless Engine.

1. Managed UI (Fastest)

If you want Spidify to handle the user interface, use SpidifySDK. This approach injects a secure iframe into your application or redirects the user.

import { SpidifySDK } from '@ha-shem/Spidify-sdk';

// Initialize the SDK
const Spidify = new SpidifySDK({
  container: '#kyc-container', // CSS selector or HTMLElement
  apiKey: 'YOUR_API_KEY',
  productUrl: 'https://your-backend.com',
  userId: 'unique_user_id',
  onSuccess: (data) => {
    console.log('Verification completed!', data);
  },
  onFailure: (error) => {
    console.error('Verification failed', error);
  }
});

// Mount the Iframe inside the specified container
await Spidify.mount();

Alternatively, if you want a Paystack-style redirect instead of an Iframe, call launch():

// Redirects the parent window to the KYC flow
await Spidify.launch();

2. Headless Engine (Most Customizable)

If you are building your own UI components and just need the state management and API logic, use KycSDK.

import { KycSDK } from '@ha-shem/Spidify-sdk';

const sdk = new KycSDK({
  apiKey: 'YOUR_API_KEY',
  baseUrl: 'https://your-backend.com'
});

// Initialize session
await sdk.init('unique_user_id');

// Start the workflow
sdk.start();

// Listen for events to update your UI
sdk.on('step_started', (event) => {
  console.log(`Now showing: ${event.step}`);
});

sdk.on('finished', () => {
  console.log('User has completed all KYC steps.');
});

With the Headless SDK, you manually invoke methods like sdk.sendOtp() and sdk.submitOtp() from your custom UI components.