React Integration

Integrating the Spidify SDK into a React or Next.js application is straightforward. The key is to manage the SDK lifecycle properly inside a useEffect hook to prevent multiple iframes from spawning on re-renders.

Managed UI in React

Create a dedicated wrapper component for the KYC flow.

import React, { useEffect, useRef } from 'react';
import { SpidifySDK } from '@ha-shem/Spidify-sdk';

export const SpidifyKycFlow = ({ userId, onComplete }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const sdkRef = useRef<SpidifySDK | null>(null);

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

    // Initialize the SDK only once
    const Spidify = new SpidifySDK({
      container: containerRef.current,
      apiKey: process.env.NEXT_PUBLIC_Spidify_API_KEY!,
      productUrl: 'https://kyc.your-backend.com',
      userId: userId,
      onSuccess: (data) => {
        onComplete(data);
      },
      onFailure: (error) => {
        console.error("KYC Failed:", error);
      }
    });

    sdkRef.current = Spidify;
    Spidify.mount();

    // Cleanup function runs on unmount
    return () => {
      Spidify.unmount();
      sdkRef.current = null;
    };
  }, [userId, onComplete]);

  return (
    <div style={{ width: '100%', minHeight: '650px' }}>
      <div ref={containerRef} />
    </div>
  );
};

Next.js Note

If you are using Next.js App Router, ensure your component is marked with "use client" at the top of the file, as the SDK interacts with window and document.