Simple Donate
/AerilymSimple Donate, the simple way to accept donations and sponsorships. Self-hosted and open source.
Accepting money
A few people had reached out to me about sending me money or sponsoring me for some of my open source projects, I thought, why the hell not, that should be easy to set up.
The first step was to enable GitHub's Sponsors feature, this was pretty painless, but knowing GitHub, the pain will come later, at some future point when the VP of Buzzword Quantum AI Soup decides to turn Sponsors into a profit monkey to feed the Microsoft money furnace (If it wasn't obvious I'm pretty pessimistic on the future of GitHub). So what else could I do?
Use a service like Patreon with built in tier support? nah...
Use a service like Ko-fi to accept direct payments? nah...
Build it myself? Yep that should be easy!
Ok in fairness there were some real reasons.
- I've used stripe a lot in the past and wanted to get up to speed with it again.
- I like being in control of my own stuff, I could use service A, B, or C, or I could use what they use (a payment processor like Stripe) and just cut out the middleman.
- I built the STF Donate and Session Donate pages, and wanted to investigate leveraging Stripe Checkout for those but it wasn't worth the time investment at the time.
- I like making things, and this was a thing.
At least this way if/when a bunch of these services change, end, or self-implode, I don't have to deal with it and my Stripe integration will still work. (Ok of course I know Stripe could also break Stripe Checkout at any point, but I feel like they're more stable and developer friendly than most of these services.)
The Process
I dived straight into the Stripe Checkout docs and integrated their example into my basic Next.js template I'd already set up with some crypto donation addresses and bits of info, ported over from the other open source donation pages I've done.
A few lines of code here, a couple of errors there, then bam, a simple donate-whatever-amount-you-want checkout flow, embedded right into the page.
Now I could have stopped here, but that's when I had my "lightbulb" moment, what if I could have recurring payments so I could have a way to do sponsorships. This first bit was pretty simple, the guides were pretty great to be honest, I probably spent about an hour settings things up with Stripe to get single one time payments working.
So I added some more options in the stripe dashboard for different sponsor tiers and added a way to switch between them, then bam, I clicked a button to change to a different product (sponsor vs donate):
⚠️ Unsupported prop change on EmbeddedCheckoutProvider: You cannot change fetchClientSecret after setting it. Unmount and create a new instance of EmbeddedCheckoutProvider instead.
This second bit took a little longer than I expected, but hey, it was fun.
I tried all sorts of fancy tricks to remount the component without stooping to using some mega jank useEffect slop. Turns out the solution was incredibly simple, just add a dynamic key to the EmbeddedCheckoutProvider.
Add a dynamic key to the EmbeddedCheckoutProvider https://github.com/Aerilym/simple-donate/blob/main/components/stripe/checkout.tsx
Last up I thought it would be nice to have a way to do annual and monthly billing. I wanted to charge less for annual billing as less processing fees were involved. Stripe Checkout uses Price Ids for each product price, so every different price is a different thing you can add to the order, so I threw a switch in there and polished the UI up a little with some theming to match Stripe's UI, plus proper support for mobile screen sizes.
Last of all I added a bunch of environment variables people could use to customise the features and text displayed all over the page, including the ability to disable crypto donations, stripe donations, and stripe sponsorships. You could actually disable everything, but then you'd just have a site with a tiny bit of intro text at the top.
Remembering I hate light mode with the passion of 1000 suns I finished things off by adding a dark mode toggle with system preferences for the more distinguished visitors.
You can see the end result on my donate page, and if you happen to slip and fall and hit the subscribe button, maybe that wouldn't be so bad.
As always, the source code is available.
Use it yourself
If you want a nice little self-hosted and self-run donation and/or sponsorship page, check out Simple Donate. You can turn any of it off and make whatever changes you like.