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

# React Hooks

> Learn how to use React hooks to control and customize the Hosted Checkout UI

<Snippet file="react-hooks-setup-requirements.mdx" />

<Snippet file="react-hooks-reference.mdx" />

## Complete Example

Here's a full example showing how to implement a custom checkout experience:

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

function CheckoutPage() {
    return (
        <CrossmintProvider apiKey="YOUR_API_KEY">
            <CrossmintCheckoutProvider>
                <CrossmintHostedCheckout
                    lineItems={{
                        collectionLocator: "crossmint:your-collection-id",
                        callData: {
                            totalPrice: "0.001",
                            quantity: 1,
                        },
                    }}
                    payment={{
                        crypto: { enabled: true },
                        fiat: { enabled: true },
                    }}
                />
                <CheckoutStatus />
            </CrossmintCheckoutProvider>
        </CrossmintProvider>
    );
}

function CheckoutStatus() {
    const { order } = useCrossmintCheckout();

    if (!order) {
        return <div>Loading...</div>;
    }

    switch (order.phase) {
        case "completed":
            return <div>Purchase complete!</div>;
        case "delivery":
            return <div>Delivering your NFTs...</div>;
        case "payment":
            return <div>Processing payment...</div>;
        case "quote":
            return <div>Preparing your order...</div>;
    }
}
```

<Snippet file="react-hooks-best-practices.mdx" />

## Related Resources

* [UI Customization](/payments/pay-button/guides/ui-customization)
* [Payment Methods](/payments/pay-button/guides/payment-methods)
* [Order Lifecycle](/payments/headless/guides/order-lifecycle)
* [Testing Tips](/payments/advanced/testing-tips)