May 30, 2020

Donate Button with Paypal Integration

A Donate button with Paypal REST SDK integration through a NodeJS/Express server

Made with: Node and Express

Source Files | Live Demo


I got the inspiration for this project from this post in Willem Middelkoop’s blog, and from the site buymeacoffee.com. Simply put, I wanted to create a Donate button that upon clicking set in motion the process of paying through Paypal and redirecting back to my site. Before any styling, it would look something like this:

While Willem’s post went through the basic process, it didn’t provide detaied instructions on how to make this work on an actual server, or how to interact with the payment platform’s API. That’s when I went online and searched for tutorials and videos that might help me.

Fortunately, I run across this video by Brad Traversy that does a wonderful job of explaining how to tie a basic Node/Express server with Paypal. However, I wanted to go a step further and not only make the application to work in my own computer but also on a virtual private server accessible from the Internet. It just happens that Brad had already created this other video explaining how to deploy a basic Node/Express app in a VPS, together with domain name mapping and HTTPS certification. The video comes with detailed written instructions.

Rather than explain every single detail, I’m going to lay out the basic steps I took and link to the appropriate resources:

1. Build a basic Node/Express app

const express = require('express')
const app = express()
const port = 3000

// Set our template engine of choice
app.set("view engine", "ejs");

app.use(express.static("public"));

app.get('/donate', (req, res) => res.send('donate'))

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

'/donate' is a route that points to a template in the views folder that will make our /donate page look like this in the browser:

Note: if you’re not familiar with how Express works you may want to head to Expressjs.com to familiarize yourself with that first.

2. Get a virtual private server at Digital Ocean

The virtual private server is where our application will be deployed. You will need to:

  • Sign up to Digital Ocean
  • Create a Droplet (Digital Ocean’s name for their virtual private servers)
  • Make a note of your assigned I.P. address (you will need it later)

It may be useful at this point to learn how to log into a droplet via SSH (so you don’t need to use a password), and to create a new user with sudo privileges so that you don’t have to log in as root. Follow this tutorial.

3. Get a domain name and point it to your Digital Ocean virtual private server

You need to either register a domain name or use one that you may already have. Then, you need to configure it to point to your server. For this last part you can follow this tutorial.

4. Deploy our basic Express app in our virtual private server

You can either copy the files one by one, or push the app to a Github repository and then clone it in your VPS. You may also want to install a process manager like PM2 so that your application runs all the time, even when you log out of your server.

5. Create a NGINX web server and configure it

The idea is to make our Express app visible not just through a port (e.g. domain.com:3000) but through a plain domain: domain.com. For that, we need to create a NGINX web server, and configure it so that our Node/Express app maps to the NGINX server. This process is known as setting up the NGINX server as a reverse proxy.

6. Create a Paypal developer account

You need to sign up at developer.paypal.com. Paypal automatically generates a dummy business account and a dummy personal account that you can use for testing in their Sanbox environment.

7. Add routes and functionality to our Express app

This allows our Donate button to become fully functional.

Steps 1 to 5 are covered in this video and its companion notes.

Steps 6 and 7 are covered in this video.


My demo is now finished and fully functional, although it could still use some styling! :)

If you want to try it out, click on the Donate button below and use these dummy credentials to go through the motions in Paypal’s sandbox environment:

Email: sb-akf271945802@personal.example.com

Password: BmWWp#S4

DON'T WORRY: You won't get charged. This is a dummy environment!


Content licensed under CC0-1.0 | Code licensed under GNU GPLv3