> ## 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 (Australia)

This page shows the complete KYC widget flow for an Australian 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">Documents</span>
    <span className="kycd-phase-sep-s">›</span>
    <span className="kycd-phase-item" data-phase-start="8">Liveness</span>
    <span className="kycd-phase-sep-s">›</span>
    <span className="kycd-phase-item" data-phase-start="9">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="alex@example.com.au">
                <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>[alex@example.com.au](mailto:alex@example.com.au)</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">🇦🇺 +61</div>

                <div className="kycd-input kycd-typeable" data-typetext="412 345 678">
                  <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">🇦🇺 +61</div>

                <div className="kycd-input kycd-input-filled">
                  <span>412 345 678</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="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 complete your identity check.</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">Passport</span>
                  <span className="kycd-doc-desc">International travel document</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">Driver's Licence</span>
                  <span className="kycd-doc-desc">State or territory 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-s5" data-duration="2200">
          <div className="kycd-hdr">
            <div className="kycd-hdr-icon" style={{fontSize:'14px'}}>←</div>
            <span className="kycd-hdr-title">Upload passport</span>

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

          <div className="kycd-body">
            <p className="kycd-subtitle">Take a clear photo of your passport photo page.</p>

            <div className="kycd-upload-zone">
              <div className="kycd-upload-icon">📄</div>
              <span className="kycd-upload-label">Tap to capture or upload</span>
              <span className="kycd-upload-hint">JPG, PNG — max 10 MB</span>
            </div>

            <div className="kycd-upload-tips">
              <div className="kycd-tip-item">Place document on a flat, dark surface</div>
              <div className="kycd-tip-item">Ensure all text is clearly readable</div>
              <div className="kycd-tip-item">Avoid glare and shadows</div>
            </div>
          </div>

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

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

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

          <div className="kycd-body">
            <p className="kycd-subtitle">Take a clear photo of your passport photo page.</p>

            <div className="kycd-upload-zone kycd-upload-done">
              <div className="kycd-upload-preview">
                <div className="kycd-doc-preview-bar" />

                <div className="kycd-doc-preview-photo" />

                <div className="kycd-doc-preview-lines">
                  <div className="kycd-doc-line" />

                  <div className="kycd-doc-line kycd-doc-line-short" />

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

              <div className="kycd-upload-ok">✓ passport.jpg</div>
            </div>
          </div>

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

        <div className="kycd-screen kycd-s7" 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 passport</p>
            <p className="kycd-loading-sub">This takes just a moment…</p>

            <div className="kycd-check-items">
              <div className="kycd-check-item">Checking document authenticity</div>
              <div className="kycd-check-item">Reading passport details</div>
              <div className="kycd-check-item">Running identity checks</div>
            </div>
          </div>
        </div>

        <div className="kycd-screen kycd-s8" data-duration="3800">
          <div className="kycd-hdr">
            <div className="kycd-hdr-icon" style={{fontSize:'14px'}}>←</div>
            <span className="kycd-hdr-title">Liveness check</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-s9" data-duration="1500">
          <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-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-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>
  </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="Document upload">
    The user selects their preferred identity document (Passport or Driver's Licence) and uploads a clear photo.
  </Step>

  <Step title="Liveness check">
    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>