Skip to main content

​
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: "buyer@example.com",
  guestName: "Jane Doe",
});
If the customer is not logged in, the hosted checkout collects their email during the flow.

​
Next steps