Components

CrossmintPaymentMethodManagement

Lets the user save a new card or bank account, or pick one of their saved payment methods. Rendered in a Crossmint-hosted iframe, so payment details never touch your app. Takes the user’s Crossmint jwt. onPaymentMethodSelected receives the chosen method; its paymentMethodId is what your backend uses to pay (for example to create order intents).

Props

"new" | "existing"[]

Which sections the management UI renders. ["new"] (default) shows only the “add new” section: no saved-methods fetch, no auto-open/auto-select of an existing method. Include "existing" to also show the saved-methods section.

PaymentMethodManagementAllowedType[]

Filter array of which method types the “add new” section offers (default ["card"]). LM0 renders the first supported entry; passing more than one type does not yet render a type picker.

PaymentMethodManagementAppearance

Show properties

EmbeddedCheckoutV3Appearance["fonts"]

EmbeddedCheckoutV3Appearance["rules"]

EmbeddedCheckoutV3Appearance["variables"]

string

required

(paymentMethod: CrossmintPaymentMethod) => void | Promise<void>

Usage

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

function PaymentMethods({ jwt }: { jwt: string }) {
    return (
        <CrossmintPaymentMethodManagement
            jwt={jwt}
            allowedModes={["new", "existing"]}
            allowedPaymentMethodTypes={["card"]}
            onPaymentMethodSelected={(paymentMethod) => {
                if (paymentMethod.type === "card") {
                    console.log("Card selected:", paymentMethod.card.last4);
                }
            }}
        />
    );
}

Note: CrossmintPaymentMethodManagement renders an iframe-based UI for managing saved payment methods. Requires a valid JWT for authentication. The onPaymentMethodSelected callback receives a discriminated union — narrow on type before accessing variant-specific fields.

OrderIntentVerification

Runs the card network’s allowance verification for an order intent. Render it when the intent’s agentic-token rail reports status: "pending_verification"; it renders nothing itself and opens the network’s verification UI on mount.

Props

VerificationAppearance

Show properties

VerificationAppearanceRules

Show properties

{ colors?: { background?: string }; hover?: { colors?: object } }

Show properties

{ background?: string }

{ colors?: { background?: string } }

{ borderRadius?: string; colors?: { background?: string; border?: string } }

Show properties

string

{ background?: string; border?: string }

Show properties

string

{ border?: string }

{ colors?: { background?: string } }

Show properties

{ background?: string }

object

Show properties

string

{ background?: string; text?: string }

{ colors?: { background?: string } }

{ colors?: { border?: string }; selected?: { colors?: object } }

Show properties

{ border?: string }

{ colors?: { background?: string; border?: string; dot?: string } }

{ colors?: { background?: string; text?: string }; hover?: { colors?: object } }

Show properties

{ background?: string; text?: string }

{ colors?: { background?: string } }

VerificationAppearanceVariables

Show properties

string

object

Show properties

string

Not applied by OrderIntentVerification: only colors (and the button / input colors under rules) reach the verification modal. Not the multiplier unit of EmbeddedCheckoutV3AppearanceVariables.fontSizeUnit, so do not share one object between the two.

string

Not applied by OrderIntentVerification; see fontSizeUnit.

string

Name of the agent shown to the user in the card network’s verification UI.

() => void

Called once the user has approved the allowance. Refetch the order intent afterwards.

(error: unknown) => void

OrderIntentWithVerification

required

The order intent returned by the API, including its verificationConfig.

Show properties

{ available: string; currency: string; reserved: string; spent: string; total: string }

required

Show properties

string

required

string

required

string

required

string

required

string

required

string

required

string

required

OrderIntentMerchant

Show properties

string

required

ISO 3166-1 alpha-2, upper case.

string

required

string

required

http or https URL of the merchant.

string

required

string

required

OrderIntentRail[]

required

Show properties

OrderIntentCredentialFormat[]

required

OrderIntentProvider

"agentic-token"

required

OrderIntentStatus

required

OrderIntentVerificationConfig

required

Show properties

string

required

"production" | "test"

required

string

required

Usage

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

function VerifyOrderIntent({
    orderIntent,
}: {
    orderIntent: OrderIntentVerificationProps["orderIntent"];
}) {
    return (
        <OrderIntentVerification
            orderIntent={orderIntent}
            displayName="Acme Shopping Agent"
            onVerificationComplete={() => {
                console.log("Allowance verified");
            }}
            onVerificationError={(error) => {
                console.error("Allowance verification failed", error);
            }}
        />
    );
}

Note: After onVerificationComplete, fetch the order intent again and wait for the agentic-token rail to report status: "active" before creating a credential.

CrossmintCvcRecollection

Asks the user to enter a saved card’s CVC again. Render it when an order intent’s encrypted-card rail reports status: "pending_cvc_recollection", then refetch the order intent from onComplete.

Props

PaymentMethodManagementAppearance

Same appearance model as CrossmintPaymentMethodManagement and the embedded checkout, not the one of the verification modal: variables.fontSizeUnit / spacingUnit are multiplier units (defaults "4px" / "3.33px"), not base sizes. See EmbeddedCheckoutV3AppearanceVariables.

Show properties

EmbeddedCheckoutV3Appearance["fonts"]

EmbeddedCheckoutV3Appearance["rules"]

EmbeddedCheckoutV3Appearance["variables"]

string

required

The user’s Crossmint auth token, the same one CrossmintPaymentMethodManagement takes.

() => void

Called once Crossmint has stored the new CVC. Receives no CVC and no token payload.

(error: object) => void

string

required

The saved card whose CVC has to be entered again.

Usage

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

function RefreshCardCvc({ jwt, paymentMethodId }: { jwt: string; paymentMethodId: string }) {
    return (
        <CrossmintCvcRecollection
            jwt={jwt}
            paymentMethodId={paymentMethodId}
            onComplete={() => {
                console.log("CVC stored, refetch the order intent");
            }}
            onError={(error) => {
                if (!error.retriable) {
                    console.error("CVC recollection failed", error);
                }
            }}
        />
    );
}

Note: Render it when an order intent’s encrypted-card rail reports status: "pending_cvc_recollection", or when creating a credential is refused with HTTP 409 ORDER_INTENT_CVC_RECOLLECTION_REQUIRED. Retriable errors keep the form mounted; non-retriable ones unmount it, so show your own message.

CrossmintProtectedInput

Collects the password of the buyer’s account on a merchant site inside a Crossmint-hosted iframe and returns an opaque protectedInputId to hand to Universal Checkout. The password never reaches this component, the developer’s JavaScript, or the agent. Takes the buyer’s JWT as a prop, like CrossmintPaymentMethodManagement.

Props

ProtectedInputAppearance

string

ISO 8601 datetime. Server default is 24 hours from creation; the maximum is 7 days.

string

required

The buyer’s Crossmint auth token, the same one CrossmintPaymentMethodManagement takes.

string

Text shown above the field, for example the merchant name. At most 120 characters.

string

required

The merchant sign-in page the password is for. Its host becomes the input’s merchant domain; Universal Checkout may only use the input on that host or a subdomain of it.

(created: { expiresAt: string; merchant: object; protectedInputId: string; purpose: "password" }) => void

Called once with the opaque protectedInputId to hand to Universal Checkout.

(error: { code: string; message: string }) => void

Usage

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

function MerchantPassword({ jwt, onProtectedInputId }: { jwt: string; onProtectedInputId: (id: string) => void }) {
    return (
        <CrossmintProtectedInput
            jwt={jwt}
            merchantUrl="https://shop.example.com/login"
            label="Example Shop"
            onCreated={({ protectedInputId }) => onProtectedInputId(protectedInputId)}
            onError={({ code, message }) => console.error(code, message)}
        />
    );
}

Note: CrossmintProtectedInput collects the password of the buyer’s account on a merchant site inside a Crossmint-hosted iframe and returns only an opaque protectedInputId. Pass that id to Universal Checkout as the protected input response; the password never reaches your JavaScript. Pass the buyer’s JWT as jwt, like CrossmintPaymentMethodManagement. Lifecycle: the hosted page posts exactly one terminal event per mount, so after onCreated or onError remount the component (change its key) to collect again; the page posts invalid_params when it rejects the props.

Introduction

Agent Cards

Agent Wallets

Agent Checkouts

API Reference

CrossmintPaymentMethodManagement

Props

Usage

OrderIntentVerification

Props

Usage

CrossmintCvcRecollection

Props

Usage

CrossmintProtectedInput

Props

Usage

​CrossmintPaymentMethodManagement

​Props

​Usage

​OrderIntentVerification

​Props

​Usage

​CrossmintCvcRecollection

​Props

​Usage

​CrossmintProtectedInput

​Props

​Usage

CrossmintPaymentMethodManagement

Props

Usage

OrderIntentVerification

Props

Usage

CrossmintCvcRecollection

Props

Usage

CrossmintProtectedInput

Props

Usage