How to Embed a Stripe Donation Form in Plain HTML

The two honest paths

Before any code, get the fork in the road clear in your head, because the rest of your decisions follow from it.

• Build it yourself. You use Stripe.js on the front end and a small backend to create a Checkout Session or a Payment Intent. You own the form, the validation, the success and cancel handling, and the webhook that confirms the payment. Maximum control. Real work.
• Paste a hosted embed. You drop a snippet from a donation tool (or a Stripe Payment Link / pricing-table embed) into your HTML. No backend, no webhook, no maintenance. Less control over the exact flow.

Neither is "the right answer." A developer who wants a fully custom donor experience and does not mind owning a server picks the first. Someone who wants donations live by lunch picks the second. Most people overestimate how much they need the first one.

Why not just a bare Stripe Payment Link?

The simplest possible Stripe option is a Payment Link or Checkout: you create it in the Stripe Dashboard and link a button to it. It is the cheapest in fees and it works. But understand what you give up.

A raw Payment Link sends the donor to Stripe's hosted checkout. There is no branded form on your page, no row of suggested amounts, no custom-amount nudge, and no donor records beyond what Stripe stores, unless you build all of that yourself. For a developer that may be fine. For a nonprofit that wants a designed giving moment, it is bare. Stripe's standard rate is 2.9% + 30 cents, and registered nonprofits can apply through Stripe.org for a discounted 2.2% + 30 cents. More on that in how to accept donations with Stripe.

The DIY path: a minimal sketch

If you want the custom route, here is the shape of it. The front end loads Stripe.js and hands off to a backend endpoint that creates a Checkout Session. This is a sketch to show the moving parts, not a copy-paste production app.

The pieces, in order:

1. Include the Stripe.js library via its script tag in your HTML head.
2. On your donate button click, call your own backend endpoint, for example a route named create-checkout-session, passing the chosen amount.
3. Your backend (Node, Python, a serverless function, whatever you run) uses your secret key to create a Checkout Session in donation mode, with the amount and a success and cancel URL.
4. The backend returns the session URL or id, and your front-end script redirects the donor to Stripe to pay.
5. You set up a webhook endpoint that listens for the checkout.session.completed event so you can record the gift, send your own receipt, or update a total. Without the webhook you will not reliably know a payment succeeded.

That is the honest minimum: a front-end script, a backend endpoint, a secret key kept off the client, and a webhook. None of it is exotic, but all of it is yours to run.

What the DIY path actually costs you

The code is the easy part. The maintenance is the part the tutorials skip. When you build it yourself, you own:

If you have a developer who enjoys this and time to maintain it, the DIY path gives you a one-of-a-kind form. If "keep a webhook endpoint healthy" sounds like a chore you will forget about until it breaks during a campaign, that is your signal to look at the embed route.

The embed path: live today, no backend

The other route skips all of that. A donation tool gives you a hosted, Stripe-powered form and a one-line snippet. You paste the snippet into your HTML where you want the form, and you are done, the form renders inline, the processing happens on the tool's side, and the receipts and records come built in.

This is where a tool like KindLumen fits a static site neatly: it is a Stripe-powered form you embed with one line, it renders inline and branded on your page, and donations flow into your own Stripe account with recurring giving and branded receipts already handled, no backend, no webhook to maintain. The features page shows the embed and the recurring setup. For the broader how-to, see how to accept donations on a website.

Which path is right for you

Pick the DIY path if you want a completely custom donor flow, you already run a backend, and maintaining a webhook is not a burden. You will get a form that is exactly yours, at the cost of being the one who keeps it alive.

Pick the embed path if you want donations live today, you would rather not run a server for it, and you are happy to let receipts, records, and recurring be handled for you. For most static-site owners, even technical ones, the embed gets you 90 percent of the value for 10 percent of the upkeep.

Whichever you choose, test it the same way: load the live page, make a real $1 donation from your phone, confirm the money and the receipt land, then refund yourself. That single test catches more problems than any amount of staring at the code.