> ## 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 reference for Crossmint agent payments

### 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 user-facing pieces of agent card payments: saving a card, verifying an order intent's allowance with the card network, re-collecting a saved card's CVC, and collecting a merchant password for an agent checkout without it ever reaching your app. Agent wallets use the same wallet providers and hooks as the [Wallets React SDK](/sdk-reference/wallets/react/get-started).

## Installation

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

## Provider Setup

Wrap your application with the required providers:

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

function App({ children }: { children: ReactNode }) {
    return <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">{children}</CrossmintProvider>;
}
```

> **Note:** The agent card components take the user's JWT directly, so no additional provider is required. Add `CrossmintWalletProvider` only if your agent also uses wallets.

## Quick Example

Once the provider is set up, let the user save a card your agent can pay with:

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

function PaymentMethodsPage({ jwt }: { jwt: string }) {
    // jwt comes from your own auth provider (for example Stytch, Auth0, Dynamic)
    return (
        <CrossmintPaymentMethodManagement
            jwt={jwt}
            onPaymentMethodSelected={(paymentMethod) => {
                // Persist this ID so your backend can register the card and create order intents.
                console.log("Card saved:", paymentMethod.paymentMethodId);
            }}
        />
    );
}
```

> **Note:** Card data is collected directly by Crossmint and never passes through your servers. Store the returned paymentMethodId on your backend; it is the input for registering the card and creating order intents.

## Next Steps

* [Providers](/sdk-reference/agents/react/providers) — Configure providers and their options
* [Components](/sdk-reference/agents/react/components) — Drop-in UI components