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

# KYC Flow Demo (India)

This page shows the complete KYC widget flow for an Indian customer, rendered as an animated phone simulation. Click any step in the progress bar 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/integration-guides/kyc/kyc-sdk) for integration steps.
</Tip>

<div id="kycdWrapper" className="kycd-wrapper">
  <div className="kycd-phase-static">
    <span className="kycd-phase-item" data-phase-start="0">Email</span>
    <span className="kycd-phase-sep-s">›</span>
    <span className="kycd-phase-item" data-phase-start="2">Phone</span>
    <span className="kycd-phase-sep-s">›</span>
    <span className="kycd-phase-item" data-phase-start="4">Details</span>
    <span className="kycd-phase-sep-s">›</span>
    <span className="kycd-phase-item" data-phase-start="5">Documents</span>
    <span className="kycd-phase-sep-s">›</span>
    <span className="kycd-phase-item" data-phase-start="7">PAN</span>
    <span className="kycd-phase-sep-s">›</span>
    <span className="kycd-phase-item" data-phase-start="9">Selfie</span>
    <span className="kycd-phase-sep-s">›</span>
    <span className="kycd-phase-item" data-phase-start="10">Outcome</span>
  </div>

  <div className="kycd-phone-wrap">
    <div className="kycd-phone">
      <div className="kycd-chrome">
        <div className="kycd-notch-row">
          <div className="kycd-notch" />
        </div>

        <div className="kycd-status">
          <span>9:41</span>

          <div className="kycd-sicons">
            <svg width="16" height="11" viewBox="0 0 16 11" fill="currentColor">
              <rect x="0" y="7" width="2.5" height="4" rx="0.4" />

              <rect x="4" y="4.5" width="2.5" height="6.5" rx="0.4" />

              <rect x="8" y="2" width="2.5" height="9" rx="0.4" />

              <rect x="12" y="0" width="2.5" height="11" rx="0.4" opacity="0.35" />
            </svg>

            <svg width="15" height="11" viewBox="0 0 15 11" fill="none" stroke="currentColor" strokeLinecap="round">
              <circle cx="7.5" cy="10" r="1.2" fill="currentColor" stroke="none" />

              <path d="M4.5 7.5 Q7.5 5 10.5 7.5" strokeWidth="1.4" />

              <path d="M2 5 Q7.5 1 13 5" strokeWidth="1.4" />
            </svg>

            <svg width="23" height="11" viewBox="0 0 23 11" fill="none">
              <rect x="0.5" y="0.5" width="18" height="10" rx="2.2" stroke="currentColor" strokeWidth="1.2" />

              <rect x="2" y="2" width="13" height="7" rx="1.2" fill="currentColor" />

              <path d="M19.5 3.8 L21.5 3.8 L21.5 7.2 L19.5 7.2" stroke="currentColor" strokeWidth="1" />
            </svg>
          </div>
        </div>
      </div>

      <div className="kycd-viewport">
        <div className="kycd-screen kycd-s0" data-duration="4200">
          <div className="kycd-hdr">
            <div className="kycd-hdr-icon">☰</div>

            <div className="kycd-brand">
              <img src="https://mintcdn.com/dollarpe/w_zVBmfWYNlVbKBv/logo/normal-light.png?fit=max&auto=format&n=w_zVBmfWYNlVbKBv&q=85&s=cd9a9905bbc27b9beb3c720b02d2f0ae" className="kycd-logo-img kycd-logo-light" alt="DollarPe" width="6000" height="1172" data-path="logo/normal-light.png" />

              <img src="https://mintcdn.com/dollarpe/w_zVBmfWYNlVbKBv/logo/normal-dark.png?fit=max&auto=format&n=w_zVBmfWYNlVbKBv&q=85&s=934ebcaafe1dbb56159940e180ec6f95" className="kycd-logo-img kycd-logo-dark" alt="DollarPe" width="6000" height="1172" data-path="logo/normal-dark.png" />
            </div>

            <div style={{width:'22px'}} />
          </div>

          <div className="kycd-body">
            <p className="kycd-title">Enter your email address</p>

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

              <div className="kycd-input kycd-typeable" data-typetext="avinit@dollarpe.com">
                <span className="kycd-cursor" />
              </div>
            </div>
          </div>

          <div className="kycd-foot">
            <div className="kycd-tos">
              <div className="kycd-checkbox" />

              <span className="kycd-tos-text">By proceeding, you agree to our <span className="kycd-link-text">Terms of Service</span></span>
            </div>

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

        <div className="kycd-screen kycd-s1" data-duration="1200">
          <div className="kycd-hdr">
            <div className="kycd-hdr-icon">☰</div>

            <div className="kycd-brand">
              <img src="https://mintcdn.com/dollarpe/w_zVBmfWYNlVbKBv/logo/normal-light.png?fit=max&auto=format&n=w_zVBmfWYNlVbKBv&q=85&s=cd9a9905bbc27b9beb3c720b02d2f0ae" className="kycd-logo-img kycd-logo-light" alt="DollarPe" width="6000" height="1172" data-path="logo/normal-light.png" />

              <img src="https://mintcdn.com/dollarpe/w_zVBmfWYNlVbKBv/logo/normal-dark.png?fit=max&auto=format&n=w_zVBmfWYNlVbKBv&q=85&s=934ebcaafe1dbb56159940e180ec6f95" className="kycd-logo-img kycd-logo-dark" alt="DollarPe" width="6000" height="1172" data-path="logo/normal-dark.png" />
            </div>

            <div style={{width:'22px'}} />
          </div>

          <div className="kycd-body">
            <p className="kycd-title">Enter your email address</p>

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

              <div className="kycd-input kycd-input-filled">
                <span>[avinit@dollarpe.com](mailto:avinit@dollarpe.com)</span>
                <div className="kycd-input-check">✓</div>
              </div>
            </div>
          </div>

          <div className="kycd-foot">
            <div className="kycd-tos">
              <div className="kycd-checkbox kycd-checkbox-on">✓</div>
              <span className="kycd-tos-text">By proceeding, you agree to our <span className="kycd-link-text">Terms of Service</span></span>
            </div>

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

        <div className="kycd-screen kycd-s2" data-duration="4200">
          <div className="kycd-hdr">
            <div className="kycd-hdr-icon" style={{fontSize:'14px'}}>←</div>
            <span className="kycd-hdr-title">Verify your phone</span>

            <div style={{width:'22px'}} />
          </div>

          <div className="kycd-body">
            <p className="kycd-subtitle">We'll send a one-time code to confirm your number.</p>

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

              <div className="kycd-input-phone-wrap">
                <div className="kycd-flag-prefix">🇮🇳 +91</div>

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

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

        <div className="kycd-screen kycd-s3" data-duration="1200">
          <div className="kycd-hdr">
            <div className="kycd-hdr-icon" style={{fontSize:'14px'}}>←</div>
            <span className="kycd-hdr-title">Verify your phone</span>

            <div style={{width:'22px'}} />
          </div>

          <div className="kycd-body">
            <p className="kycd-subtitle">We'll send a one-time code to confirm your number.</p>

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

              <div className="kycd-input-phone-wrap">
                <div className="kycd-flag-prefix">🇮🇳 +91</div>

                <div className="kycd-input kycd-input-filled">
                  <span>98765 43210</span>
                  <div className="kycd-input-check">✓</div>
                </div>
              </div>
            </div>
          </div>

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

        <div className="kycd-screen kycd-s4" data-duration="3800">
          <div className="kycd-hdr">
            <div className="kycd-hdr-icon" style={{fontSize:'14px'}}>←</div>
            <span className="kycd-hdr-title">Additional details</span>

            <div style={{width:'22px'}} />
          </div>

          <div className="kycd-body">
            <p className="kycd-subtitle">A few more details before we begin your KYC.</p>

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

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

            <div className="kycd-field" style={{marginTop:'10px'}}>
              <label className="kycd-label">Profession</label>

              <div className="kycd-select-wrap">
                <span className="kycd-select-value" data-selecttext="Salaried Employee" data-placeholder="Select profession">Select profession</span>
                <span className="kycd-select-arrow">▾</span>
              </div>
            </div>
          </div>

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

        <div className="kycd-screen kycd-s5" data-duration="3200">
          <div className="kycd-hdr">
            <div className="kycd-hdr-icon" style={{fontSize:'14px'}}>←</div>
            <span className="kycd-hdr-title">Verify your identity</span>

            <div style={{width:'22px'}} />
          </div>

          <div className="kycd-body">
            <p className="kycd-subtitle">Select a document to start your KYC verification.</p>

            <div className="kycd-doc-list">
              <div className="kycd-doc-item kycd-doc-selected">
                <div className="kycd-doc-icon">🪪</div>

                <div className="kycd-doc-info">
                  <span className="kycd-doc-name">Aadhaar Card</span>
                  <span className="kycd-doc-desc">12-digit UIDAI identity number</span>
                </div>

                <div className="kycd-doc-radio kycd-doc-radio-on" />
              </div>

              <div className="kycd-doc-item">
                <div className="kycd-doc-icon">🛂</div>

                <div className="kycd-doc-info">
                  <span className="kycd-doc-name">Passport</span>
                  <span className="kycd-doc-desc">Indian passport</span>
                </div>

                <div className="kycd-doc-radio" />
              </div>

              <div className="kycd-doc-item">
                <div className="kycd-doc-icon">🗳️</div>

                <div className="kycd-doc-info">
                  <span className="kycd-doc-name">Voter ID</span>
                  <span className="kycd-doc-desc">Election commission card</span>
                </div>

                <div className="kycd-doc-radio" />
              </div>

              <div className="kycd-doc-item">
                <div className="kycd-doc-icon">🚗</div>

                <div className="kycd-doc-info">
                  <span className="kycd-doc-name">Driving Licence</span>
                  <span className="kycd-doc-desc">RTO driving licence</span>
                </div>

                <div className="kycd-doc-radio" />
              </div>
            </div>
          </div>

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

        <div className="kycd-screen kycd-s6" data-duration="3200">
          <div className="kycd-hdr">
            <div className="kycd-hdr-icon" style={{fontSize:'14px'}}>←</div>
            <span className="kycd-hdr-title">Analysing document</span>

            <div style={{width:'22px'}} />
          </div>

          <div className="kycd-loading-wrap">
            <div className="kycd-spinner" />

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

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

        <div className="kycd-screen kycd-s7" data-duration="4200">
          <div className="kycd-hdr">
            <div className="kycd-hdr-icon" style={{fontSize:'14px'}}>←</div>
            <span className="kycd-hdr-title">PAN verification</span>

            <div style={{width:'22px'}} />
          </div>

          <div className="kycd-body">
            <p className="kycd-subtitle">Enter your Permanent Account Number to complete the tax identity check.</p>

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

              <div className="kycd-input kycd-typeable" style={{letterSpacing:'0.12em',textTransform:'uppercase'}} data-typetext="ABCDE1234F">
                <span className="kycd-cursor" />
              </div>
            </div>

            <p style={{fontSize:'0.62rem',color:'#94a3b8',marginTop:'6px',lineHeight:'1.4'}}>Format: 5 letters · 4 digits · 1 letter (e.g. ABCDE1234F)</p>
          </div>

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

        <div className="kycd-screen kycd-s8" data-duration="1200">
          <div className="kycd-hdr">
            <div className="kycd-hdr-icon" style={{fontSize:'14px'}}>←</div>
            <span className="kycd-hdr-title">PAN verification</span>

            <div style={{width:'22px'}} />
          </div>

          <div className="kycd-body">
            <p className="kycd-subtitle">Enter your Permanent Account Number to complete the tax identity check.</p>

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

              <div className="kycd-input kycd-input-filled" style={{letterSpacing:'0.12em'}}>
                <span>ABCDE1234F</span>
                <div className="kycd-input-check">✓</div>
              </div>
            </div>
          </div>

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

        <div className="kycd-screen kycd-s9" data-duration="1500">
          <div className="kycd-hdr">
            <div className="kycd-hdr-icon" style={{fontSize:'14px'}}>←</div>
            <span className="kycd-hdr-title">Selfie verification</span>

            <div style={{width:'22px'}} />
          </div>

          <div className="kycd-body">
            <p className="kycd-subtitle">Position your face in the frame and follow the on-screen instructions.</p>

            <div className="kycd-selfie-wrap">
              <div className="kycd-selfie-frame">
                <div className="kycd-selfie-oval">
                  <div className="kycd-selfie-face">
                    <div className="kycd-face-eye kycd-face-eye-l" />

                    <div className="kycd-face-eye kycd-face-eye-r" />

                    <div className="kycd-face-nose" />

                    <div className="kycd-face-mouth" />
                  </div>
                </div>

                <div className="kycd-selfie-scan-line" />
              </div>

              <p className="kycd-selfie-hint">Keep still. Scanning…</p>
            </div>
          </div>

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

        <div className="kycd-screen kycd-s10" data-duration="2500">
          <div className="kycd-hdr">
            <div style={{width:'22px'}} />

            <div className="kycd-brand">
              <img src="https://mintcdn.com/dollarpe/w_zVBmfWYNlVbKBv/logo/normal-light.png?fit=max&auto=format&n=w_zVBmfWYNlVbKBv&q=85&s=cd9a9905bbc27b9beb3c720b02d2f0ae" className="kycd-logo-img kycd-logo-light" alt="DollarPe" width="6000" height="1172" data-path="logo/normal-light.png" />

              <img src="https://mintcdn.com/dollarpe/w_zVBmfWYNlVbKBv/logo/normal-dark.png?fit=max&auto=format&n=w_zVBmfWYNlVbKBv&q=85&s=934ebcaafe1dbb56159940e180ec6f95" className="kycd-logo-img kycd-logo-dark" alt="DollarPe" width="6000" height="1172" data-path="logo/normal-dark.png" />
            </div>

            <div style={{width:'22px'}} />
          </div>

          <div className="kycd-status-wrap">
            <div className="kycd-status-icon kycd-status-pending">⏳</div>
            <p className="kycd-status-title">KYC under review</p>
            <p className="kycd-status-sub">Our team is reviewing your submission. You'll receive an email once the check is complete — usually within a few minutes.</p>
            <div className="kycd-status-pill kycd-status-pill-amber">In Review</div>
          </div>
        </div>

        <div className="kycd-screen kycd-s11" data-duration="5000">
          <div className="kycd-hdr">
            <div style={{width:'22px'}} />

            <div className="kycd-brand">
              <img src="https://mintcdn.com/dollarpe/w_zVBmfWYNlVbKBv/logo/normal-light.png?fit=max&auto=format&n=w_zVBmfWYNlVbKBv&q=85&s=cd9a9905bbc27b9beb3c720b02d2f0ae" className="kycd-logo-img kycd-logo-light" alt="DollarPe" width="6000" height="1172" data-path="logo/normal-light.png" />

              <img src="https://mintcdn.com/dollarpe/w_zVBmfWYNlVbKBv/logo/normal-dark.png?fit=max&auto=format&n=w_zVBmfWYNlVbKBv&q=85&s=934ebcaafe1dbb56159940e180ec6f95" className="kycd-logo-img kycd-logo-dark" alt="DollarPe" width="6000" height="1172" data-path="logo/normal-dark.png" />
            </div>

            <div style={{width:'22px'}} />
          </div>

          <div className="kycd-status-wrap">
            <div className="kycd-status-icon kycd-status-success">✓</div>
            <p className="kycd-status-title">KYC approved</p>
            <p className="kycd-status-sub">Your identity has been verified. You can now access all features on the platform.</p>
            <div className="kycd-status-pill kycd-status-pill-green">Verified</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div className="kycd-controls" style={{pointerEvents:'none',userSelect:'none'}}>
    <div className="kycd-dots">
      <div className="kycd-dot" />

      <div className="kycd-dot" />

      <div className="kycd-dot" />

      <div className="kycd-dot" />

      <div className="kycd-dot" />

      <div className="kycd-dot" />

      <div className="kycd-dot" />

      <div className="kycd-dot" />

      <div className="kycd-dot" />

      <div className="kycd-dot" />

      <div className="kycd-dot" />

      <div className="kycd-dot" />
    </div>
  </div>

  <p className="kycd-caption">Animated simulation. Actual widget UI may vary.</p>
</div>

<script src="/static/kycd-widget.js" />

***

## How the flow works

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

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

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

  <Step title="Document verification">
    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">
    The user's PAN number is verified to satisfy tax identity requirements for Indian regulations.
  </Step>

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

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