Skip to main content

Managed UI

The easiest way to integrate Spidify KYC into your application is using the Managed UI feature via the SpidifySDK class. This approach requires minimal code and automatically handles all UI state, API polling, and security.

How It Works​

Under the hood, SpidifySDK creates an isolated <iframe> (or redirects the window) pointing to the Spidify UI. It securely communicates via window.postMessage, passing handshakes back to your parent application whenever the user progresses through the steps.

Iframe Injection​

If you want the KYC flow to appear embedded within your own page, use the mount() method:

const Spidify = new SpidifySDK({
  container: '#kyc-container',
  apiKey: 'YOUR_API_KEY',
  productUrl: 'https://your-backend.com',
  userId: 'unique_user_id',
  onSuccess: (data) => console.log('Done!', data),
  onFailure: (err) => console.error('Failed', err)
});

// This creates an iframe inside #kyc-container
await Spidify.mount();

Paystack-Style Redirect​

If you prefer to redirect the user to a full-page KYC experience and have them return later via a redirectUrl, use the launch() method instead:

const Spidify = new SpidifySDK({
  container: '#kyc-container', // Required by type, but ignored on launch
  apiKey: 'YOUR_API_KEY',
  productUrl: 'https://your-backend.com',
  userId: 'unique_user_id',
  redirectUrl: 'https://your-app.com/kyc-callback'
});

// This redirects the browser completely
await Spidify.launch();

Unmounting​

To gracefully remove the Iframe and clean up event listeners, call unmount():

Spidify.unmount();