We're holding your seats for 10:00
``` ```js server.js // Choosing seats on the seat plan holds them for 10 minutes. app.post('/holds', async (req, res) => { const hold = await seats.hold(req.body.seats, { minutes: 10 }); res.json({ id: hold.id, expires: hold.expires }); }); app.post('/orders', async (req, res) => { const hold = await seats.findHold(req.body.hold); if (!hold || hold.expires < Date.now()) return res.redirect('/seats?expired=1'); const order = await seats.confirm(hold, (total) => payments.charge(req.body.card, total)); res.redirect(`/orders/${order.id}`); }); ``` ```js // Count down every second, and go back to the seat plan at zero. const clock = document.getElementById('hold-time'); const end = Date.parse(document.getElementById('hold').dataset.expires); const timer = setInterval(() => { const left = Math.max(0, end - Date.now()); clock.textContent = `${Math.floor(left / 60000)}:${String(Math.floor(left / 1000) % 60).padStart(2, '0')}`; if (left === 0) { clearInterval(timer); location.href = '/seats?expired=1'; } }, 1000); ``` - The seats are held for 10 minutes from the moment they are chosen, however long the form takes. - At zero, the page goes back to the seat plan and the seats go back on sale. - Everything typed into the form is lost with the page. ## After: seats reserved when people pay ```htmlYour seats are booked when you pay.
``` ```js server.js // Nothing is held while people fill in the form. app.post('/orders', async (req, res) => { // The seats are checked and taken only now, in the same step as the payment. const order = await seats.bookIfFree(req.body.seats.split(','), (total) => payments.charge(req.body.card, total)); if (!order) { // Gone while they typed: no payment, and the nearest free seats offered instead. return res.status(409).json({ nearest: await seats.nearestFree(req.body.seats.split(',')) }); } res.json({ receipt: `/orders/${order.id}` }); }); ``` ```js // Send the form without leaving the page, so nothing typed can be lost. const form = document.querySelector('form'); const gone = document.getElementById('seats-gone'); form.addEventListener('submit', async (event) => { event.preventDefault(); const response = await fetch(form.action, { method: 'POST', body: new URLSearchParams(new FormData(form)) }); const result = await response.json(); if (response.ok) { location.href = result.receipt; return; } // Gone while they typed: offer the nearest free seats, or say that none are left. if (result.nearest) { form.elements.seats.value = result.nearest.seats; gone.textContent = `Your seats were booked by someone else while you were filling this in. ${result.nearest.label} are free: press Pay to book them instead. Nothing else has changed.`; } else { gone.textContent = 'Your seats were booked by someone else while you were filling this in, and no seats are left. No payment was taken.'; } gone.hidden = false; gone.focus(); }); ``` 1. Delete the hold, its expiry and the countdown. Choosing seats now only fills in the form's `seats` field, so nothing on the page or the server runs out. 2. Check and reserve the seats in the same request that takes the payment, so the only moment that matters is the moment people press Pay. 3. Send the form with `fetch()` and stay on the page. If the seats have gone, no payment is taken and every field still holds what was typed. 4. Write what happened beside the Pay button, with the nearest free seats, and move focus to it, so people hear it, see it and only have to press Pay again. This fixes the Before and passes 2.2.3: no step of the checkout depends on time. The seats can still be sold to someone else while people type, and the message is how the checkout says so without costing them the form. ## Implementation decisions **A sale that sells out in minutes.** Without a hold, seats can go while someone types, and the slowest typist is the likeliest to find them gone. 2.2.3 takes the clock away, not the competition. For a sale that busy, W3C's own 2.2.1 example keeps a short hold and treats it as essential, which passes Level A and not 2.2.3. A sale that wants to pass AAA can take requests over days and allocate the seats afterwards, a ballot, so that nobody's place depends on how fast they type. W3C's technique G5 gives the same answer for an auction: one bid each, instead of bids raced against each other. W3C does not recommend requiring AAA for a whole site, because some content can't meet every AAA criterion; this is where a ticketing site may decide not to. **Shop baskets.** A countdown on an ordinary shop's basket is a time limit too, whether or not it really holds the stock, and the plugins that add it present it as a way to create urgency and cut abandoned baskets. Delete it, and check the stock in the payment request, as the fix does for seats. **Card fields.** A card typed into a payment provider's frame stays in that frame while the page stays open, so sending the form with `fetch()` keeps it as well. A form that posts and renders a new page can put back the name and the access requirements, but not the card number, which a site should never write back into a page. **The message.** Write it in short sentences that say what went, what is offered and what to do, beside the button people pressed. If nothing is left, say that instead, and still take no payment. Moving focus to it reads it out and brings it into a magnifier's view; how form results are announced in general is the topic of [form success and error messages that are never announced](/learn/form-results). **Not a fix.** A "Need more time?" button that extends the hold passes 2.2.1, which has its own guide, [session timeouts with no warning or way to extend](/learn/time-limits), but people still have to finish inside a limit, so 2.2.3 still fails. So does moving the details and the card ahead of the seat plan, as W3C's 2.2.1 example suggests: the timed part gets shorter, but the seat choice and the Pay button are still inside it. A longer timer, such as 30 minutes instead of 10, is still a timer. ## Verify the fix 1. Read the checkout's scripts and the server's reservation code: no timer, scheduled job or expiry releases seats, empties the form or leaves the page, and nothing reserves seats before the payment request. 2. Choose seats, fill in half the form and leave it alone for an hour: nothing has changed, and no countdown or time left is shown. 3. Finish the form and pay: the seats are booked in that step, and the receipt names them. 4. In a test build, book the same seats from another browser, then press Pay in the first one: no payment is taken, every field still holds what was typed, and the message names the seats offered instead, with focus on it. 5. With a screen reader, fill in the checkout slowly and repeat step 4: nothing interrupts while you type, and the message is read out when it appears. Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat after the reservation code or the checkout changes. ## Limits This covers a checkout that holds seats or stock on a timer, the common form of 2.2.3 on shops and booking sites. A quiz or a test with a timer is the other: W3C's answer there is to score it without a time limit, calibrated on how people do when nobody is timed. A session that signs people out, and a warning that lets them extend it, are 2.2.1: [session timeouts with no warning or way to extend](/learn/time-limits). Live events, such as an auction with people bidding at the same time, and video or audio that only plays, are outside 2.2.3. Whether a ticket sale can go without a hold is for the people who run it to decide, with what they know about how fast it sells. --- Get this guide in your coding agent: MCP https://easeweb.dev/mcp (setup at https://easeweb.dev/services/developers)