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

# Order Status

> Track order status with Hosted Checkout

Since Hosted Checkout opens in a separate window, you can't use `useCrossmintCheckout` to track order status. Instead, you have three options:

## 1. Using Callback Functions

```tsx theme={null}
<CrossmintHostedCheckout
    lineItems={{
        collectionLocator: "crossmint:_YOUR_COLLECTION_ID_",
        callData: {
            totalPrice: "0.001",
            quantity: 1,
        },
    }}
    appearance={{
        display: "new-tab", // or "overlay"
        overlay: {
            enabled: true,
        },
    }}
    onSuccess={(orderId) => {
        // Handle successful order
        console.log("Order completed:", orderId);
    }}
    onFailure={(error) => {
        // Handle failed order
        console.error("Order failed:", error);
    }}
/>
```

## 2. Using Event Listeners

```tsx theme={null}
useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
        if (event.data.type === "crossmint:checkout:completed") {
            console.log("Order completed:", event.data.orderId);
        }
    };

    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
}, []);
```

## 3. Using Order Status API

For real-time order status updates, you can use the [Order Status API](/payments/pay-button/guides/order-status) to check the status of an order programmatically.