Checkout - Colossal

Creating a checkout session

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

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:

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. Manage the cart before checkout
Cart concepts. Understand the cart lifecycle

⌘I