Gift Voucher Composer
Pick an amount, write a line, and the voucher is on the table as you type — a perforated bond-paper ticket with the amount cropped by its own edge and a serial that never changes under you.
DOM + CSS0 deps1 file · 14 KB TSXreduced-motion aware
Props
"use client";
import { useId, useState } from "react";
/**
* GiftVoucherComposer — choose an amount, write a line, and the voucher is
* there on the table as you type.
*
* Cafés, salons and restaurants sell more vouchers than they think, and the
* buying page is usually a form with a picture of a gift card at the end. Here
* the voucher is the page: a bond-paper ticket with a perforated stub, the
* amount set enormous and cropped by the ticket's own edge, a serial in
* monospace, and the message in the buyer's own words. Every keystroke lands
* on the ticket.
*
* THE OBJECT IS TWO HALVES. A real voucher is a ticket cut in two: the stub
* (issuer, serial, fine print) and the part you redeem (amount, names,
* message). The perforation between them is drawn — a dashed rule with a
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this component
A café or salon sells more vouchers than it expects to, especially in December, and the buying page is nearly always a form with a picture of a gift card at the end of it. This composer makes the voucher the page. Beside a short form sits the ticket itself, on the table, and every keystroke lands on it: the names, the message in the buyer's own words in a serif, and the amount set enormous and cropped by the ticket's own edge. The object is two halves. A saturated stub carries the issuer, the serial and the fine print, and a drawn perforation with die-cut notches separates it from the half you redeem, which is what stops it reading as a rounded card with a shadow. The fields are hard-capped because the object has fixed proportions: sixty characters of message, three digits of amount. The serial is a pure hash of the recipient, the sender and the sum, so the server and the client always agree and it never changes under the buyer. Submitting hands the details to your checkout.
Curator’s note
The perforation is the whole object. Take it away and the voucher goes back to being a rounded rectangle with a gradient, which is what every gift-card page already has.
