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

# Get Started

> Installation and setup for the React SDK components used in the agent card flows

### Latest React SDK version - <a href="https://www.npmjs.com/package/@crossmint/client-sdk-react-ui" target="_blank" rel="noopener" style={{display: "inline-block", verticalAlign: "middle", textDecoration: "none", borderBottom: "none"}}><img src="https://img.shields.io/npm/v/@crossmint/client-sdk-react-ui" alt="npm" style={{display: "inline-block", verticalAlign: "middle", margin: 0}} noZoom /></a>

The Crossmint React SDK (`@crossmint/client-sdk-react-ui`) provides the client-side components of the agent card flows. Card data is collected inside Crossmint-hosted iframes, so the card number and CVC never pass through your application or servers.

| Component                          | Purpose                                                                       | Guide                                                            |
| ---------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| `CrossmintPaymentMethodManagement` | Save a user's card and select a saved card                                    | [Save a Card](/agents/payment-methods/cards/save-card)           |
| `CrossmintCvcRecollection`         | Ask the user to re-enter the CVC of a saved card once the vaulted CVC expires | [Recollect the CVC](/agents/payment-methods/cards/recollect-cvc) |

## Installation

`CrossmintCvcRecollection` requires version 4.7.0 or later.

<Snippet file="client-sdk-react-ui-installation-cmd.mdx" />

## Provider Setup

Wrap your application with `CrossmintProvider` and pass a client-side API key. In production, the key needs the `payment-methods.create`, `payment-methods.read`, and `payment-methods.update` scopes; the CVC recollection flow also needs `order-intents.read` to check the order intent. In staging, all scopes are included by default.

```tsx theme={null}
import { CrossmintProvider } from "@crossmint/client-sdk-react-ui";

function App() {
    return <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">{/* Your agent card components */}</CrossmintProvider>;
}
```

## See Also

* [Components](/agents/sdk-reference/react/components) — Props and usage of the agent card components
* [Cards Quickstart](/agents/cards-quickstart) — Get your agent paying with agent cards in 15 minutes