Checkout holds

Use timer groups when a checkout screen has multiple independent holds: cart, seat, inventory, coupon, or payment authorization windows.

Checkout holds

0/3 holds active

paused

Cart hold00:30 left · idle

Seat A700:45 left · idle

Coupon lock01:00 left · idle

const timers = useTimerGroup({
  updateIntervalMs: 1000,
  items: holds.map(hold => ({
    id: hold.id,
    autoStart: true,
    endWhen: snapshot => snapshot.elapsedMilliseconds >= hold.durationMs,
    onEnd: () => releaseHold(hold.id),
  })),
});