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

# Hooks & Events

> React to order updates and build custom checkout UI with React hooks and events

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

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

## Complete Example

A custom checkout experience that renders your own status UI next to the embedded component:

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

function CheckoutPage() {
    return (
        <CrossmintProvider apiKey="<your-client-api-key>">
            <CrossmintCheckoutProvider>
                <div className="checkout-container">
                    <CrossmintEmbeddedCheckout
                        lineItems={{
                            collectionLocator: "crossmint:_YOUR_COLLECTION_ID_",
                            callData: {
                                totalPrice: "0.001",
                                quantity: 1,
                            },
                        }}
                        payment={{
                            crypto: { enabled: true },
                            fiat: { enabled: true },
                        }}
                    />
                    <CheckoutStatus />
                </div>
            </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 items...</div>;
        case "payment":
            return <div>Processing payment...</div>;
        case "quote":
            return <div>Preparing your order...</div>;
    }
}
```

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

## Next Steps

> [card] [Track Orders](https://docs.crossmint.com/payments/guides/track-orders.md)
>
> Poll order status or receive webhook events

> [card] [Handle Errors](https://docs.crossmint.com/payments/guides/handle-errors.md)
>
> Surface payment and delivery failures to buyers