Embed the KYC Step in Your App

{
    "orderIdentifier": "123",
    // ...
    "payment": {
        "method": "card",
        "currency": "usd",
        "status": "requires-kyc",
        "preparation": {
            "kyc": {
                "verificationId": "68e6a9c4f1b2a3d4e5f60718",
                "clientSecret": "YOUR_VERIFICATION_CLIENT_SECRET"
            }
        }
    }
}

"use client";

import { CrossmintIdentityVerification } from "@crossmint/client-sdk-react-ui";
import type { IdentityVerificationAppearance, IdentityVerificationCredentials } from "@crossmint/client-sdk-base";

// The same object you pass to the embedded checkout. See /identity/ui-customization.
const appearance: IdentityVerificationAppearance = {
    variables: {
        colors: { backgroundPrimary: "#FFFFFF", textPrimary: "#00150D", accent: "#0074D9" },
    },
    rules: {
        PrimaryButton: { colors: { background: "#0074D9", text: "#FFFFFF" } },
    },
};

interface VerificationStepProps {
    credentials: IdentityVerificationCredentials;
    onComplete: () => void;
    onCancel: () => void;
}

export function VerificationStep({ credentials, onComplete, onCancel }: VerificationStepProps) {
    return (
        <div className="my-custom-verification-container" style={{ padding: 24, background: "#FFFFFF" }}>
            {/* Your own heading, copy, progress indicator, etc. */}
            <CrossmintIdentityVerification
                credentials={credentials}
                appearance={appearance}
                locale="en-US"
                onReady={() => console.log("Verification UI loaded")}
                onComplete={() => onComplete()}
                onCancel={() => onCancel()}
                onError={({ retriable, reason, message }) => {
                    console.error("Verification error", reason, message);
                    if (!retriable) {
                        // The buyer cannot finish this attempt. Show a terminal state.
                    }
                }}
            />
        </div>
    );
}

"use client";

import { useEffect, useState } from "react";
import {
    CrossmintProvider,
    CrossmintCheckoutProvider,
    CrossmintEmbeddedCheckout,
    useIdentityVerificationCredentials,
} from "@crossmint/client-sdk-react-ui";
import type { IdentityVerificationCredentials } from "@crossmint/client-sdk-base";
import { VerificationStep } from "./VerificationStep";

export function OnrampCheckout({ orderId, clientSecret }: { orderId: string; clientSecret: string }) {
    return (
        <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">
            <CrossmintCheckoutProvider>
                <CrossmintEmbeddedCheckout
                    orderId={orderId}
                    clientSecret={clientSecret}
                    identityVerificationHandling="external"
                    payment={{
                        receiptEmail: "YOUR_USER_EMAIL",
                        crypto: { enabled: false },
                        fiat: { enabled: true },
                        defaultMethod: "fiat",
                    }}
                />
                <DecoupledVerification />
            </CrossmintCheckoutProvider>
        </CrossmintProvider>
    );
}

function DecoupledVerification() {
    // The checkout emits order updates to this hook, so the credentials arrive
    // without a second API call. Undefined until verification is required, and
    // undefined again once the order moves on, before the flow shows its result.
    const credentials = useIdentityVerificationCredentials();
    const [activeCredentials, setActiveCredentials] = useState<IdentityVerificationCredentials>();

    useEffect(() => {
        if (credentials != null) {
            setActiveCredentials(credentials);
        }
    }, [credentials]);

    if (activeCredentials == null) {
        return null;
    }

    return (
        <VerificationStep
            credentials={activeCredentials}
            onComplete={() => setActiveCredentials(undefined)}
            onCancel={() => setActiveCredentials(undefined)}
        />
    );
}