By the end of this guide you'll know what a product is, how to create one, how to put a Checkout button on your website, and what happens afterwards — orders, confirmation emails, refunds, and the choice you get over vouchers when you refund. For everything voucher-specific (handing out codes yourself, expiry, redemption), see Vouchers.
What you'll need
- Access to edit the website where the Checkout button will live.
- A payment gateway set up in Settings → Payments — you can build the product first; the checkout only goes live once a gateway is connected.
- About 10 minutes.
- One product set up with a price and currency
- A Checkout button live on your website
- Your first test order in your admin, with confirmation emails sent to you and the guest
What's a product?
A product is something you sell for a set price in one currency. Each Checkout button sells one product, and the guest picks how many they want. They pay online through your payment gateway, the order lands in your admin, and both you and the guest get an email.
There are two product types today:
- Product — a physical or digital item. A normal one-off sale.
- Voucher — creates a gift code for each one bought (like
SUNNY-RDX9-RPMS). See Vouchers for everything voucher-specific.
And two ways to price a product:
- Single price — one price per item. The guest picks a quantity and the total is price × quantity. Use this for a flat-rate item (a 1 800 CZK bottle, a 500 CZK voucher).
- Options — several lines, each with its own name, optional description, and price. The guest picks a quantity per line (e.g. Adult — 1 000 CZK ×2, Child — 500 CZK ×1) and the total adds up. Use this for tiers or variants — or for a voucher product that sells several values from one button.
Step 1: Create your first product
Sidebar → Products → click the + at the top of the rail. The new-product form opens:
| Field | What it does |
|---|---|
| Name | Shows on the Checkout button, in your order list, and in confirmation emails. |
| Type | Product (a physical or digital item) or Voucher (a gift code — see Vouchers). |
| Country / Currency | Pick a country and the currency fills in. It must match what your payment gateway supports. |
| Pricing mode | Single price (one price per item) or Options (several lines, each with its own name, description, and price). See "What's a product?" above. |
| Price (single price) | The price per item (e.g. 1890 for 1 890 CZK). |
| Options (options mode) | Add at least one line. Name and description are optional; price is required, and at least one option must be above 0. |
| Voucher settings (vouchers only) | A code prefix (1–8 letters/digits, optional) and Validity (days) (empty = never expires). |
Click Save. You land on the product's detail page, with sections for the basics, payments, quantity limits, notifications, and (for vouchers) code settings.
Payments have their own section. If you haven't connected a gateway yet, a note links you to Settings → Payments — the public checkout won't go live until one is set, but you can finish the rest of the product first.
Step 2: Set up a Checkout button
A product on its own is just a listing — guests buy it through a Checkout button. On the product's detail page, open Checkouts and click Add checkout.
The checkout page has three sections — Identity, Appearance, and Embedding:
| Setting | What it does |
|---|---|
| Name | A label just for you, so you can tell several buttons apart. |
| Language | Sets this button's language, overriding the product's default. |
| Button label | The text on the button (e.g. Order now, Buy a voucher). |
| Primary color | The button and dialog accent colour. |
| Mode | Light or dark dialog. |
| Background | White / black / transparent — to match the page around it. |
| Size | Small / medium / large button. |
| Embed type | How the button appears on your site: Button (a ready-styled button you paste into your page), Script (we draw the button for you), or Iframe (drop our checkout page straight in). Saved per button; the Checkouts list shows which each one uses. |
| Custom dialog fields | Add fields to ask for a delivery address, gift message, or anything else — the same fields editor used for booking forms. |
Quantity limits (lowest, default, highest) are set on the product, not the button — one set applies to every Checkout button for that product.
Save the checkout. The Embedding section then shows your embed code (see the next step) and a View public preview link that opens the live checkout in a new tab.
Step 3: Put the button on your website
Pick an Embed type in the checkout's Embedding section. The snippet on the right updates to match — copy it and paste it into your site's HTML where you want the button.
Button (recommended) — A ready-styled button with your appearance settings baked in. Paste it in and tweak the look if you like. Best if you want full control over the design.
<button data-cabintale-checkout="..." style="…">Order now</button>
<script src="https://admin.cabintale.com/widget-embed.js" async></script>Script (advanced) — We draw the button for you. No styling work, but you can't restyle the button yourself.
<cabintale-root data-checkout="..."></cabintale-root>
<script src="https://admin.cabintale.com/widget-embed.js" async></script>Iframe (simple) — Drop the checkout page straight into your site. Add the companion script alongside it so the dialog can still open full-screen.
<iframe src="https://admin.cabintale.com/checkout/..." style="border:none; width:100%; min-height:80px"></iframe>
<script src="https://admin.cabintale.com/widget-dialog.js" async></script>Step 4: What the guest sees when they buy
When a guest clicks the button, a 4-step dialog opens:
- Quantity
- Single-price products: one stepper, within the limits you set. The total updates as they go.
- Options products: one stepper per line. The total adds up across lines, and at least one line must be above 0 to continue.
- Details — whatever fields you added (email, delivery address, gift message). Required fields are checked before they can move on.
- Review — the order summary with a per-line breakdown (for options) and the grand total.
- Pay — the payment page, in the button's language. Once they pay, they're brought back and the dialog confirms with Order received.
For voucher products, the success step lists the gift code(s). The codes also go out in the guest's email — see the next step.
Step 5: Receiving orders
Orders land in Products → {product} → Orders, marked Paid. The Orders list looks just like Bookings — name, price, date, reference, and a status pill — so switching between the two feels familiar.
- The order detail shows the quantity, total, payment status, guest details, and every field the guest filled in.
- The Payments section lists each payment attempt. A refund icon appears on successful ones.
- The Issued vouchers panel (voucher orders only) lists every code, with its status, expiry, and a cancel button per row.
- You get a new-order email — a heads-up that money came in.
- The guest gets a confirmation email — a receipt with the product name, the line items (for options orders), the total, the fields they filled in, and (for vouchers) the codes shown as chips with code, value, and expiry.
Step 6: Send a payment link by hand
If a guest's payment failed, or they'd rather pay over chat, email, or the phone, you can send them a link straight from the order:
- Open the order's Payments section.
- Click Send payment link. cabintale copies a payment link to your clipboard.
- Paste it to the guest. They open it and pay.
- Once they pay, the order flips to Paid and the confirmation emails go out as usual.
The button only appears if the product has a payment gateway and the order isn't already fully paid.
Step 7: Refunds — and what happens to vouchers
Refunds work just like they do for bookings. From the order's Payments section:
- Click the refund button on a successful payment.
- Enter the amount (full or partial) and click Initiate.
- cabintale emails a 6-digit code to your admin email — type it into the dialog to confirm.
- Your payment gateway processes the refund, and it appears as a negative line in Payments.
If the order has paid vouchers on it, cabintale then asks what to do with them: Cancel all vouchers or Keep vouchers.
- Cancel all — every voucher on the order stops working; the holder can't redeem it.
- Keep — the vouchers stay valid; only the order's payment changes.
You get the same choice when you cancel the order (set its status to Cancelled and save) or delete it.
See Vouchers for voucher-specific cancelling and redemption.
Handing out vouchers yourself
For voucher products, you can issue codes without taking an online payment — gift codes, in-person sales, comps. See Vouchers → "Hand out vouchers yourself".
Limitations (for now)
- One product per button. There's no shopping cart yet — one button sells one product (its options still count as a single order). Multi-product catalogs are planned.
- No stock tracking. Sold out is a manual switch — flip Available in the product header to hide the button.
- No product images yet — coming with shared media storage.
- Online payment only. Products don't have a request-to-book mode.
Related guides
- Set up your payment gateway — Payment gateways
- Vouchers (issue, hand out, expiry, redemption) — Vouchers
- Refunds and cancellations (same flow as orders) — Refunds and cancellations
- Custom booking form (the same editor used for Checkout fields) — Custom booking form
- Email notifications — Email notifications