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

> Props and usage of the React SDK components used in the agent card flows

Both components render a Crossmint-hosted iframe and authenticate the user with a JWT. Render them inside a [`CrossmintProvider`](/agents/sdk-reference/react/get-started#provider-setup).

## CrossmintPaymentMethodManagement

Renders the UI to save a new card or select one of the user's saved cards. Use it in [Save a Card](/agents/payment-methods/cards/save-card).

### Props

<ResponseField name="jwt" type="string" required>
  The user's Crossmint auth token.
</ResponseField>

<ResponseField name="allowedModes" type="(&#x22;new&#x22; | &#x22;existing&#x22;)[]" default="[&#x22;new&#x22;]">
  Which sections the management UI renders. `["new"]` shows only the "add new" section. Include `"existing"` to also show the saved-methods section.
</ResponseField>

<ResponseField name="allowedPaymentMethodTypes" type="(&#x22;card&#x22; | &#x22;bank-account-us&#x22;)[]" default="[&#x22;card&#x22;]">
  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.
</ResponseField>

<ResponseField name="appearance" type="PaymentMethodManagementAppearance">
  Fonts, variables, and rules to style the hosted UI. See [Customize UI](/agents/payment-methods/cards/customize-verification-ui).
</ResponseField>

<ResponseField name="onPaymentMethodSelected" type="(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.

  <Expandable title="CrossmintPaymentMethod (type: &#x22;card&#x22;)">
    <ResponseField name="type" type="&#x22;card&#x22;" />

    <ResponseField name="paymentMethodId" type="string">
      Persist this ID in your backend; it is what the order intent and CVC recollection flows reference.
    </ResponseField>

    <ResponseField name="card" type="{ brand: string; last4: string; expiration: { month: string; year: string } }">
      Display data only. `month` is 2 digits, `year` is 4 digits.
    </ResponseField>

    <ResponseField name="default" type="boolean" />
  </Expandable>
</ResponseField>

### 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.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](/agents/payment-methods/cards/recollect-cvc). Requires `@crossmint/client-sdk-react-ui` 4.7.0 or later.

### Props

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

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

<ResponseField name="appearance" type="PaymentMethodManagementAppearance">
  Same appearance model as `CrossmintPaymentMethodManagement` (not the verification modal's). See [Customize UI](/agents/payment-methods/cards/customize-verification-ui#customize-the-cvc-recollection-form).
</ResponseField>

<ResponseField name="onComplete" type="() => void">
  Called once the vault holds a fresh CVC. Receives no CVC and no token payload.
</ResponseField>

<ResponseField name="onError" type="(error: CvcRecollectionError) => void">
  Called when the form cannot complete.

  <Expandable title="CvcRecollectionError">
    <ResponseField name="reason" type="&#x22;widget-unavailable&#x22; | &#x22;invalid-configuration&#x22; | &#x22;invalid-credentials&#x22; | &#x22;provider-error&#x22; | &#x22;verification-refused&#x22; | &#x22;unknown&#x22;">
      `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.
    </ResponseField>

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

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

### Usage

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

## See Also

* [Get Started](/agents/sdk-reference/react/get-started) — Installation and provider setup
* [Save a Card](/agents/payment-methods/cards/save-card) — Guide for `CrossmintPaymentMethodManagement`
* [Recollect the CVC](/agents/payment-methods/cards/recollect-cvc) — Guide for `CrossmintCvcRecollection`