> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zapyd.com/llms.txt
> Use this file to discover all available pages before exploring further.

# KYC SDK demo (India)

> Every screen an Indian user sees in the hosted KYC flow.

export const Ico = ({children, size = 18, sw = 1.5, className}) => <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{children}</svg>;

export const Ok = () => <span className="kycd-ok"><Ico><circle cx="12" cy="12" r="9" /><path d="m8.5 12.5 2.5 2.5 4.5-5" /></Ico></span>;

export const Chevron = () => <Ico size={16}><path d="m6 9 6 6 6-6" /></Ico>;

export const KycBar = ({step}) => <>
    <div className="kycd-appbar">
      {step > 1 ? <span className="kycd-back"><Ico size={20}><path d="m15 18-6-6 6-6" /></Ico></span> : <span />}
      <img src="/logo/zapyd-light.svg" className="kycd-logo kycd-logo-light" alt="" noZoom />
      <img src="/logo/zapyd-dark.svg" className="kycd-logo kycd-logo-dark" alt="" noZoom />
      {step ? <span className="kycd-count">{step}/6</span> : <span />}
    </div>
    {step ? <div className="kycd-progress">
        {[1, 2, 3, 4, 5, 6].map(n => <i key={n} className={n <= step ? 'on' : undefined} />)}
      </div> : null}
  </>;

export const Head = ({title, sub}) => <div className="kycd-head">
    <p className="kycd-title">{title}</p>
    {sub ? <p className="kycd-sub">{sub}</p> : null}
  </div>;

export const Tos = ({on}) => <div className="kycd-tos">
    <span className={on ? 'kycd-box on' : 'kycd-box'}>{on ? <Ico size={12} sw={2.5}><path d="M20 6 9 17l-5-5" /></Ico> : null}</span>
    <span>By proceeding, you agree to our <span className="kycd-link">Terms of Service</span></span>
  </div>;

export const Cc = () => <span className="kycd-cc">
    <svg className="kycd-flag" width="20" height="14" viewBox="0 0 20 14" aria-hidden="true">
      <rect width="20" height="14" fill="#fff" />
      <rect width="20" height="4.67" fill="#FF9933" />
      <rect y="9.33" width="20" height="4.67" fill="#138808" />
      <circle cx="10" cy="7" r="1.7" fill="none" stroke="#000080" strokeWidth="0.6" />
    </svg>
    +91
    <Chevron />
  </span>;

export const IdCard = ({size = 20}) => <Ico size={size}><rect x="2.5" y="5" width="19" height="14" rx="2.5" /><circle cx="9" cy="11" r="2" /><path d="M6 15.5a3.2 3.2 0 0 1 6 0" /><path d="M15 10h3" /><path d="M15 14h3" /></Ico>;

export const DOC_ICONS = {
  aadhaar: <IdCard />,
  passport: <Ico size={20}><path d="M5 4.5A1.5 1.5 0 0 1 6.5 3h11A1.5 1.5 0 0 1 19 4.5v15a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 5 19.5z" /><circle cx="12" cy="10" r="3" /><path d="M9 16.5h6" /></Ico>,
  voter: <Ico size={20}><path d="m9 12 2 2 4-4" /><path d="M5 7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v12H5z" /><path d="M22 19H2" /></Ico>,
  licence: <Ico size={20}><path d="m21 8-2 2-1.5-3.7A2 2 0 0 0 15.65 5H8.4a2 2 0 0 0-1.9 1.26L5 10 3 8" /><path d="M7 14h.01" /><path d="M17 14h.01" /><rect width="18" height="8" x="3" y="10" rx="2" /><path d="M5 18v2" /><path d="M19 18v2" /></Ico>
};

export const Doc = ({name, desc, on, icon}) => <div className={on ? 'kycd-doc on' : 'kycd-doc'}>
    <span className="kycd-doc-tile">{DOC_ICONS[icon]}</span>
    <span className="kycd-doc-text">
      <span className="kycd-doc-name">{name}</span>
      <span className="kycd-doc-desc">{desc}</span>
    </span>
    <span className="kycd-radio" />
  </div>;

export const Check = ({children}) => <div className="kycd-check">
    <span className="kycd-check-icon">
      <Ico size={20} className="kycd-ic-wait"><circle cx="12" cy="12" r="8" strokeDasharray="2.5 3" /></Ico>
      <Ico size={20} className="kycd-ic-done"><circle cx="12" cy="12" r="9" /><path d="m8.5 12.5 2.5 2.5 4.5-5" /></Ico>
    </span>
    {children}
  </div>;

export const StatusIcons = () => <span className="kycd-sicons">
    <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor" aria-hidden="true">
      <rect x="0" y="7" width="3" height="4" rx="1" />
      <rect x="4.5" y="4.5" width="3" height="6.5" rx="1" />
      <rect x="9" y="2" width="3" height="9" rx="1" />
      <rect x="13.5" y="0" width="3" height="11" rx="1" opacity="0.3" />
    </svg>
    <svg width="15" height="11" viewBox="0 0 15 11" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
      <circle cx="7.5" cy="9.5" r="1.25" fill="currentColor" stroke="none" />
      <path d="M4.6 6.8a4.2 4.2 0 0 1 5.8 0" />
      <path d="M2 4.2a7.8 7.8 0 0 1 11 0" />
    </svg>
    <svg width="25" height="12" viewBox="0 0 25 12" fill="none" aria-hidden="true">
      <rect x="0.5" y="0.5" width="21" height="11" rx="3.5" stroke="currentColor" opacity="0.4" />
      <rect x="2" y="2" width="16" height="8" rx="2" fill="currentColor" />
      <path d="M23 4v4a2 2 0 0 0 0-4Z" fill="currentColor" opacity="0.4" />
    </svg>
  </span>;

export const Orb = () => <div className="kycd-orb">
    <IdCard size={28} />
    <svg className="kycd-orb-ring" width="84" height="84" viewBox="0 0 84 84" fill="none" aria-hidden="true">
      <circle cx="42" cy="42" r="40" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeDasharray="60 200" />
    </svg>
  </div>;

export const Face = () => <svg className="kycd-face" width="120" height="150" viewBox="0 0 120 150" fill="currentColor" aria-hidden="true">
    <ellipse cx="60" cy="58" rx="28" ry="34" />
    <path d="M6 150c4-34 26-52 54-52s50 18 54 52z" />
  </svg>;

export const Clock = () => <Ico size={28} sw={2}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></Ico>;

export const PlayPause = () => <>
    <svg className="kycd-ic-pause" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="5" width="4" height="14" rx="1" /><rect x="14" y="5" width="4" height="14" rx="1" /></svg>
    <svg className="kycd-ic-play" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 5.5v13a1 1 0 0 0 1.5.86l11-6.5a1 1 0 0 0 0-1.72l-11-6.5A1 1 0 0 0 7 5.5z" /></svg>
  </>;

This page shows the complete KYC widget flow for an Indian customer, rendered as an animated phone. Pick a step above the phone to jump to that screen.

<Tip>
  You never handle documents or identity data directly. Generate a KYC link, redirect your user, and receive the result over webhook. See [KYC SDK](/guides/customers/kyc-sdk) for integration steps.
</Tip>

<div id="kycdWrapper" className="kycd-wrapper">
  <div className="kycd-steps" role="group" aria-label="Jump to a step">
    <button type="button" className="kycd-step" data-phase-start="0" aria-current="step">Email</button>
    <button type="button" className="kycd-step" data-phase-start="2">Phone</button>
    <button type="button" className="kycd-step" data-phase-start="4">Details</button>
    <button type="button" className="kycd-step" data-phase-start="5">Documents</button>
    <button type="button" className="kycd-step" data-phase-start="7">PAN</button>
    <button type="button" className="kycd-step" data-phase-start="9">Selfie</button>
    <button type="button" className="kycd-step" data-phase-start="10">Outcome</button>
  </div>

  <div className="kycd-phone-wrap" role="img" aria-label="Animated phone showing each screen of the hosted KYC flow">
    <div className="kycd-phone">
      <div className="kycd-display">
        <div className="kycd-statusbar">
          <span>9:41</span>

          <span className="kycd-island" />

          <StatusIcons />
        </div>

        <div className="kycd-viewport">
          <div className="kycd-screen" data-duration="4200">
            <KycBar step={1} />

            <div className="kycd-body">
              <Head title="Enter your email address" sub="We'll send your verification updates here." />

              <div className="kycd-field">
                <span className="kycd-label">Email address</span>

                <div className="kycd-input is-focus">
                  <span className="kycd-value kycd-typeable" data-typetext="avinit@zapyd.com">
                    <span className="kycd-cursor" />
                  </span>
                </div>
              </div>
            </div>

            <div className="kycd-foot">
              <Tos />

              <div className="kycd-btn is-off">Continue</div>
            </div>
          </div>

          <div className="kycd-screen" data-duration="1400" data-cont>
            <KycBar step={1} />

            <div className="kycd-body">
              <Head title="Enter your email address" sub="We'll send your verification updates here." />

              <div className="kycd-field">
                <span className="kycd-label">Email address</span>

                <div className="kycd-input">
                  <span className="kycd-value">
                    {'avinit@zapyd.com'}
                  </span>

                  <Ok />
                </div>
              </div>
            </div>

            <div className="kycd-foot">
              <Tos on />

              <div className="kycd-btn is-on">Continue</div>
            </div>
          </div>

          <div className="kycd-screen" data-duration="3600">
            <KycBar step={2} />

            <div className="kycd-body">
              <Head title="Verify your phone" sub="We'll send a one-time code to confirm your number." />

              <div className="kycd-field">
                <span className="kycd-label">Phone number</span>

                <div className="kycd-input is-focus">
                  <Cc />

                  <span className="kycd-value kycd-typeable" data-typetext="98765 43210">
                    <span className="kycd-cursor" />
                  </span>
                </div>
              </div>
            </div>

            <div className="kycd-foot">
              <div className="kycd-btn is-off">Send code</div>
            </div>
          </div>

          <div className="kycd-screen" data-duration="1400" data-cont>
            <KycBar step={2} />

            <div className="kycd-body">
              <Head title="Verify your phone" sub="We'll send a one-time code to confirm your number." />

              <div className="kycd-field">
                <span className="kycd-label">Phone number</span>

                <div className="kycd-input">
                  <Cc />

                  <span className="kycd-value">98765 43210</span>

                  <Ok />
                </div>
              </div>
            </div>

            <div className="kycd-foot">
              <div className="kycd-btn is-on">Send code</div>
            </div>
          </div>

          <div className="kycd-screen" data-duration="3800">
            <KycBar step={3} />

            <div className="kycd-body">
              <Head title="Additional details" sub="A few more details before we begin your KYC." />

              <div className="kycd-field">
                <span className="kycd-label">Annual income range</span>

                <div className="kycd-input kycd-select">
                  <span className="kycd-select-value" data-selecttext="₹10L – ₹25L per year" data-placeholder="Select income range">Select income range</span>

                  <Chevron />
                </div>
              </div>

              <div className="kycd-field">
                <span className="kycd-label">Profession</span>

                <div className="kycd-input kycd-select">
                  <span className="kycd-select-value" data-selecttext="Salaried employee" data-placeholder="Select profession">Select profession</span>

                  <Chevron />
                </div>
              </div>
            </div>

            <div className="kycd-foot">
              <div className="kycd-btn is-off kycd-btn-animatable">Continue</div>
            </div>
          </div>

          <div className="kycd-screen" data-duration="3000">
            <KycBar step={4} />

            <div className="kycd-body">
              <Head title="Verify your identity" sub="Select a document to start your KYC verification." />

              <div className="kycd-docs">
                <Doc name="Aadhaar card" desc="12-digit UIDAI number" icon="aadhaar" on />

                <Doc name="Passport" desc="Indian passport" icon="passport" />

                <Doc name="Voter ID" desc="Issued by the ECI" icon="voter" />

                <Doc name="Driving licence" desc="Issued by your RTO" icon="licence" />
              </div>
            </div>

            <div className="kycd-foot">
              <div className="kycd-btn is-on">Continue</div>
            </div>
          </div>

          <div className="kycd-screen" data-duration="3600">
            <KycBar step={4} />

            <div className="kycd-center">
              <Orb />

              <p className="kycd-title">Verifying your Aadhaar</p>
              <p className="kycd-sub">This takes just a moment…</p>

              <div className="kycd-checks">
                <Check>Checking Aadhaar validity</Check>
                <Check>Fetching UIDAI records</Check>
                <Check>Running identity checks</Check>
              </div>
            </div>
          </div>

          <div className="kycd-screen" data-duration="3800">
            <KycBar step={5} />

            <div className="kycd-body">
              <Head title="PAN verification" sub="Enter your Permanent Account Number to complete the tax identity check." />

              <div className="kycd-field">
                <span className="kycd-label">PAN</span>

                <div className="kycd-input is-focus">
                  <span className="kycd-value kycd-mono kycd-typeable" data-typetext="ABCDE1234F">
                    <span className="kycd-cursor" />
                  </span>
                </div>

                <span className="kycd-hint">5 letters, 4 digits, then 1 letter</span>
              </div>
            </div>

            <div className="kycd-foot">
              <div className="kycd-btn is-off">Verify PAN</div>
            </div>
          </div>

          <div className="kycd-screen" data-duration="1400" data-cont>
            <KycBar step={5} />

            <div className="kycd-body">
              <Head title="PAN verification" sub="Enter your Permanent Account Number to complete the tax identity check." />

              <div className="kycd-field">
                <span className="kycd-label">PAN</span>

                <div className="kycd-input">
                  <span className="kycd-value kycd-mono">ABCDE1234F</span>

                  <Ok />
                </div>

                <span className="kycd-hint">5 letters, 4 digits, then 1 letter</span>
              </div>
            </div>

            <div className="kycd-foot">
              <div className="kycd-btn is-on">Verify PAN</div>
            </div>
          </div>

          <div className="kycd-screen" data-duration="3200">
            <KycBar step={6} />

            <div className="kycd-body">
              <Head title="Selfie verification" sub="Fit your face inside the oval and hold still." />

              <div className="kycd-camera">
                <div className="kycd-oval">
                  <Face />

                  <span className="kycd-scanline" />
                </div>

                <span className="kycd-cam-pill"><span className="kycd-rec" />Keep still. Scanning…</span>
              </div>
            </div>

            <div className="kycd-foot">
              <div className="kycd-btn is-on">Start verification</div>
            </div>
          </div>

          <div className="kycd-screen" data-duration="3000">
            <KycBar />

            <div className="kycd-center">
              <div className="kycd-badge is-wait">
                <Clock />
              </div>

              <p className="kycd-title">KYC under review</p>
              <p className="kycd-sub">We're reviewing your submission and will email you when it's done, usually within a few minutes.</p>
              <span className="kycd-pill is-wait">In review</span>
            </div>
          </div>

          <div className="kycd-screen" data-duration="5000">
            <KycBar />

            <div className="kycd-center">
              <div className="kycd-badge is-ok">
                <Ico size={30} sw={2}>
                  <path d="M20 6 9 17l-5-5" />
                </Ico>
              </div>

              <p className="kycd-title">KYC approved</p>
              <p className="kycd-sub">Your identity is verified. You can now use every feature on the platform.</p>
              <span className="kycd-pill is-ok">Verified</span>
            </div>
          </div>
        </div>

        <span className="kycd-homebar" />
      </div>
    </div>
  </div>

  <div className="kycd-under">
    <button type="button" className="kycd-play" aria-pressed="false" aria-label="Pause animation">
      <PlayPause />
    </button>

    <p className="kycd-caption">Simulation. The live widget may differ slightly.</p>
  </div>
</div>

***

## How the flow works

<Steps>
  <Step title="Email collection" icon="envelope">
    The user enters their email address and agrees to the Terms of Service before proceeding.
  </Step>

  <Step title="Phone verification" icon="mobile-screen">
    A mobile number is collected to send a one-time verification code.
  </Step>

  <Step title="Additional details" icon="list-check">
    Income range and profession are collected to meet RBI compliance requirements.
  </Step>

  <Step title="Document verification" icon="id-card">
    The user selects an identity document (Aadhaar, Passport, Voter ID, or Driving Licence) and the details are verified against UIDAI or government records.
  </Step>

  <Step title="PAN verification" icon="address-card">
    The user's PAN number is verified to satisfy tax identity requirements for Indian regulations.
  </Step>

  <Step title="Selfie / liveness" icon="camera">
    A real-time selfie scan confirms the person matches the submitted document.
  </Step>

  <Step title="Review and outcome" icon="circle-check">
    The submission is reviewed and a webhook delivers the `kyc.approved` or `kyc.failed` event to your server.
  </Step>
</Steps>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.