shadcn.io is not affiliated with official shadcn/ui
Donation Checkout Block for Svelte
A one-off gift to a wetland trust: preset or typed amounts with $5.00 steps, an optional cover-the-3%-fee checkbox, a dedication drawn as a card in real text, and a taxpayer uplift that shows what the trust receives.
Installation
Overview
Take a gift and be straight about where it goes, with this donation checkout for Svelte with Ark UI. A compact header from Moorhen, a wetland trust, says what the money looks after. In a hairline frame with a plus mark on each corner, the main cell has three bands. Amount: four preset pills ($10.00 to $100.00) as native radios, and an Input with minus and plus buttons in steps of $5.00; a Checkbox, off, adds the 3% card fee so the trust receives the whole gift. Dedication: In honour of, In memory of or None as pills, a name for the card and your name to sign it. Uplift: an unticked checkbox, "I am a taxpayer: add 25%", that reveals a postcode field and needs your name before it counts. The 18rem side cell draws the dedication card as real text ("In memory of Gran, From Sam") and a summary in whole cents: your gift, the fee, the uplift, what Moorhen receives (more than you pay when the uplift is on) and what you pay. Every row keeps its space, so nothing shifts. Donate $25.00 is the only Shine Button. It's built from Input, Checkbox, Field, Label, Button, Shine Button and Guides, with a CSS entrance only. For charities, fundraisers, open-source funds and one-off gifts.
FAQ
How are the figures worked out?
In whole cents. The fee is 3% of the gift, rounded; the uplift is 25% of the gift, rounded down, and only counts when the box is ticked and the name and postcode are present. You pay the gift, plus the fee if you cover it. The trust receives the gift, less the fee if you did not cover it, plus the uplift, so $25.00 with the fee covered and the uplift on is $31.25 received for $25.75 paid. sumsOf is the only place this is calculated and the summary, the checkbox hint and the button all read it.
Is the uplift a real tax claim?
No. It models a charity's claim on a taxpayer's gift (the figure and the wording are typed, 25%) so you can see the pattern: a declaration, a name and a postcode, and an honest summary of what the trust receives. Nothing is declared or stored here. In your app the declaration text must be the one your tax authority requires, saved with the gift.
Are any boxes pre-ticked or pushed?
No. The fee and the uplift both start off, the dedication is a plain choice with None, and there is no monthly switch, countdown or suggested amount marked as popular. The only default is a $25.00 gift you can change.
How does the dedication card work?
It is a figure whose content is text, not an image: the line (In honour of or In memory of), the name you type, and "From" and your name. Choosing None replaces it, in the same box, with a sentence saying no card is sent. The name field is kept in place and hidden when there is no dedication, so the form doesn't jump.
What happens when something is missing?
A press marks the first wrong field in reading order (amount, your name when the uplift is on, postcode), says so in the polite status line, shows the problem with an icon and words in the field's reserved line, and moves focus to it. The button is never disabled. Amounts must be $1.00 to $1,000.00.
What stays local, and how do I wire it up?
Everything: nothing is charged, no card is posted and no receipt is sent, and Donate says so. In your app send the gift, fee choice, dedication and declaration to your server, let your payment provider collect the card, and treat the figures here as a preview only.