Customize UI

Style the allowance verification modal and the CVC recollection form to match your brand

The cards flow ships two hosted UIs, both styled through an appearance prop:

• OrderIntentVerification renders the modal where the user completes the card network’s verification, such as a Visa passkey (see Create an Agent Card).
• CrossmintCvcRecollection renders the field where the user re-enters a saved card’s CVC after it expires (see Recollect the CVC).

Customize the Verification Modal

The OrderIntentVerification appearance object has two top-level keys: variables (global design tokens) and rules (per-element overrides).

Variables

Global design tokens that apply across the entire modal.

Token	What it controls
fontFamily	Font stack for all text
fontSizeUnit	Base body font size (for example, "14px"). Title, small, error, input, and passkey sizes scale proportionally
spacingUnit	Base section spacing (for example, "16px"). Modal, input, button-gap, and option-gap scale proportionally
borderRadius	Default border radius for modal, input, button, and option elements
colors.accent	Primary/brand color — buttons, focus rings, radio selected state, spinner
colors.textPrimary	Main text color and button text
colors.textSecondary	Secondary and placeholder text
colors.backgroundPrimary	Surface/card background
colors.backgroundSecondary	Input background, secondary button background
colors.border	Default border for modal, inputs, and radio
colors.danger	Error text, error border, error icon
colors.success	Success icon, success background

The SDK auto-infers missing color tokens from the ones you provide. For example, setting only backgroundPrimary will derive textPrimary, textSecondary, backgroundSecondary, and border automatically.

Rules

Per-element overrides that take precedence over variables.

Rule	Customizable properties
Overlay	colors.background (backdrop behind the modal)
Modal	borderRadius, colors.border
Input	borderRadius, colors.background, colors.border
PrimaryButton	borderRadius, colors.text, colors.background, hover.colors.background, disabled.colors.background
SecondaryButton	colors.text, colors.background, hover.colors.background
CloseButton	colors.background, hover.colors.background
Radio	colors.border, selected.colors.border, selected.colors.background, selected.colors.dot

Apply the Appearance

You do not need to specify everything. The SDK infers missing colors:

import {
    OrderIntentVerification,
    type OrderIntentVerificationProps,
} from "@crossmint/client-sdk-react-ui";

function VerifyOrderIntent({
    orderIntent,
}: {
    orderIntent: OrderIntentVerificationProps["orderIntent"];
}) {
    return (
        <OrderIntentVerification
            orderIntent={orderIntent}
            appearance={{
                variables: {
                    colors: {
                        accent: "#6366f1",
                        backgroundPrimary: "#1e1e2e",
                    },
                },
            }}
            onVerificationComplete={() => {
                console.log("Allowance verified");
            }}
            onVerificationError={(error) => {
                console.error("Allowance verification failed", error);
            }}
        />
    );
}

This alone will auto-derive textPrimary, textSecondary, backgroundSecondary, and border from the dark background, and use the accent color for buttons, focus rings, and radio selections.

Customize the CVC Recollection Form

CrossmintCvcRecollection accepts the same appearance object as CrossmintPaymentMethodManagement. Keep fontSizeUnit and spacingUnit close to their defaults: they multiply the component’s internal sizes rather than set a base size.

Token	What it controls
fontFamily	Font stack for the label, input, and button
fontSizeUnit	Font size multiplier (default "4px")
spacingUnit	Spacing multiplier (default "3.33px")
borderRadius	Border radius for the input and button
colors.accent	Button background and focus ring
colors.textPrimary	Label and input text
colors.backgroundPrimary	Input background
colors.borderPrimary	Input border
colors.danger	Error text and error border

import { CrossmintCvcRecollection } from "@crossmint/client-sdk-react-ui";

function RecollectCvc({ jwt, paymentMethodId }: { jwt: string; paymentMethodId: string }) {
    return (
        <CrossmintCvcRecollection
            jwt={jwt}
            paymentMethodId={paymentMethodId}
            appearance={{
                variables: {
                    fontSizeUnit: "4px",
                    spacingUnit: "3.33px",
                    borderRadius: "8px",
                    colors: {
                        accent: "#05B959",
                        textPrimary: "#00150d",
                        borderPrimary: "rgba(0,0,0,0.1)",
                    },
                },
            }}
            onComplete={() => {
                console.log("CVC updated");
            }}
        />
    );
}