Donation Tiers Card Widget
Turn a support page into a clear ask: your cause, a short story, an optional raised-of-goal meter, up to six giving tiers that say what each amount pays for, an Other amount box and a One-off / Monthly switch. The Donate button sends supporters to your existing donation page, with the chosen amount filled in if your page accepts it.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<iframe src="https://a2z.tools/embed/w/donation-tiers-card" title="Donation Tiers Card by A2Z Tools" width="100%" height="780" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>
A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.
<div data-a2z-widget="donation-tiers-card" data-height="780"></div> <script async src="https://a2z.tools/embed.js"></script>
Adds a small script (what it does) that sizes the widget to fit its content, loads it lazily and keeps it isolated from your page's CSS.
Works with
How it works
Each tier is one line - amount | label | what it pays for - so 25 | Friend | A full food parcel becomes a selectable card. Amounts may carry a symbol or code (£25, 25.00 USD); grouping commas are accepted, negatives, zero, values above 10 million and the ambiguous 1,5 are refused, and duplicates are dropped. Selecting a tier, or typing an Other amount, rewrites the Donate link. If you name your page's amount parameter, for example amount, the link becomes https://your-site/donate?amount=25; 12.5 is written 12.50 and never grouped, an existing query string is kept, and a parameter of the same name is replaced rather than repeated. The name itself must be a plain token - letters, digits, _ . - and brackets - so amount&admin=1 is ignored. A Monthly switch appears only when you give a second page for recurring gifts. Raised and goal figures are drawn as a meter whose fill stops at 100 percent while the text keeps the real share, and are labelled as reported by the organiser.
Method
- Tier line: amount | label | description; amount = number after stripping a leading or trailing currency symbol or code; 0 < amount <= 10,000,000; at most 6 tiers
- Donate link = your https page + ?<parameter>=<amount> (WHATWG URLSearchParams); amount written as an integer or with exactly 2 decimals
- Parameter name must match ^[A-Za-z][A-Za-z0-9_.\-\[\]]{0,39}$ or no amount is appended
- Progress = raised / goal x 100; bar fill = min(100, progress)
Worked examples
Default sample, Friend tier
Inputs: No settings; supporter picks $25
Result: Donate $25 -> https://riverside-foodbank.example/donate?amount=25; meter $6,420 raised of $10,000 (64%)
6420 / 10000 = 64.2%, shown rounded; the generic food-bank sample appears until you set a title, tiers or page.
Other amount, monthly
Inputs: Monthly switch on; Other amount 12.5
Result: https://riverside-foodbank.example/donate/monthly?amount=12.50
The recurring page is used and a fractional amount always carries two decimals.
Unsafe parameter name
Inputs: url=https://give.example/roof; amountParam=amount&admin=1
Result: Donate -> https://give.example/roof (no amount appended)
The name is not a plain token, so nothing is added and the preview explains why.
Gift Aid, tax-deductibility and charity-status statements are the publisher's responsibility; the card shows only the wording you enter.
Limitations
- The card cannot confirm a payment, show a live total or thank a donor by name - those happen on your provider's page.
- Amount pre-filling works only if your donation provider reads an amount from the address; many do not.
- One currency per card, set in the builder; a donor paying in another currency sees your amounts converted only on your provider's checkout, if at all.
Where publishers use it
- A food bank or animal shelter appeal page that wants 10 / 25 / 50 tiers explained in plain words
- A podcaster or open-source maintainer asking for monthly support through Ko-fi, Patreon-style or Stripe Payment Links
- A school PTA or sports club raising money for one project with a visible goal
- A church or mosque giving page that links to an existing online giving provider
- An emergency appeal banner on a news or community site that sends readers to the charity's own checkout
Questions
Does this card take payments?
No. It is a link builder: the Donate button opens your own donation page in a new tab, and that provider (Stripe, PayPal, JustGiving, Donorbox, your CRM) takes the payment. The frame's security policy has form-action 'none' and allows network requests only to A2Z itself, so the card could not post card details anywhere even by mistake.
How do I make the chosen amount appear on my donation page?
Find the query parameter your page reads - many hosted forms accept something like ?amount=25 - and enter that name in Amount parameter. Test it once: open your page with ?amount=25 added by hand. If the box is not pre-filled, your provider does not support it; leave the field empty and the button will simply open the page.
Can I mention Gift Aid or say donations are tax-deductible?
Only you can, because only you know your status. Put your own wording in Tax note, for example your registered charity number and how donors add Gift Aid on your page. HMRC lets a UK charity claim 25p for every £1 only when the donor has made a Gift Aid declaration and paid enough tax; in the US, a single gift of $250 or more needs a written acknowledgment from the charity. The card adds no tax claim of its own.
Are the raised and goal figures live?
No. They are numbers you type in the builder, shown with the note Figures reported by the organiser. Update the embed code when your total changes, or leave both blank to hide the meter. For a stand-alone thermometer with a deadline, use the Goal Thermometer widget.
When does the Monthly switch appear?
Only when you give a second https page for recurring gifts. One-off uses your main page and Monthly uses the recurring page, each with the same amount parameter. Without a monthly page there is no switch, so supporters are never shown an option your provider cannot honour.
Why was my donation page address rejected?
The button accepts full https:// addresses only. A donation page that asks for payment details should never be served over plain http, and javascript:, data: or protocol-relative addresses are refused outright. The builder preview lists the reason under the card.
Sources
- Claiming Gift Aid as a charity or CASC - HMRC / GOV.UK . 25p per £1 donated, only with a Gift Aid declaration and when the donor has paid at least as much Income Tax or Capital Gains Tax. Checked 2026-10-01.
- Gift Aid: donating to charity - GOV.UK . Donors should sign a declaration only if they have paid enough tax to cover the reclaim. Checked 2026-10-01.
- Charitable contributions: written acknowledgments - IRS . A contribution of $250 or more must be substantiated by a written acknowledgment with the stated contents. Checked 2026-10-01.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Donation Tiers Card https://a2z.tools/embed/donation-tiers-card
<a href="https://a2z.tools/embed/donation-tiers-card">A2Z Tools Donation Tiers Card</a>
[A2Z Tools Donation Tiers Card](https://a2z.tools/embed/donation-tiers-card)
Donation Tiers Card by A2Z Tools - https://a2z.tools/embed/donation-tiers-card
Related widgets
-
Fundraising goal thermometer: amount raised, goal, percentage and days left, set in the builder.
-
Two to five plan cards with a monthly/yearly switch, saving %, highlighted plan and comparison mode.
-
Large Call, Text, Email, WhatsApp and custom-link tap targets in a stack, row or pill bar.
-
Up to 12 social profile links recognised by host name, as icons, labels or buttons.
-
A digital business card with call, email, website and directions buttons plus a .vcf contact download.
-
Staff profiles with photo or initials, role, short bio and an email or LinkedIn button, grouped by department.