Adding the button is the easy part. Most organizations get that done in twenty minutes and then wonder why donations don't move.
Here's how to add one, and then the part that actually matters.
The short answer
Pick a processor. Generate a button or a link. Put it in your navigation and on your donation page.
Every processor gives you one of two things: an HTML snippet to embed, or a hosted link that sends people to their page.
Take the link. Embeds put a third-party iframe in your page, and iframes are where accessibility problems and privacy obligations enter. A hosted link is simpler, more reliable, and works the same on every platform.
PayPal
In your PayPal account, go to Tools, then PayPal Buttons, and create a Donate button. You'll get HTML and a shareable link.
Use the link. Style a normal button on your site and point it there.
If you do embed the HTML, the iframe needs a title attribute or it's a WCAG failure, and PayPal's markup won't add one for you.
Stripe
Stripe Payment Links, created from the dashboard. No code. Point a button at the link.
Stripe is generally the better experience for donors and the better fee structure for regular giving. It's more setup than PayPal and worth it if donations matter to you.
Square
Square has a donation checkout link. Same pattern: create the link, point a button at it.
On specific platforms
Webflow: add a Link Block or Button, point it at your hosted donation link. Don't use an Embed unless you have to.
WordPress: a plain button block with the link works. You don't need a plugin for this. Plugins are for when you need forms, tributes, or CRM sync.
Squarespace and Wix: both have native donation blocks. They're fine and they're limited. Check them against a keyboard before you trust them.
The accessibility part people skip
Your donate button has to be a real <a> or <button> element. Not a styled div with a click handler.
If it's a div, keyboard users can't tab to it and screen reader users don't know it exists. This is the single most common way a donation path breaks for disabled donors, and it's completely invisible unless someone tests it.
Also:
- The button needs a visible focus state
- "Donate" is a fine accessible name. An icon with no text is not
- If the button opens a new tab, say so
- Test the entire donation flow with a keyboard, end to end, and complete a real donation
Most organizations have never done that last one. It's twenty minutes and it's usually where the problem is.
What belongs on the donation page
A specific ask. Not "support our work." What does the money do?
Suggested amounts tied to outcomes. "$50 covers X" outperforms an empty field. Three or four options, plus other.
A recurring option, defaulted thoughtfully. Monthly donors are worth several times a one-time donor over their lifetime. Ask for it.
The fewest fields you can survive with. This is the biggest lever on the page. Every optional field costs completions. Do you need their phone number? Their title? Their mailing address, if you're emailing the receipt?
Trust signals. Charity registration number, a note about where the money goes, a security indicator. Donors are deciding whether you're real.
A receipt promise. Say when it arrives and what it covers.
Where to put the button
Main navigation, styled to stand out from the other links. Repeat it at the end of any page making an emotional case.
Not buried in the footer. Not in a modal that interrupts someone reading.
What actually moves the number
In order:
- Removing form fields
- Making the ask specific
- Asking for monthly
- Making the mobile flow work properly
- The button colour
That last one is where most of the debate happens and it's the least important thing on the list.
Pragmatica has built websites for Canadian non-profits and charities since 2004. If your donation path isn't working, get in touch.
