Ticket Stub Pricing Block for React

Edit OFFER at the top of the file: its name, description, one-time price, regular (the regular price of the same pass), the ticket's serial and the run's total, and the call to action's cta and href. The struck price and the Save percentage are worked out from regular and price, so they stay right when you change either. FEATURES is the checklist.

Pass the count from your backend instead of the fixed serial: read it where the page renders and put it in OFFER.serial, so every visitor sees the current number. When it reaches total, swap the call to action for a sold-out note. Treat the number as a display only: your checkout must still check the stock, since two buyers can load the same number.

The Claim your ticket button is a real link to OFFER.href. It is a ShineButton with render set to an a element and nativeButton={false}. Point it at a checkout for a one-time price rather than a subscription, and have your payment webhook record the sale and move the ticket count on.

Each stub is masked: a radial-gradient mask removes a quarter circle from its two corners at the seam, and the two quarters meet as a half-circle notch. Because it's a cut and not a painted circle, the notches show whatever is behind the card, whether a plain page, a gradient or an image. Side by side the notches sit at the top and bottom of the perforation and follow it to the other side in right-to-left layouts; stacked on phones they move to the card's left and right edges, on a perforation that runs across.

The decoration is hidden: the barcode, the perforation and the check icons. The ticket number is read as "Ticket 47 of 500" instead of its stamped "No. 047 / 500", and the struck price is replaced by "Regular price $599" before the Save badge, so the old price isn't read as the current one. The pass name is an h3 under the section's h2, and the features are a list.

Use it for a single one-time purchase with a limited run: lifetime deals, founders' pricing, launch cohorts or event passes, where "pay once, own it" and scarcity are the pitch. For recurring plans or several tiers to compare, plain plan cards such as Minimal Single Pricing or a comparison table read better.