> ## Documentation Index
> Fetch the complete documentation index at: https://docs.colossal.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout

> Create checkout sessions and redirect customers to the Colossal hosted checkout page for payment and order completion.

## Creating a checkout session

Create a session from the cart and redirect to the hosted checkout:

```tsx theme={null}
import { useCreateCheckoutSession } from "@colossal-sh/storefront-sdk";

function CheckoutButton({ cartUid }: { cartUid: string }) {
  const createSession = useCreateCheckoutSession();

  const handleCheckout = async () => {
    const result = await createSession.mutateAsync({
      cartUid,
    });

    if (result.success && result.data?.checkoutUrl) {
      window.location.href = result.data.checkoutUrl;
    }
  };

  return <button onClick={handleCheckout}>Checkout</button>;
}
```

The hosted checkout handles payment forms, address collection, order creation, and the confirmation page. After payment, the customer is redirected back to your store.

## Guest checkout

You can pass a guest email when creating the session:

```tsx theme={null}
const result = await createSession.mutateAsync({
  cartUid,
  guestEmail: "customer@example.com",
  guestName: "Jane Doe",
});
```

If the customer is not logged in, the hosted checkout collects their email during the flow.

## Next steps

* [Cart](/react-sdk/cart). Manage the cart before checkout
* [Cart concepts](/concepts/cart). Understand the cart lifecycle