shadcn.io is not affiliated with official shadcn/ui
Pay What You Want Checkout Block for Svelte
Name your price for an ebook: a range and an amount field that move together with a $5.00 minimum and a $20.00 suggestion, a histogram of what 318 earlier buyers paid with a line for yours, and the author's 80% share worked out.
Installation
Overview
Let people pick the price, and show them what picking means, with this pay-what-you-want checkout for Svelte with Ark UI. A compact header from Jaybird, an indie bookshop, says the minimum ($5.00), the suggestion ($20.00) and that the author receives 80% of whatever you pay. In a hairline frame with a plus mark on each corner, the first band holds the price twice: a dollar amount in an Input Group and a native range from $5.00 to $60.00, each moving the other, with a ghost button that returns to the suggestion and a line of words for where you are ("Close to the suggested price"). An amount under the minimum is refused in words with an icon, not clamped behind your back. The second band is a histogram of what 318 earlier buyers paid in eight bands, with a heavy line where your price falls and a sentence worked out from the bands ("About 62% of the 318 earlier buyers paid less"), labelled as sample data and repeated as a table for anyone who cannot see the bars. A small summary shows what the author receives and what you pay. Pay $20.00 is the only Shine Button. It's built from Input Group, Field, Button, Shine Button and Guides, with a CSS entrance only. For ebooks, music, indie software and anything sold at a price the buyer names.
FAQ
How is the share of earlier buyers worked out?
Each band has a count and two edges in cents. For a price, every band wholly below it counts in full, and the band it falls inside counts in proportion to how far through the band it is, rounded down; the sum over 318 gives the percentage. The result is rounded in the sentence ("About 62%"), and at the minimum or the top of the range the sentence changes to say so rather than print 0% or 100%.
Is the histogram real data?
No, and the panel says "sample data" next to the count. The eight counts are typed in the BANDS array. In your app build the bands from your orders (and keep the band edges coarse enough that no single buyer can be picked out), then the percentage, the marker and the table all follow.
What happens below the minimum?
The field shows "The minimum is $5.00." with an icon in its reserved line, the range holds at $5.00, the pay button reads just Pay, and pressing it says "Not paid. Fix the amount." in the status line and moves focus to the field. The button is never disabled, so the reason is always reachable.
Why a native range and an input?
The range gives a quick gesture and arrow-key control in one-dollar steps with a spoken value ("$25.00"), and the field gives exact amounts like 12.50. They share one piece of state, a text string, so neither can drift from the other. Amounts above the range are allowed up to $9,999.99; the range simply stays at its end.
How is the money handled?
The typed text is parsed into whole cents (digits, an optional point and at most two decimals), the author's share is the price times 80 over 100 rounded down, and usd is the only place cents become text. Nothing is rounded in floating point.
What stays local, and how do I wire it up?
Everything: Pay says "Paid in this demo. Nothing was charged." and nothing is sent. In your app, create the payment on your server for the validated amount (enforce the minimum there too), and use the response to show an error in the status line if it fails.