TL;DR: Integrating cryptocurrency payments on an eCommerce web store using Coinbase Commerce platform

"...too much of a risk to ignore...if you happen to be an online retailer ..."

Purpose

The primary purpose of this guide is to give a high-level overview of how someone could quickly build and set up a custom build e-commerce store that accepts cryptocurrencies as the unit of exchange for a retailed item, i.e. A bottle of Whiskey in this example.

The web page built to demo this use case is a minimum viable product but a fully working one. For sure, many improvements and iterations could be made to improve the user experience and user interface. I am open to contributions via the GitHub repository where this logic is available.

Assumptions

Blockchain and Cryptocurrencies

No prior knowledge of blockchain or digital assets is required to follow this guide. The ultimate goals and hopes are that this guide might help someone realise their next big idea and kick start their journey into this subject matter.

Reiterating that whatever your beliefs surrounding crypto might be, it looks like it is here to stay for another while longer. Perhaps one could justifiability say; it is now too much of a risk to ignore and even more so if you happen to be an online retailer.

Programming Skills

The aim is not to inform the reader which coding language is best. Different frameworks will have various advantages, as with all web applications and their fundamental building blocks. Some of these advantages can be for developer experience, and some are for the benefit of application users; neither are essential.

The most important thing that the reader takes away from this is the new knowledge on setting this project up from scratch. Of course, you can use this project yourself at your own risk. Or you can contact me via LinkedIn or Twitter to discuss this more.

Please note the dedicated GitHub Wiki page with the relevant code commentary.

System Specs

As is the case with many web application frameworks, the baseline requirement for this project is relatively low.

2 vCPU
2 GB RAM

Tools

Django

Django is a web application framework that is freely available, open-sourced and based on Python's general purpose programming language.

The web framework for perfectionists with deadlines

Coinbase Commerce

The Coinbase Commerce API provides two different ways of accepting crypto payments: Coinbase Charges and Coinbase Checkout.

For this guide, I went with the Charges API since it can be customised to suit any E-commerce store whether or not it was built using Django. This level of customisation outweighs the simplicity that the Checkout API offers. If, for example, you are selling a fixed product and customisation is not a priority, then perhaps the Checkout API would suffice.

The Application

Project set up

For a more detailed guide on how this project was built from scratch using a local development environment, please refer to the documentation in the GitHub repository and the technical Wiki article.

The below images show how the project can be set up using a development terminal/shell:

Coinbase Integration

To interact with the Coinbase Commerce API, you'll need to create an account. Please follow the link to Coinbase Commerce for account set-up.

Once account creation is completed, log in and navigate the settings tab. Scroll down and locate the API Keys section, click Create an API key and then Reveal.

Copy the API key to your clipboard.

Coinbase Charges is the most customisable approach for accepting crypto payments. With this approach, you have complete control over the charges.

Workflow:

Use a client to connect to the Coinbase Commerce API
Create a charge (JSON payload)
Fetch the newly created charge and pass it to the HTML template
Redirect the user to the Coinbase Commerce hosted site
(Optional) Verify the charge using webhooks

Coinbase: Charge API and Create-A-Charge API

To request a cryptocurrency payment, a charge should be created or generated.

As cryptocurrency payments are via push methods, a charge will expire after a waiting period if no payment has been detected. A unique eight-character code identifies charges.

The create-a-charge API should be used next to set up a charge method. This can be noted in home_view function in the file app/payments/views.py

For more details and insights, please refer to the project documentation in the GitHub repository.

Local developer environment

The application was built using docker. As such, to run a build and then execute the application locally, please see the below commands:

User Interface

Once the application runs via docker, you can browse the localhost URL at http://localhost:8000.

The following web page should appear:

Coinbase Commerce currently does not support sandbox accounts for testing. If you do plan to demo this application please note that you will need to use real crypto from a digital wallet to test your application and payment system.

Clicking on the Purchase button will take you to a page that looks like the following example, which has been decorated with custom media:

Select the cryptocurrency type that you want to make the payment with. Doing so will take you to the following page:

Coinbase has a default countdown timer of 60 minutes to transfer the crypto before the charge times out.

After the payment is sent, it will take a few minutes for blockchain miners to confirm the transaction after getting the required number of confirmations (depending on which cryptocurrency you selected).

Post payment will get an on-screen confirmation that the payment has been successfully sent. You will be redirected to the URL associated with redirect_url.

Selecting Continue will take you to a custom landing page indicating that the payment has been successful:

If at any stage the payment is cancelled, you should be taken to a custom landing page indicating the transaction has been cancelled:

All payments will appear in your Coinbase commerce store. Each payment can be checked via the Payments tab allowing you to verify more granular details on the blockchain transaction.

Also, you can withdraw the balances to an external crypto wallet address. However, if fiat currency is still your game, you can convert it to USD or EUR.

Summary

The original intention of this guide was to demo a simple use case of accepting cryptocurrency for the sale of goods via an E-commerce store.

Specifically, you will have learnt how to achieve this using Coinbase Commerce and a web application built on Django.

Commentary

Several other platforms like BitPay, CoinGate, Dwolla, GoCoin offer custom web page integrations for accepting crypto payments for goods and services. Coinbase was selected with no affiliation in mind; it was chosen as it could be considered a pioneer in the crypto field.

Several areas could do with a further investigation, namely which cryptocurrency is most suited to the task? In short, I found LiteCoin, Dogecoin and Ethereum to be the fastest. The fees associated with using Ethereum in this example makes for grim reading. In this example, if using Ethereum, the transaction fees would cost more than the retailed product. Also, further investigation should be done to understand if the transaction speed for each cryptocurrency is directly related to the Coinbase Commerce backend.

The intention was never to select a winner or hypothesise why I might prefer one crypto over another. Given the mock results showing the best performing cryptocurrency in terms of speed of transaction at low fees, maybe there is some method in the madness of Elon Musk and his Doge crusade.

Now, can someone please tell me where I can find top shelf Whiskey for bargain prices!?

Please stop by again for new tutorials, demos and projects. Do sign up for updates to have these arrive at your inbox automatically.

Until the next time, stay safe, healthy and alert to the ever-changing world around us.

Be seeing you. 😎

Stay cool ya'll

GitHub

https://github.com/endk17/cryptoexchange

Live Application

https://big-e-liquorstore.cloudnua.io

Note: the demo application is hosted on the Heroku platform. During times of inactivity, the application will go into sleep mode.

If the link is not working after approximately 10 seconds, reach out to me for a demo.

How e-commerce sales can boost and win new customers using crypto payments