How to add Donate via UPI button to your Hashnode blog ? [Giveaway][India]

Introducing Pay via UPI

• A simple widget that you can add to your website to receive donations on your site via UPI

• Responsive for mobile users as well

• Simple integration under 60 seconds. Just copy a single line of code and paste it inside the head tag of your website.

• The code is open sourced. visit payviaupi.com github repo

• You can also Create a donate via UPI button for your blog. Example :- %%[donateviaupi]

Idea and building the Project.

Recently I moved to Pune from Delhi. I am totally cashless now. I make UPI payment almost everyday. I thought the same could be done for my website. I wanted to find a way so that people can pay me via UPI.

UPI by itself is a bit anonymous. The Only things that you can see is the Bank name associated with the UPI Id and in the debit message you only see the UPI ID.

Some of the apps like Paytm use mobile number to generate UPI ID, but you can change your UPI ID.

I created a widget similar to buy me a coffee that you can add on your site. Kinda like an Indian Alternative to it. At least that was the idea.

I created a simple form by which you can add a script in the head tag of your site that would add a widget to which people can scan and pay to you via UPI. It’s not a payment gateway. Just a Dynamic UPI QR code sticker.

Click me to Create a UPI sticker widget for your site

here is how the widget will look like on your site.

I will add more customisation feature in the future.

After the widget, I realised the solution would not work on sites like hashnode, medium and dev.to.

So, I created a donate via UPI button that you can add to your blogs.

Which is also simple to create. Fill a simple three input form and you are done.

UPI deep link doesn’t works with personal UPI Id.

There was also a link option to open the payment session on apps like Paytm, PhonePe and Gpay. But later I got to know the UPI deep link only works with Merchant UPI Id which you have to create using the PhonePe, GooglePay …etc apps.

If you have any feedback or UI customisation do let me know.

Instructions for the Giveaway ( India only )

I will giveaway something in between 50-100 rupees to the first 10 Bloggers who will add donate via UPI button on their blog as a Hashnode widget. You can have samosa, tea and a poha for this much India. Let’s build a giving Indian developer community.

What you have to do ?

How to create donate via UPI button ?

1. Visit payviaupi.com

2. Create a donate via UPI button by clicking the button link in the Navbar.

3. Fill the form with your details. Please add your real name.

⚠️ Warning: Don’t use the upi id with your phone number. It will work but exposing your phone number is not a good idea.

4. Create a hashnode widget by going to your blog dashboard > Widgets > Add new widget.

5. Comment you blog url with the donate via UPI button. That’s it.

6. Your name registered with the upi id should be same as your hashnode profile name. very important

(Optional) Give a shoutout on twitter for the project to increase. You don’t have to. Not a requirement for the giveaway.

You can write something like

Hey, I just create a donate via UPI button for my blog using the payviaupi.com site.

%%[donateviaupi]