The idea of being able to send and receive money almost instantly from anywhere in the world with no middleman is really appealing to a lot of people.

Today, I thought it'd be fun to build a small web event ticketing portal Demo (something similar to Eventbrite, but much less sophisticated) that allows you to easily register people for a paid event and collect payment in Cryptocurrency.

Table of Contents:

# Get Started with Coinbase and Node
# Set Up Your Credentials
# Clone the Project
# Install Dependencies
# The Frontend
# The Server-side
# Deploy to Heroku
# Conclusion

Get Started with Coinbase Account and Node

Before I walk you through building the application, there are a few things you'll need to do.

You'll need to go create an account with Coinbase and Coinbase commerce. Coinbase is the largest and most popular Bitcoin exchange in the US. It allows you to easily get started using Bitcoin and other Cryptocurrencies without needing to install software, learn a lot, etc.

Coinbase Commerce enables merchants anywhere in the world to accept cryptocurrency payments in a fully decentralized way. And convert your funds back to your Coinbase account.

Finally, you'll need to have Node.js setup on your computer and be ready to do some coding! 😊

Set Up Your Credentials (Coinbase Commerce Payment Checkout Widget)

To accept payment through Coinbase, we either make use of the API integration or the checkout widget, lets set up the checkout widget:

• Login to your Coinbase Commerce Dashboard
• Click on Checkouts
• Click on Create checkout
• Select Sell a product
• Fill out product information (Event information in our case)
• Check the information to collect from the customer and click done

We have two options to make use of the payment gateway, either we redirect the user to a payment link, or we embed (Let's go for this) the checkout widget inside our application.

With Coinbase commerce set up, let us build our application and start collecting payment. 🤑

Clone the Project

Now that we've done the boring stuff, let's take a look at some code 👩‍💻👨‍💻.

You can either clone the project locally from my Github repository:

git clone https://github.com/vincentiroleh/event-ticket-booking

Or you can fork the project to your own Github account and then clone that locally. This might make it easier to make changes and play around with the code as you follow along below.

Through the rest of this article, I'll assume that you're working inside of the cloned/forked project directory.

Set Up Your Credentials

Go back to your Coinbase commerce dashboard and copy your checkout widget (embed version)

Open the cloned/forked project on your favorite editor, open the src/views/index.ejs, and make the following changes on line 291:

To communicate with Coinbase commerce gateway, we need to whitelist the domain on which we plan to host a checkout widget.

Add http://localhost:8080 to the whitelist

Install Dependencies

Now that the setup is complete, install all of the project dependencies using npm, the Node package manager. From the project's folder (on your Terminal or Command Prompt), Run the following command:

npm install

This command will install all of the dependent packages by analyzing the package.json and package-lock.json file in the project directory.

The dependencies used:

• express is a back end web application framework for Node.js
• EJS is a simple templating language that lets you generate HTML markup with plain JavaScript.
• nodemon is a dev dependency tool that helps develop nodeJS based applications by automatically restarting the app when file changes in the directory are detected.

Run

npm start
// to start the server OR

npm run dev
// to start the server in development mode

😊 Open your browser and navigate to localhost:8080

The Frontend

⚠: I'm not a great frontend developer. I'm more of a server-side developer. The frontend of this project was created by pixpalette

If you take a look at the views directory, you'll notice that there is only one file: index.ejs. This single file renders the entire website.

This is a pretty standard HTML page that uses the Bootstrap and jQuery libraries. Since this is an example application, I thought the theme was fitting so I used it. Though I made a few changes to the original theme just to narrow it down to what I want.

The Server-side

Now that you've seen how the frontend code works, let's take a look at the server-side codebase.

Open up the src/app.js file and follow along below:

Import Dependencies

The first thing I do in the app.js is to import all the Node.js dependencies needed to run the app:

"use strict"

// Import modules
const express = require("express");
const path = require("path");

Importing dependencies or modules is standard in just about every app. Module in Node.js is a simple or complex functionality organized in single or multiple JavaScript files which can be reused throughout the Node.js application.

path - is a core Node module for working with and handling paths.

Define Globals

The next thing you'll notice in app.js is a section of code that defines a global variable:

// Instantiating express
const app = express();

The app variable. This is a standard Express.js convention: create an app object and use that to start up the web server later on.

Configure App Settings and Middleware

Once the globals have been defined, the next thing you need to do is define the app settings and middleware.

// App settings 
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

// App middleware
app.use(express.static("public"));

app.set("views", path.join(__dirname, "views")) will set your apps views folder to something like:

/home/iroleh/dev/event-ticket-booking/src/views

The path module won't actually check if it's an existing path. It's mainly used to transform path strings.

app.set("view engine", "ejs"), and all it does is tell Express to use the EJS templating engine when rendering views.

app.use(express.static("public")) this middleware is configured to serve static assets (css, images, javascript) from the public directory in the root of the project folder. This definition tells Express that any requests that start with /public should be routed to that folder, and automatically return whatever files exist there.

Create Routes

Let's look at the routes section of app.js (the routes):

app.get("/", (req, res) => {
  res.render("index");
});

Our only route just displays the home page of the site. Since all we need here is to show a simple template, there's nothing special we need to do other than render the page.

The Special 404 Error

app.use((req, res, next) => {
  res.status(404).json({
    error: {
      name: "Error",
      status: 404,
      message: "Invalid Request",
      statusCode: 404,
      redirect: "http://localhost:8080/",
    },
  });
  next();
});

In Express a 404 is not the result of an error but rather the app running out of options. Once the request doesn't match any of the routes, it will reach the above function.

Start server on env port or custom port

const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log(`App listening on http://localhost:${port}`);
});

In many environments (e.g. Heroku or Azure), and as a convention, you can set the environment variable PORT to tell your web server what port to listen to.

const port = process.env.PORT || 8080 means: whatever is in the environment variable PORT, or 8080 if there's nothing there. We pass that to app.listen(port,...), and that makes your server able to accept a "what port to listen on" parameter from the environment.

Deploy to Heroku

Time to deploy our app to the cloud, Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Create an account if you don't have one

Visit Heroku.com to create an account or login (if you have an account already)

Create a new app

Assuming you forked your own version of the project from GitHub.

On Heroku dashboard, create a new app:

Fill in the name of your app, and the region to deploy it.

On the new window, under the deployment method, click on the GitHub card

If this is your first time, you will need to integrate GitHub with Heroku. GitHub Integration (Heroku GitHub Deploys)

Search for your repository name, and connect

Enable automatic deploy, and deploy manually (to deploy the current state of your branch)

Once the build was successful ✅, you see a similar output:

Click view to view your application. 😊

Don't forget to add your own version of https://event-ticket-booking.herokuapp.com to the whitelist on Coinbase Commerce settings.

Conclusion

Accepting payment through cryptocurrency isn't that difficult as you thought. Using platforms like Coinbase Commerce is easy and efficient to accept cryptocurrency on your website. If you're interested in building cryptocurrency apps of your own, I recommend you create a Coinbase Account and check out their API documentation

Finally, if this was useful, don't forget to share it with your friends 💜