> ## Documentation Index
> Fetch the complete documentation index at: https://quickbutik.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Quickstart
> A catalog, a cart and a hosted checkout in five minutes with @quickbutik/kit.
This page gets you from nothing to a shopper reaching the hosted checkout. Pick the tab that matches your stack. All three build the same thing: a product grid, a cart, and a checkout button.
In the Quickbutik admin, open **Custom storefront** and copy the shop's publishable key (`qb_pk_…`). It already carries every scope the kit needs. No shop yet? [Create one with a single request](/kit/create-a-shop). See [Publishable keys](/kit/publishable-keys) for alternatives.
The storefront only sees products with `visible: true`. If the catalog looks empty, this is usually why.
Pick your flavour below.
After payment, the hosted checkout sends the shopper to `/success/`. Only the **origin** of `successUrl` is used, and the path is ignored.
No npm, no bundler, no JavaScript of your own. Save this as `index.html`:
```html index.html theme={null}
Cart ()
Your cart is empty.
Total
```
The list above shows the catalog, but a grid card can't add to the cart on its own. Add items from a product page:
```html products.html theme={null}
```
The thank-you page (served at `/success/`) is one element:
```html success.html theme={null}
)
}
function CheckoutButton() {
const { cart } = useCart()
const { redirectToCheckout, starting } = useCheckout()
return (
)
}
```
On the thank-you route (`/success/[orderNumber]`):
```tsx theme={null}
"use client"
import { useOrderConfirmation } from "@quickbutik/kit/react"
export function ThankYou() {
const { status, orderNumber, loading } = useOrderConfirmation()
if (loading) return
Creating your order…
if (status === "completed") return
Thank you! Order #{orderNumber}
if (status === "failed") return
The payment did not go through.
return
Your order is still being processed.
// a timeout is NOT a failure
}
```
Continue with [React setup](/kit/react/setup), or go straight to the [Next.js App Router guide](/kit/react/nextjs).
```bash theme={null}
npm create vite@latest my-shop -- --template vanilla-ts
cd my-shop && npm install @quickbutik/kit
```
```ts src/main.ts theme={null}
import { createShopkitClient, formatMoney, pickProductImage, resolveProductImageUrl } from "@quickbutik/kit"
const kit = createShopkitClient({
publishableKey: import.meta.env.VITE_QUICKBUTIK_PUBLISHABLE_KEY,
})
const grid = document.querySelector("#grid")!
const { data } = await kit.products.list({ limit: 12 })
for (const product of data) {
const card = document.createElement("article")
const src = resolveProductImageUrl(pickProductImage(product), { width: 320, height: 320 })
if (src) card.append(Object.assign(new Image(320, 320), { src, alt: product.name ?? "" }))
card.append(product.name ?? "", " · ", product.price === null ? "" : formatMoney(product.price, "SEK"))
const add = document.createElement("button")
add.textContent = "Add to cart"
add.onclick = () => kit.cart.add({ productId: product.id, variantId: product.variants[0]?.id })
card.append(add)
grid.append(card)
}
document.querySelector("#checkout")!.addEventListener("click", async () => {
const { url } = await kit.checkout.start({
successUrl: `${location.origin}/success`,
backUrl: `${location.origin}/`,
})
location.assign(url) // a top-level navigation, never a fetch
})
```
`variants[0]` is only right for a product with a single variant. For anything with options, build a picker with the [variant matrix](/kit/vanilla/storefront#product-page).
Continue with [Vanilla JS setup](/kit/vanilla/setup).
## Try the loop
Add a product, open the cart and click checkout. You should land in the hosted Quickbutik checkout.
A shop that hasn't activated **Quickbutik Payments** runs the checkout in **demo mode**. The shopper walks the real checkout, but the payment step shows demo methods, no money moves and no order is created. That's expected while you build, and nothing in your code changes when payments go live. See [Going live](/kit/concepts/going-live).
A **cookie consent banner** appears on the page. That's on by default from kit 1.8.0: the kit asks the shopper, and only loads the shop's own GA4, GTM or Meta pixel (set in the Quickbutik admin) after they agree. Set `consent: false` in the config, or `data-consent="false"` on the script tag, to turn it off. See [Consent and analytics](/kit/concepts/consent-and-analytics).
## Rules worth knowing on day one
* **Money is in minor units.** `24900` is 249,00 kr. Use `formatMoney()`, or the formatted fields the elements expose.
* **Render `image.url`, never `image.path`.** `path` is a bare filename and 404s. ``, `` and `resolveProductImageUrl()` handle images for you.
* **`stock.stock === null` means "not tracked"**, so the product is purchasable. It doesn't mean sold out.
* **A confirmation `timeout` is not a payment failure.** Only `failed` is.
## Next steps
Sessions, the return leg and confirmation polling.
How the server and browser agree on one cart.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.