React SDK for Agents: Get Started | Crossmint Docs

Latest React SDK version -

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
`CrossmintCvcRecollection`	Ask the user to re-enter the CVC of a saved card once the vaulted CVC expires	Recollect the CVC

Installation

CrossmintCvcRecollection requires version 4.7.0 or later.

npm i @crossmint/client-sdk-react-ui

yarn add @crossmint/client-sdk-react-ui

pnpm add @crossmint/client-sdk-react-ui

bun add @crossmint/client-sdk-react-ui

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.

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 — Props and usage of the agent card components
Cards Quickstart — Get your agent paying with agent cards in 15 minutes