shadcn.io is not affiliated with official shadcn/ui
Donation Checkout Storefront Block for Vue
A charity band for a shop page: a campaign bar with the total raised and your gift, preset amounts with an Other field, an impact line that follows the amount, a monthly switch that only explains and an Add to my bag button.
Installation
Overview
Raise money for a cause at checkout without leaving the shop, with this donation band for Vue with Ark UI. A header names the merchant and its partner charity. In a hairline frame with a plus mark on each corner, the first band tells the cause, shows the campaign as a bar (the typed total raised and goal, and in a darker segment the gift you are choosing, with the percentage worked out in cents) and the bag count. The second offers four preset amounts and Other as native radios, with an impact line that follows the amount, worked out from a typed price per tree. The third has a monthly Switch that says what monthly would mean and charges nothing. Add to my bag is the one Shine Button. Built from Input, Field, Switch, Shine Button and Guides. For shops with a cause partner or a round-up.
FAQ
How is the impact line worked out?
From TREE_CENTS, the typed price of one tree. The gift divided by it, rounded down, is the number of trees, and any remainder is said as going towards the next. Change the rate and the sentence follows.
How does the campaign bar work?
The raised total and the goal are typed in cents. The bar draws the raised share and, darker, the share of your chosen gift, and the sentence beside it gives the percentage with your gift. The bar is decorative; the numbers are in text.
What does the Other amount accept?
Whole dollars from 1 to 500. Anything else gets a written problem under the field and leaves Add inert, so the button never sends a bad amount.
Does monthly giving do anything?
No. It only says what the choice would mean, for example 25 dollars a month is 300 a year, and nothing is set up or charged. Use your payment provider's recurring donations for the real thing.
What stays local, and how do I wire it?
The bag count and the gift live in the page; pressing Add again changes the amount without counting twice. To wire it, add the donation as a line item with its amount and frequency, and let your payment provider and the charity's records be the source of the total.