> ## 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 checkout
## CrossmintEmbeddedCheckout
### Props
### Usage
```tsx theme={null}
import { CrossmintEmbeddedCheckout } from "@crossmint/client-sdk-react-ui";
function Checkout() {
return (
);
}
```
***
## CrossmintHostedCheckout
### Props
### Usage
```tsx theme={null}
import { CrossmintHostedCheckout } from "@crossmint/client-sdk-react-ui";
function BuyButton() {
return (
);
}
```
***
## CrossmintPaymentMethodManagement
### Props
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.
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.
### Usage
```tsx theme={null}
import { CrossmintPaymentMethodManagement } from "@crossmint/client-sdk-react-ui";
function PaymentMethods({ jwt }: { jwt: string }) {
return (
{
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.