React SDK for Agents: Components

Both components render a Crossmint-hosted iframe and authenticate the user with a JWT. Render them inside a CrossmintProvider.

CrossmintPaymentMethodManagement

Renders the UI to save a new card or select one of the user’s saved cards. Use it in Save a Card.

Props

string

required

The user’s Crossmint auth token.

("new" | "existing")[]

default:"[\"new\"]"

Which sections the management UI renders. ["new"] shows only the “add new” section. Include "existing" to also show the saved-methods section.

("card" | "bank-account-us")[]

default:"[\"card\"]"

Which method types the “add new” section offers. Only the first entry is rendered; passing more than one type does not show a type picker yet.

PaymentMethodManagementAppearance

Fonts, variables, and rules to style the hosted UI. See Customize UI.

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

Called when the user saves a new card or selects an existing one. The argument is a discriminated union: narrow on type before reading variant-specific fields.

Show CrossmintPaymentMethod (type: "card")

"card"

string

Persist this ID in your backend; it is what the order intent and CVC recollection flows reference.

{ brand: string; last4: string; expiration: { month: string; year: string } }

Display data only. month is 2 digits, year is 4 digits.

boolean

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.paymentMethodId, paymentMethod.card.last4);
                }
            }}
        />
    );
}

CrossmintCvcRecollection

Renders a single hosted CVC input and a confirm button to refresh the vaulted CVC of a saved card. Render it when an order intent’s encrypted-card rail reports status: "pending_cvc_recollection", or when creating a credential for that rail fails with 409 ORDER_INTENT_CVC_RECOLLECTION_REQUIRED. Fetch the order intent again from onComplete: the rail goes back to active. Use it in Recollect the CVC. Requires @crossmint/client-sdk-react-ui 4.7.0 or later.

Props

string

required

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

string

required

The saved card whose vaulted CVC has to be refreshed.

PaymentMethodManagementAppearance

Same appearance model as CrossmintPaymentMethodManagement (not the verification modal’s). See Customize UI.

() => void

Called once the vault holds a fresh CVC. Receives no CVC and no token payload.

(error: CvcRecollectionError) => void

Called when the form cannot complete.

Show CvcRecollectionError

verification-refused means the CVC was submitted but Crossmint could not confirm it was stored; it is retriable. invalid-configuration is never retriable: fix the props.

boolean

When true, the form stays mounted and the user can submit again. When false, the component renders nothing afterwards: unmount it and show your own message.

string

Usage

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

function RecollectCvc({ jwt, paymentMethodId }: { jwt: string; paymentMethodId: string }) {
    return (
        <CrossmintCvcRecollection
            jwt={jwt}
            paymentMethodId={paymentMethodId}
            onComplete={() => {
                console.log("CVC updated");
            }}
            onError={(error) => {
                console.error("CVC recollection failed", error.reason, error.retriable);
            }}
        />
    );
}

Introduction

Agent Cards

Agent Wallets

Agent Checkouts

API Reference

Components

CrossmintPaymentMethodManagement

Props

Usage

CrossmintCvcRecollection

Props

Usage

See Also

​CrossmintPaymentMethodManagement

​Props

​Usage

​CrossmintCvcRecollection

​Props

​Usage

​See Also

CrossmintPaymentMethodManagement

Props

Usage

CrossmintCvcRecollection

Props

Usage

See Also