02 / Donation widget

One script tag, and a charity can take donations

An embeddable donation form for non-profits. The organisation pastes one line into their site. Donors can give once or monthly, the form carries the organisation's branding, and Stripe handles the card. One 5.4 KB script serves every organisation.

Try it

There is a working demo you can donate through

The demo runs two organisations side by side and walks the whole flow through to a receipt. It is not deployed with this site: ask and we will show you.

The brief

Small organisations get quoted platform fees, a rebuild, or both, just to accept a donation. We wanted to see how small the thing could be if Stripe handled the payment and the widget only did the part the donor sees. It is a prototype. You can try it on the demo page.

What we built

01
One script tag names the organisation and the campaign. Everything else loads from the campaign record, so amounts can change without the host site editing anything
02
Rendered into a shadow root, so the host site's CSS cannot break the form and the form's styles cannot leak out. Tested against a page written to destroy it
03
Card details are entered on Stripe's own page. They never touch the host site or our servers, which keeps both parties out of PCI scope
04
The browser says what was given. The server decides what is charged. Currency and fees are worked out server side, so a tampered request cannot change the amount
05
A donation is only marked paid by Stripe's signed webhook, never by the donor landing on the thank-you page. That is just a redirect, and anyone can type the URL
06
Fee cover is a gross-up, not a surcharge. Adding the percentage on top still leaves the charity short, because the fee then applies to the larger total
07
Vanilla TypeScript, 5.4 KB gzipped. A React build would have started near forty, and a guest script that big gets removed by whoever maintains the host site

Screens

A test page whose stylesheet forces Comic Sans, wide letter spacing, uppercase text and magenta dotted borders on everything. The donation widget sits in the middle of it rendering normally, and a magenta dotted input below shows what the page does to elements it can reach. — The isolation test. Every rule on this page is written to wreck the widget. The input below it shows what the page does to anything it can reach. Inside the shadow root, nothing lands.

The donation form for the Digital Mohawk Community Fund: one-time and monthly buttons, four suggested amounts with twenty-five dollars selected, a custom amount field, email, name and message fields, a checkbox to cover the processing fees, and a Donate button. — The whole form. Suggested amounts, a custom field, one-time or monthly, and an optional fee cover that states what it adds before the donor commits.

The same form for a second organisation, Demo Animal Rescue, opened as a dialog. It is green rather than orange, has a different campaign name and blurb, and shows three suggested amounts instead of four. — A second organisation, same bundle. Different colour, name, copy and amounts, opened as a dialog rather than inline. Two changed attributes on the script tag.

Outcomes

A charity can be taking donations from one line of HTML, with no rebuild and no developer
The same bundle serves every organisation, each with its own branding, amounts and campaigns
One-time and monthly giving from a single flow, with no product catalogue to maintain behind it
Keyboard operable and screen-reader tested: real radio inputs, errors announced and focused, and a modal that traps focus and gives it back
Tested against a host page written to break it, and against a request from an origin not allowed to embed the campaign

Next project

A hotel in two buildings, and a guest who does not know which

Moss Hotel

Start a brief