Skip to main content
Since Hosted Checkout opens in a separate window, you can’t use useCrossmintCheckout to track order status. Instead, you have four options:

​
1. Using Callback Functions

<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

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 Callback URLs

<CrossmintHostedCheckout
    lineItems={{
        collectionLocator: "crossmint:_YOUR_COLLECTION_ID_",
        callData: {
            totalPrice: "0.001",
            quantity: 1,
        },
    }}
    appearance={{
        display: "new-tab",
    }}
    successUrl="https://your-site.com/success"
    cancelUrl="https://your-site.com/cancel"
/>

​
4. Using Order Status API

For real-time order status updates, you can use the Order Status API to check the status of an order programmatically.
⌘I