Skip to main content

​
Overview

The card enrollment and spending authorization flows render a verification modal (passkey prompt) to the user. You can customize the look and feel of this modal using the appearance prop, which both verification components accept.
  • PaymentMethodAgenticEnrollmentVerification: One-time card enrollment step. Shown when an enrollment’s status is "pending" and needs passkey verification.
  • OrderIntentVerification: Spending authorization step. Shown when an order intent’s phase is "requires-verification".

​
How to customize the appearance

The appearance object has two top-level keys: variables (global design tokens) and rules (per-element overrides).
Global design tokens that apply across the entire modal.
TokenWhat it controls
fontFamilyFont stack for all text
fontSizeUnitBase body font size (e.g. "14px"). Title, small, error, input, and passkey sizes scale proportionally
spacingUnitBase section spacing (e.g. "16px"). Modal, input, button-gap, and option-gap scale proportionally
borderRadiusDefault border radius for modal, input, button, and option elements
colors.accentPrimary/brand color — buttons, focus rings, radio selected state, spinner
colors.textPrimaryMain text color and button text
colors.textSecondarySecondary and placeholder text
colors.backgroundPrimarySurface/card background
colors.backgroundSecondaryInput background, secondary button background
colors.borderDefault border for modal, inputs, and radio
colors.dangerError text, error border, error icon
colors.successSuccess 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.

​
Example

You do not need to specify everything. The SDK infers missing colors: 
import { OrderIntentVerification } from "@crossmint/client-sdk-react-ui";

<OrderIntentVerification
    orderIntent={orderIntent}
    appearance={{
        variables: {
            colors: {
                accent: "#6366f1",
                backgroundPrimary: "#1e1e2e",
            },
        },
    }}
    onVerificationComplete={() => {}}
    onVerificationError={(err) => console.error(err)}
/>
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.