Storefront SDK
Client-safe SDK for storefront experiences.
Storefront Client
Uses a Public Storefront Token (or none — the brand is resolved from platform-id). Safe for browser use. catalog.* returns normalized StorefrontProduct models; delivery/payments/coupons/checkout power the buy-flow.
Storefront SDK
TypeScript
import { ThreeuStorefront } from "threeu-sdk/storefront";
const storefront = new ThreeuStorefront({
brand: "my-store",
publicToken: import.meta.env.VITE_THREEU_PUBLIC_KEY, // optional
currency: "QAR",
});
// Catalog (normalized models — translations, options, pricing)
const { items } = await storefront.catalog.list({ limit: 12 });
const product = await storefront.catalog.getBySlug("black-abaya");
// Buy-flow
const methods = await storefront.delivery.methods();
const fee = await storefront.delivery.quote({ method: "threeu-driver", lat, lng, subtotal });
const pays = await storefront.payments.methods();
const coupon = await storefront.coupons.validate({ code: "SAVE20", subtotal });
const order = await storefront.checkout({ items, shipping, paymentMethod: "cod", totalAmount, currency: "QAR" });React Hooks
From threeu-sdk/theme (or threeu-sdk/react). See the Storefront Themes → Commerce & Checkout and Headless pages for full examples.
| Hook | Purpose | |
|---|---|---|
useBrand() | Current brand info and settings | |
useBanners() | Owner-uploaded banner image URLs in display order | |
useProducts() | Normalized product listing (StorefrontProduct[]) | |
| `useProduct({ id \ | slug })` | Headless product controller — options, variant, quantity |
useCollections() | Collection listing | |
useCart() / useAddToCart() | Adapter-based cart state + mutations | |
useDeliveryMethods() / useDeliveryQuote() | Delivery methods + live location-based fee | |
usePaymentMethods() | Receive-side payment methods (COD + PG/BNPL) | |
useCoupon() | Validate a coupon (rejected = data, not a throw) | |
useCheckout() | Place the order (server-authoritative) | |
useBooking() | Book a service (booking order) | |
useAddress() | Capture { lat, lng, address } for <TAddress> | |
useTracker() | Fire commerce/SEO events + UTM to pixels + ThreeU | |
useLead() | Capture a storefront lead (public form) | |
useFaqs() / useBlogPost() | Brand FAQ / blog from the content engine | |
useLocale() / useCurrency() / useTheme() | Locale, currency, theme config |