> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> React components for React SDK reference for Crossmint agent payments

## 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

<ResponseField name="allowedModes" type="&#x22;new&#x22; | &#x22;existing&#x22;[]">
  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.
</ResponseField>

<ResponseField name="allowedPaymentMethodTypes" type="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.
</ResponseField>

<ResponseField name="appearance" type="PaymentMethodManagementAppearance">
  <Expandable title="properties">
    <ResponseField name="fonts" type="EmbeddedCheckoutV3Appearance[&#x22;fonts&#x22;]" />

    <ResponseField name="rules" type="EmbeddedCheckoutV3Appearance[&#x22;rules&#x22;]" />

    <ResponseField name="variables" type="EmbeddedCheckoutV3Appearance[&#x22;variables&#x22;]" />
  </Expandable>
</ResponseField>

<ResponseField name="jwt" type="string" required />

<ResponseField name="onPaymentMethodSelected" type="(paymentMethod: CrossmintPaymentMethod) => void | Promise<void>" />

### Usage

```tsx theme={null}
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

<ResponseField name="appearance" type="VerificationAppearance">
  <Expandable title="properties">
    <ResponseField name="rules" type="VerificationAppearanceRules">
      <Expandable title="properties">
        <ResponseField name="CloseButton" type="{ colors?: { background?: string }; hover?: { colors?: object } }">
          <Expandable title="properties">
            <ResponseField name="colors" type="{ background?: string }" />

            <ResponseField name="hover" type="{ colors?: { background?: string } }" />
          </Expandable>
        </ResponseField>

        <ResponseField name="Input" type="{ borderRadius?: string; colors?: { background?: string; border?: string } }">
          <Expandable title="properties">
            <ResponseField name="borderRadius" type="string" />

            <ResponseField name="colors" type="{ background?: string; border?: string }" />
          </Expandable>
        </ResponseField>

        <ResponseField name="Modal" type="{ borderRadius?: string; colors?: { border?: string } }">
          <Expandable title="properties">
            <ResponseField name="borderRadius" type="string" />

            <ResponseField name="colors" type="{ border?: string }" />
          </Expandable>
        </ResponseField>

        <ResponseField name="Overlay" type="{ colors?: { background?: string } }">
          <Expandable title="properties">
            <ResponseField name="colors" type="{ background?: string }" />
          </Expandable>
        </ResponseField>

        <ResponseField name="PrimaryButton" type="object">
          <Expandable title="properties">
            <ResponseField name="borderRadius" type="string" />

            <ResponseField name="colors" type="{ background?: string; text?: string }" />

            <ResponseField name="disabled" type="{ colors?: { background?: string } }" />

            <ResponseField name="hover" type="{ colors?: { background?: string } }" />
          </Expandable>
        </ResponseField>

        <ResponseField name="Radio" type="{ colors?: { border?: string }; selected?: { colors?: object } }">
          <Expandable title="properties">
            <ResponseField name="colors" type="{ border?: string }" />

            <ResponseField name="selected" type="{ colors?: { background?: string; border?: string; dot?: string } }" />
          </Expandable>
        </ResponseField>

        <ResponseField name="SecondaryButton" type="{ colors?: { background?: string; text?: string }; hover?: { colors?: object } }">
          <Expandable title="properties">
            <ResponseField name="colors" type="{ background?: string; text?: string }" />

            <ResponseField name="hover" type="{ colors?: { background?: string } }" />
          </Expandable>
        </ResponseField>
      </Expandable>
    </ResponseField>

    <ResponseField name="variables" type="VerificationAppearanceVariables">
      <Expandable title="properties">
        <ResponseField name="borderRadius" type="string" />

        <ResponseField name="colors" type="object">
          <Expandable title="properties">
            <ResponseField name="accent" type="string" />

            <ResponseField name="backgroundPrimary" type="string" />

            <ResponseField name="backgroundSecondary" type="string" />

            <ResponseField name="border" type="string" />

            <ResponseField name="danger" type="string" />

            <ResponseField name="success" type="string" />

            <ResponseField name="textPrimary" type="string" />

            <ResponseField name="textSecondary" type="string" />
          </Expandable>
        </ResponseField>

        <ResponseField name="fontFamily" type="string" />

        <ResponseField name="fontSizeUnit" type="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.
        </ResponseField>

        <ResponseField name="spacingUnit" type="string">
          Not applied by `OrderIntentVerification`; see `fontSizeUnit`.
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="displayName" type="string">
  Name of the agent shown to the user in the card network's verification UI.
</ResponseField>

<ResponseField name="onVerificationComplete" type="() => void">
  Called once the user has approved the allowance. Refetch the order intent afterwards.
</ResponseField>

<ResponseField name="onVerificationError" type="(error: unknown) => void" />

<ResponseField name="orderIntent" type="OrderIntentWithVerification" required>
  The order intent returned by the API, including its `verificationConfig`.

  <Expandable title="properties">
    <ResponseField name="amount" type="{ available: string; currency: string; reserved: string; spent: string; total: string }" required>
      <Expandable title="properties">
        <ResponseField name="available" type="string" required />

        <ResponseField name="currency" type="string" required />

        <ResponseField name="reserved" type="string" required />

        <ResponseField name="spent" type="string" required />

        <ResponseField name="total" type="string" required />
      </Expandable>
    </ResponseField>

    <ResponseField name="description" type="string" required />

    <ResponseField name="expiresAt" type="string" required />

    <ResponseField name="merchant" type="OrderIntentMerchant">
      <Expandable title="properties">
        <ResponseField name="acquirerBin" type="string" />

        <ResponseField name="categoryCode" type="string" />

        <ResponseField name="countryCode" type="string" required>
          ISO 3166-1 alpha-2, upper case.
        </ResponseField>

        <ResponseField name="name" type="string" required />

        <ResponseField name="url" type="string" required>
          http or https URL of the merchant.
        </ResponseField>
      </Expandable>
    </ResponseField>

    <ResponseField name="orderIntentId" type="string" required />

    <ResponseField name="paymentMethodId" type="string" required />

    <ResponseField name="rails" type="OrderIntentRail[]" required>
      <Expandable title="properties">
        <ResponseField name="credentialFormats" type="OrderIntentCredentialFormat[]" required />

        <ResponseField name="provider" type="OrderIntentProvider" />

        <ResponseField name="rail" type="&#x22;agentic-token&#x22;" required />
      </Expandable>
    </ResponseField>

    <ResponseField name="status" type="OrderIntentStatus" required />

    <ResponseField name="verificationConfig" type="OrderIntentVerificationConfig" required>
      <Expandable title="properties">
        <ResponseField name="allowanceId" type="string" required />

        <ResponseField name="environment" type="&#x22;production&#x22; | &#x22;test&#x22;" required />

        <ResponseField name="publicApiKey" type="string" required />
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

### Usage

```tsx theme={null}
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

<ResponseField name="appearance" type="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`.

  <Expandable title="properties">
    <ResponseField name="fonts" type="EmbeddedCheckoutV3Appearance[&#x22;fonts&#x22;]" />

    <ResponseField name="rules" type="EmbeddedCheckoutV3Appearance[&#x22;rules&#x22;]" />

    <ResponseField name="variables" type="EmbeddedCheckoutV3Appearance[&#x22;variables&#x22;]" />
  </Expandable>
</ResponseField>

<ResponseField name="jwt" type="string" required>
  The user's Crossmint auth token, the same one `CrossmintPaymentMethodManagement` takes.
</ResponseField>

<ResponseField name="onComplete" type="() => void">
  Called once Crossmint has stored the new CVC. Receives no CVC and no token payload.
</ResponseField>

<ResponseField name="onError" type="(error: object) => void" />

<ResponseField name="paymentMethodId" type="string" required>
  The saved card whose CVC has to be entered again.
</ResponseField>

### Usage

```tsx theme={null}
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

<ResponseField name="appearance" type="ProtectedInputAppearance" />

<ResponseField name="expiresAt" type="string">
  ISO 8601 datetime. Server default is 24 hours from creation; the maximum is 7 days.
</ResponseField>

<ResponseField name="jwt" type="string" required>
  The buyer's Crossmint auth token, the same one `CrossmintPaymentMethodManagement` takes.
</ResponseField>

<ResponseField name="label" type="string">
  Text shown above the field, for example the merchant name. At most 120 characters.
</ResponseField>

<ResponseField name="merchantUrl" type="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.
</ResponseField>

<ResponseField name="onCreated" type="(created: { expiresAt: string; merchant: object; protectedInputId: string; purpose: &#x22;password&#x22; }) => void">
  Called once with the opaque `protectedInputId` to hand to Universal Checkout.
</ResponseField>

<ResponseField name="onError" type="(error: { code: string; message: string }) => void" />

### Usage

```tsx theme={null}
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.