order-button

A no-backend cart and "send order on WhatsApp" button for any static site.

Customers pick from the menu, add their name and address, and tap send. WhatsApp opens with the whole order typed out, addressed to the shop's number. There is no server, no database, no account and no commission: the order is a chat message the customer sends to the shop themselves.

Try it in 10 seconds: download or clone this repo and open examples/index.html in a browser. It runs straight from disk. The shop in it is made up, and it only shows the message unless you type in your own number to send yourself a test order.

• One file, no dependencies. An ES module or a classic <script>, about 14 KB gzipped (minified). Optional CSS, about 3 KB gzipped.
• Works with any static site: plain HTML, Hugo, Jekyll, Eleventy, WordPress pages, Astro (a component is included). Give it a menu as JSON, or wire up the menu HTML you already have with data-ob-* attributes.
• Real menus: sizes (Half/Full, 500 g/1 kg), sold-out items, veg and non-veg marks, pickup or delivery, a minimum order and a delivery fee.
• After sending: a pay panel with the exact amount and the shop's UPI QR and UPI ID, a Pix key, or any payment link.
• A free Claude Code skill, /menu-from-photo, turns a photo of a menu into the JSON.
• Accessible: native <dialog>, labelled steppers, 44 px tap targets, field errors linked to their fields, cart changes announced to screen readers.

The message

This is what arrives on the shop's phone (from the example above):

New order #LLK-0811-4821
Lantern Lane Kitchen
----------------
2 x Chicken Dum Biryani (Half) = ₹298
1 x Double Ka Meetha = ₹89
----------------
Total: ₹387
Name: Ravi
Delivery: 12-3-45, Ameerpet
Note: less spicy
Payment: UPI to sampleshop@example

The order ID is a prefix (the shop's initials by default), the day and month in the shop's time zone, and 4 random digits. It helps the shop match a payment to an order.

Quick start (30 seconds)

1. Copy dist/order-button.iife.min.js and dist/order-button.min.css next to your page.
2. Paste this where the menu should go, with the shop's details:

<link rel="stylesheet" href="order-button.min.css">

<div data-ob-menu></div>

<script type="application/json" data-order-button>
{
  "shop": { "name": "Sample Tea Stall", "whatsapp": "919800000000" },
  "menu": {
    "categories": [
      {
        "id": "tea",
        "name": "Tea and snacks",
        "items": [
          { "id": "masala-chai", "name": "Masala chai", "price": 20 },
          { "id": "bun-maska", "name": "Bun maska", "price": 30 }
        ]
      }
    ]
  }
}
</script>

<script src="order-button.iife.min.js"></script>

3. Open the page. The menu appears, a "View order" bar shows up once something is in the cart, and the order goes to the number in whatsapp (digits only, country code first, no +).

While testing, add "ordering": { "previewOnly": true }: the message is shown on screen instead of opening WhatsApp.

Once this repo is public with a release tag, jsDelivr can serve the files too: https://cdn.jsdelivr.net/gh/counterkit/[email protected]/dist/order-button.iife.min.js (and .../dist/order-button.min.css).

The menu file

One JSON object. Only shop.name, shop.whatsapp and the menu are required. examples/menu.json is a full example, and order-button.schema.json gives your editor autocomplete (add "$schema": "./order-button.schema.json"). Keys starting with _, like _note, are ignored anywhere.

Field	Default	What it does
shop.name		Shop name, the second line of the message
shop.whatsapp		Number that receives orders: 919800000000
shop.currency	INR	ISO code: INR, BRL, AED, NGN, KES, USD...
shop.currencySymbol	from Intl	Sign to show, e.g. ₹, R$
shop.locale	en-IN	Number format: en-IN gives ₹1,23,456, pt-BR gives R$ 25,90
shop.timezone	visitor's	For the date in the order ID, e.g. Asia/Kolkata
ordering.modes	both	["pickup"], ["delivery"] or ["pickup", "delivery"]
ordering.minOrder	0	Minimum item total before the order can be sent
ordering.deliveryFee	0	Added to delivery orders and shown in the message
ordering.deliveryNote		Shown under the address field, e.g. "Delivery within 3 km"
ordering.orderPrefix	initials	LLK in LLK-0811-4821
ordering.previewOnly	false	Show the message on screen and never open WhatsApp
payment	{ "type": "none" }	See Payments
menu.categories[]		{ "id", "name", "items": [...] }
items[].id		Lowercase letters, digits and dashes; unique in the menu

Check a file before you use it. The checker explains each problem by field:

node .claude/skills/menu-from-photo/check-menu.mjs menu.json

menu.json: 2 errors. 4 categories, 15 items, 4 with sizes.
  error    shop.whatsapp: "09800012345" starts with 0. Start with the country code instead (India 91, Brazil 55, UAE 971).
  error    menu.categories[1].items[0].price ("Chicken 65"): must be a number, 0 or more, without a currency sign.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗