# Checkout in 15 minutes
In this tutorial you build a working Kustom Checkout in three steps: create a checkout order from your server, show the checkout on your page, and confirm the order once the customer has paid. Every step runs live as you read, against a test store we've set up for you.
Kustom Checkout is a hosted checkout you embed in your own site: your server sends a cart and gets back a block of HTML, and your page renders it. This tutorial builds that end to end, and the pane beside the text executes the same calls for real against a live Playground merchant, so you can see each step work before you write it. Everything here builds the embedded checkout; the others are under [Integration models](/checkout/#integration-models).
This page runs for real. Every call in the tutorial executes against a live
Playground merchant, in a workbench that follows the text.
Skip to the workbench ↓
## What you'll build
Three steps: create the order on your server, render the snippet it returns on your
checkout page and handle the completed order on your confirmation page. A fourth section
covers the customer who changes their cart while the checkout is still open — the case
every integration has to handle.
## Before you start
**Most readers should not write this code.** Kustom ships maintained plugins for roughly thirty e-commerce platforms — WooCommerce,
Magento, Litium, Centra, PrestaShop and more — and on those, installing the plugin *is* the
integration. [Find your platform](/partners/). Carry on here if none covers it, or you need
behavior a plugin doesn't expose. Want the whole picture before you start?
[All of Checkout](/checkout/).
To run the pane on this page: nothing. The Playground session in the strip above is yours
for two hours and these docs hold its credentials, so you never see or paste a secret.
To run the code on your own machine: a server you can make an outbound HTTPS request
from, in whatever language you already use, your own Playground credentials from
[Authentication & environments](/api/authentication/) and a public URL. Kustom calls back
to the URLs you register, so `localhost` alone won't receive them — put a tunnel in
front of it (`ngrok`, `cloudflared`) and use that hostname.
## Create the order
An order is your cart plus the URLs Kustom should call back. Amounts are in minor units, so
`25000` is 250.00 SEK, and the line totals must add up to `order_amount` exactly — Kustom
rejects a mismatch rather than correcting it.
```json title="the order" wrap
{
"purchase_country": "SE",
"purchase_currency": "SEK",
"locale": "en-SE",
"order_amount": 25000,
"order_tax_amount": 5000,
"order_lines": [
{
"type": "physical",
"reference": "tshirt-001",
"name": "Cotton T-Shirt",
"quantity": 1,
"unit_price": 25000,
"tax_rate": 2500,
"total_amount": 25000,
"total_tax_amount": 5000
}
],
"merchant_urls": {
"terms": "https://your-shop.example/terms",
"checkout": "https://your-shop.example/checkout",
"confirmation": "https://your-shop.example/confirmation?order_id={checkout.order.id}",
"push": "https://your-shop.example/push?order_id={checkout.order.id}"
}
}
```
Four `merchant_urls` are required: `terms`, `checkout`, `confirmation` and `push`. Kustom
substitutes `{checkout.order.id}` into any of them before calling, and `push` should be its
own path rather than your checkout or confirmation page — it fires server-to-server even
when the browser never comes back. [What to send](/checkout/integrate/the-order/)
documents every field, and [Merchant URLs explained](/checkout/integrate/merchant-urls/)
covers the optional ones.
Send it from your server. This call carries your secret, so it can never come from the
browser — the browser asks *your* backend, your backend calls Kustom with HTTP Basic auth
and the only thing that goes back is the `html_snippet`. Every integration that leaks a
merchant secret does it by calling Kustom from the front end to save a hop. There is no
browser-safe key.
```js title="server.js" wrap
// On your server, never in the browser: this needs your secret.
const auth = 'Basic ' + Buffer.from(`${id}:${secret}`).toString('base64');
const KUSTOM = 'https://api.playground.kustom.co';
const res = await fetch(`${KUSTOM}/checkout/v3/orders`, {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: auth },
body: JSON.stringify(order),
});
const { order_id, html_snippet } = await res.json();
// Store order_id. Every later read and update of this order is keyed on it.
const orderUrl = (order_id) => `${KUSTOM}/checkout/v3/orders/${order_id}`;
```
Two things come back that the rest of the integration depends on. The `html_snippet` is what
your checkout page renders. The **`order_id`** is what every later read and update of this
order is keyed on — store it on the cart and build the order's URL from it,
`{base URL}/checkout/v3/orders/{order_id}`. The `201` also carries a `Location` header, but
it's that same URL, so there's nothing in it you need.
The pane has the same request. Switch the market, send it and watch what comes back.
## Render the snippet
The `html_snippet` is a `` plus a `