Add a Donate Button to Blogger with UPI QR (Free Guide, India)

I've been writing on this blog since 2015, and in all that time I never once asked a reader for anything. This weekend I finally added a small way for readers to say thanks: a donate button and a UPI QR code under every post. It took one afternoon, a few wrong turns, and zero code skills.

This is exactly what I did, what broke, and the copy-paste box you can use on your own Blogger blog. It's written for Indian bloggers, so everything works with UPI, cards and net banking.

The short version

• Button: a Cashfree payment form gives readers card, UPI and net banking, and logs their name, email and phone.
• QR: a plain UPI QR is free, but anonymous. You only see it in your bank or UPI app.
• Placement: one HTML gadget in Blogger's "Below post" area shows the box under every post.
• Page: a small "Support" page and a homepage button give people one place to land.

Is a donate button okay on a personal blog?

Yes, as long as you're honest about it. I describe mine as a voluntary personal contribution, not a charity and not tax-deductible, and I'd suggest you do the same. Don't present personal support as a cause, and don't pressure readers. Also remember that money you receive may count as income, so a quick chat with a chartered accountant is a good idea. I'm not a tax or legal advisor.

Step 1: Pick how readers will pay

I compared the options for small amounts like ₹29 or ₹99. These are approximate rates from each provider's pricing page when I checked, so confirm the current numbers before you commit:

Option	Typical cost	You get
Cashfree payment form	about 1.95% + 18% GST on the fee	Cards, UPI, net banking, buyer details
Razorpay	about 2% + GST	Same, with its own dashboard
Paytm Payment Gateway	1.99% + 18% GST, no setup fee	Same, needs a business account
Plain UPI QR	Free	Money straight to your bank, no donor details

On a ₹99 payment the gateway fee comes to roughly ₹2.30, so the three gateways cost about the same. I stayed with Cashfree because I already had an account. International platforms are a poor fit here: a flat fee per payment eats a lot of a ₹99 sale.

Step 2: Set up a payment form

Cashfree's Payment Forms need no code. You set a title, a description, an amount (fixed or "payer decides"), and pick which details to collect. For a donation I let the reader choose the amount and ask only for name, phone and email.

What went wrong: the "Create new form" button wouldn't get past the first step for me. I never found the cause (my guess is account activation, but that's only a guess). The fix was to edit an existing form instead and rewrite its description honestly. If the same thing happens to you, ask Cashfree support rather than fighting the screen.

Step 3: Make a clean UPI QR

The QR from GPay or PhonePe comes with your name, UPI ID and the app's logo around it. If you want a plain one, any free QR generator can encode a link in this format:

upi://pay?pa=YOURUPIID@bank&pn=Your%20Name

Scan the finished QR with a second phone before you publish it. And know this: a UPI QR contains your UPI ID, so anyone who scans it can see it in their payment app. If you'd rather not share that, skip the QR and keep only the button.

One more tip. Dark blog themes can change the colours inside a page, which can make a black QR vanish. Export the QR with a white border baked into the image so it stays readable on any background.

Step 4: Add the box under every post

1. Open Blogger, then Layout.
2. Find the Below post section and click Add a Gadget.
3. Choose HTML/JavaScript and paste the code below.
4. Click Save on the gadget, then Save arrangement at the top of the Layout page. I forgot the second save once and spent ten minutes wondering why nothing changed.

Replace YOUR_PAYMENT_LINK and YOUR_QR_IMAGE_URL with your own:

<div style="max-width:560px;margin:28px auto;padding:24px 22px;border:1px solid #e3d9c0;border-top:5px solid #E0A526;border-radius:12px;background:#fffdf7;color:#333;text-align:center">
  <h3 style="margin:0 0 8px;color:#14213D">If this made your day a little better</h3>
    <p style="color:#333">I write on my own time, with no paywall. A small thank-you keeps this blog going.</p>
      <p style="font-size:14px;color:#555">₹29 = a chai · ₹99 = a tank top-up · any amount means a lot</p>
        <a href="YOUR_PAYMENT_LINK" target="_blank" rel="noopener" style="display:inline-block;padding:13px 30px;background:#14213D;color:#fff;border-radius:8px;text-decoration:none;font-weight:600">Buy me a chai</a>
          <p style="font-size:13px;color:#777">or scan with any UPI app</p>
            <img src="YOUR_QR_IMAGE_URL" width="130" height="130" alt="UPI QR code" style="background:#fff;border-radius:8px">
              <p style="font-size:12px;color:#777">Voluntary personal contribution, not a charity or tax-deductible.</p>
              </div>

Step 5: Add a Support page and homepage button

Under Pages, create a page called "Support My Writing". Tell your story in a few lines, say where the money goes (hosting, writing time, ride fuel), and repeat the button and QR. Then add a button on your homepage that links to the page. In my case the menu editor was hidden behind another block of my theme, so I put the button in the homepage intro instead, in a gold colour that stands out from the rest.

Six ways to make it feel natural, not pushy

1. Ask for something small. "₹29 is a chai" feels easier than "any amount".
2. Say where it goes. Be specific about hosting, writing time or fuel.
3. Place it after the value. Under the post, never in the way of it.
4. Keep it low-pressure. Tell readers that sharing helps just as much.
5. Be honest. Call it a personal contribution, not a charity.
6. Offer two ways to pay. A button for cards, a QR for UPI.

Frequently asked questions

How do I add a donate button to Blogger?

Create a payment link or form, then paste an HTML box with that link into a Blogger gadget under Layout > Below post. Remember to click both Save and Save arrangement.

Can I accept UPI donations on a Blogger blog?

Yes. Either use a payment gateway form that supports UPI, or show your own UPI QR code. The QR is free but doesn't tell you who paid.

Is a UPI QR safe to put on my blog?

It's safe for receiving money, but it reveals your UPI ID to anyone who scans it. Decide whether you're comfortable with that first.

How much does a payment gateway charge for a ₹99 payment?

Roughly 2% plus 18% GST on the fee, which is about ₹2.30 on ₹99 at the rates I checked. Rates change, so check the provider's pricing page.

Final thoughts

Asking readers for support felt strange at first. Doing it honestly, with a clear reason and no pressure, made it feel like what it is: a way for people who liked my work to say thanks. If this guide saved you an afternoon, you'll find the same box right below this post. And if you set one up on your own blog, tell me in the comments how it goes.