KYC Verification
Know Your Customer identity verification flow for regulated financial services.
Code
- HTML · @primus/ui-core
- React
- Angular
<div class="card" style="max-width:360px;padding:1.25rem">
<h3 style="margin:0 0 0.75rem;font-size:0.975rem">Identity Verification</h3>
<div class="vstack">
<div class="hstack"><div style="width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success);display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:600;flex-shrink:0">✓</div><span style="font-size:0.875rem">Government ID submitted</span></div>
<div class="hstack"><div style="width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success);display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:600;flex-shrink:0">✓</div><span style="font-size:0.875rem">Selfie verified</span></div>
<div class="hstack"><div style="width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--warning) 15%,transparent);color:var(--warning);display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:600;flex-shrink:0">⏳</div><span style="font-size:0.875rem">Address confirmation pending</span></div>
</div>
</div>
import { KYCVerification } from 'primus-react-ui';
<KYCVerification userId="user-123" apiUrl="https://api.yourdomain.com" />
<primus-kyc-verification userId="user-123"
[apiUrl]="'https://api.yourdomain.com'">
</primus-kyc-verification>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
userId | string | — | User identifier |
apiUrl | string | — | KYC API URL |
Props — full reference
| Prop | Type | Default | Description |
|---|---|---|---|
userId | string | required | User identifier |
apiUrl | string | — | KYC API base URL |
requiredDocuments | string[] | — | Document types required |
onComplete | (result: KycResult) => void | — | Fires when all steps pass |
interface KycResult {
userId: string;
status: 'verified' | 'pending' | 'failed';
steps: KycStep[];
verifiedAt?: string;
}
interface KycStep {
id: string;
label: string;
status: 'completed' | 'pending' | 'failed';
}
Version history
See the Changelog for version history and breaking changes.