How to Add Donations to a Webflow Client Project

Do the client Stripe setup before you build

Tempting as it is to wire up the form first, set up the money first. The donations go into the client's own Stripe account, created under the nonprofit's legal entity with their bank and tax details. Not your agency account, not a pooled platform balance.

Walk the client through creating Stripe (twenty minutes on a screen-share), help them apply for the nonprofit rate of 2.2% + 30¢ while you are in there, then connect your donation tool to their account. Getting this right up front means you never sit in the money path, the client owns payouts and refunds, and the donation does not break the day your engagement ends. It is the same first rule as any platform — Webflow does not change it.

The Embed element workflow

In Webflow, every donation form arrives through the Embed element. The flow is short.

1. Brand the form in your donation tool

Set the client's logo, colors, suggested amounts, recurring toggle, and copy in the tool's dashboard first, so the snippet you copy is already on-brand.

2. Copy the embed snippet

Most inline tools give you one line of HTML or a short script tag.

3. Drop an Embed element onto the page

In the Designer, open the Add panel, search Embed, drag it where the form should sit, and paste the snippet into the code box.

4. Preview, do not trust the canvas

Here is the Webflow gotcha that trips people up: the form does not render on the Designer canvas. You will see a placeholder. The real form only appears in Preview mode or on the published site. Do not assume it is broken because the canvas shows a box.

5. Publish and test on a real phone

Publish, open the live page on your phone, make a real $1 gift to the client's Stripe, confirm the receipt, then refund it. Most donors are on mobile, so test there first. The general mechanics are covered in how to add a donation form to Webflow if you want the non-agency walkthrough.

Keep the donor on your design, not someone else’s

This is the entire reason a Webflow agency project deserves better than a redirect. You spent days getting the typography, the spacing, and the motion right. Then a "donate" button that opens a third-party hosted page erases all of it the moment a donor clicks — they land somewhere generic, the trust you built evaporates, and conversion drops at the worst possible moment.

An inline embed renders the form directly in your Webflow section. The donor reads the client's story, sees the branded form right below it, and gives without ever feeling handed off. The form looks like a section you built, because effectively it is. If you only enforce one standard on Webflow donation work, make it this: the gift completes on your page. The conversion case is laid out in why sending donors off-site hurts conversion.

Make it a reusable component across pages

Nonprofits do not have one place to give. They have the homepage, a dedicated donate page, a year-end campaign page, maybe an event page. You do not want to paste a raw embed five times and update five copies when something changes.

Build the donation embed once and wrap it in a Webflow component (or a symbol on older projects). Drop the component anywhere you need a give moment. When the client wants to tweak the surrounding layout, you change the component once and it updates everywhere. Keep the actual embed snippet inside the component so the form configuration lives in one place.

For campaign pages with a goal thermometer, use the donation tool's own campaign page or goal-tracking feature rather than rebuilding a progress bar in Webflow by hand — you want the number to update from real donations, not from you editing a div every week.

Handing off in the Editor

Your client will not be in the Webflow Designer — they will be in the Editor (or the newer Webflow editing experience), which is the safer, content-only view. Plan the handoff around that.

• Donation config lives in the tool's dashboard, not Webflow. This is the nice part: the client changes suggested amounts, copy, and the thank-you message in the donation tool, never in Webflow. They cannot break the embed by editing content.
• Tell them what not to delete. One note: "Don't remove the donation embed block; everything about the form is edited in the [tool] dashboard, not here."
• Hand over the donation tool login in the client's name. They own the dashboard and the Stripe account.
• Record a short Loom showing the dashboard edits and where recent donations appear.

Because the form configuration lives outside Webflow, the Editor handoff is clean — the client edits content safely on one side and giving settings on the other, and neither one can break the other.

What to standardize on for Webflow nonprofit work

If you do this more than once, standardize. Default to a branded inline embed on the client's own Stripe, wrapped in a reusable component, configured in a dashboard the client can run from the Editor handoff. That gives you a Webflow donation setup that stays on-design, lives on the client's account, and does not turn into a support contract you did not sign up for.

A tool like KindLumen fits this shape — inline embed for Webflow, branded to the client's site, on their own Stripe, with recurring and receipts built in. The features page shows the embed and recurring side. For the version that walks through the client-Stripe and handoff details across any builder, see the agency guide to adding donation forms to client websites.