{sectionLabel("Try the flow")}
{[{
n: 1,
title: `Tap "${cfg.cta}"`,
desc: "The partner host's UI and UX. Yours stays yours."
}, {
n: 2,
title: "Widget takes over the body",
desc: ({
"all": "Uphold collects personal details and address, then runs an identity check — address verified automatically.",
"identity-poa": "Uphold runs an identity check; the address is verified automatically from the ID.",
"proof-of-address": "Uphold collects a proof-of-address document only."
})[cfg.flow] + " Only what you configure."
}, {
n: 3,
title: "Submit, return",
desc: "KYC Widget emits complete event, the user lands back on your app — pending review."
}].map(step =>
{step.n}
{step.title}
{step.desc}
)}
Approval is asynchronous
The complete event only means "submitted". The approve/reject outcome arrives later via webhooks — tap Simulate webhook on the home screen to see the account unlock.
;
};
export const KYC_PARTNER_CONFIGS = [{
id: "meridian",
label: "Meridian",
tag: "Investing",
desc: "ETF & equities",
chipBg: "#1d2738",
chipFg: "#fff",
phoneBgClass: "bg-[#FAFAF7]",
accent: "#1d2738",
region: "GB",
regionLabel: "UK",
lightStatus: true,
flow: "identity-poa",
cta: "Verify your identity",
processes: ["identity", "proof-of-address"],
scenario: {
headline: "Unlock trading",
detail: "A light-theme Widget collects identity and proof of address (verified automatically) so the user can unlock full access and trade."
}
}, {
id: "lumen",
label: "Lumen",
tag: "Crypto",
desc: "Crypto & staking",
chipBg: "#0B0D10",
chipFg: "#E8FF3A",
phoneBgClass: "bg-[#0B0D10]",
accent: "#E8FF3A",
region: "US",
regionLabel: "US",
lightStatus: false,
widgetDark: true,
flow: "proof-of-address",
cta: "Unlock",
processes: ["proof-of-address"],
scenario: {
headline: "Proof of address only",
detail: "A dark-theme Widget matching the app collects a proof-of-address document on its own — used when the address can't be verified automatically from an ID."
}
}, {
id: "vault",
label: "Vault",
tag: "Neobank",
desc: "Spending & savings",
chipBg: "#FF5C39",
chipFg: "#fff",
phoneBgClass: "bg-[#F4EFE8]",
accent: "#FF5C39",
region: "EU",
regionLabel: "EU",
lightStatus: true,
flow: "all",
cta: "Start verification",
processes: ["identity", "proof-of-address"],
widgetTheme: {
bg: "#F4EFE8",
fg: "#1A1410",
ctaBg: "#FF5C39",
ctaFg: "#ffffff"
},
scenario: {
headline: "Themed account setup",
detail: "The Widget is themed to match Vault's colors and runs the full flow — profile, address, identity and proof of address — to set up the account before using the app."
}
}];
export const PendingScreen = ({partner, onDone}) => {
const isDark = partner === "lumen";
const isVault = partner === "vault";
const bgStyle = isDark ? {
backgroundColor: "#0B0D10",
color: "white"
} : isVault ? {
backgroundColor: "#F4EFE8",
color: "#1A1410"
} : {
backgroundColor: "#FAFAF7",
color: "#0E1525"
};
const accent = isDark ? "#E8FF3A" : isVault ? "#FF5C39" : "#1d2738";
const muted = isDark ? "text-white/60" : "text-[#0E1525]/60";
return
Verification submitted
Thanks — we've received your details. We're reviewing them now and we'll let you know the outcome shortly.
;
}
if (screen === "identity") {
const ready = ["Have a driver's license, state ID, or passport ready.", "Stay in a well-lit room.", "Allow camera and microphone access to capture a selfie and ID photos."];
return
Fraud and identity protection
To protect the account, identity verification is required. Before starting, please:
{ready.map((t, i) =>
{t}
)}
We use Veriff to verify your identity. Veriff may collect personal data, including biometric data, to confirm who you are.
Turn your driver's license around and take a photo of the other side.
:
Accepted documents
Driver's license, residence permit, passport, ID card.
}
;
}
if (screen === "selfie") {
return
Take a selfie
{selfieShot ? : }
{selfieShot ? "Looks good — tap again to continue." : "Position your face in the oval and hold still."}
;
}
if (screen === "poa-intro") {
const cardBg = dark ? "rgba(255,255,255,0.04)" : "#ffffff";
const cardBorder = dark ? "rgba(255,255,255,0.1)" : "rgba(14,21,37,0.1)";
const pillBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(14,21,37,0.15)";
return
En
"Uphold" verification
You're about to submit sensitive data to "Uphold". If you received this link from a suspicious source, please close this page and notify us immediately.
;
export const IcoXCircle = () => ;
export const IcoCheckCircle = () => ;
export const IcoGlobe = () => ;
export const IcoClose = () => ;
export const IcoChevronDown = () => ;
export const IcoChevron = () => ;
export const IcoUpload = () => ;
export const IcoCamera = () => ;
export const IcoDoc = () => ;
export const IcoId = () => ;
export const IcoUser = () => ;
export const IcoClock = () => ;
export const IcoLock = () => ;
export const IcoShield = () => ;
export const IcoCheckSm = () => ;
export const IcoCheck = () => ;
export const IcoArrow = () => ;
export const IcoBack = () => ;
The KYC Widget is a fully Uphold-managed, embeddable solution for collecting KYC data from individual users across web and native apps. Instead of building and maintaining a custom verification interface, you embed the Widget and Uphold handles forms, document uploads, and process state on your behalf. It's fully customizable — themes, fonts, and brand colors — so it can match your app's look and feel.
***
## Features
Fully managed UI and verification logic with automated state handling.
Go live quickly with minimal frontend effort.
Run one or more KYC processes in a single flow.
Control which processes users go through via the SDK configuration.
Embed seamlessly into web apps via iframe and native apps via WebView.
Consistent user experience across all platforms.
SDK emits lifecycle events such as completion, error, and cancellation.
Integrate deeply with your app's flow and UI feedback.
## Next Steps
Install the SDK, configure CSP, and set up native app integration.
End-to-end walkthrough for onboarding individual users with the Widget.
Full reference for the `KycWidget` class, options, methods, and events.