How to build a simple E-commerce web app using Alby's lightning tools

TL;DR

This project tutorial is open-source on Github created by Tobi Ojuolape. You can easily fork, customize and test as much as you like. He would appreciate a star on the Github project if you found it helpful.

Live Demo: https://bitcoin-shop.netlify.app
Frontend Repo: https://github.com/Toheeb-Ojuolape/bitcoin-shop
Backend Repo: https://github.com/Toheeb-Ojuolape/bitcommerce-api

Introduction

In this tutorial article, Tobi shares a step-by-step guide on how to build a simple e-commerce website that uses Alby's lightning tools to enable customers to make payments and sends the payment to the merchant's Alby wallet immediately.

Here's a demo of what we will be building 👇🏾:

The tech stack:

The frontend of this project is built entirely with React using Vite and the API is built with Nodejs (Typescript).

The app will have a single view on the home page which will hold the logic for the web app and the UI for the different products. Tobi is using a simple state management dependency called Zustand to persist the state across different components, especially when adding a product to the cart.

Now, let's start hacking ✌🏼!

Backend

The backend is where we would implement the integration with Alby's js-lightning tools to generate an invoice and listen for invoice payments.

Tobi uses the generateInvoice controller together with Alby's js-lightning tools to generate an invoice on behalf of the merchant using the merchant's lightning address (e.g. his is [email protected]) which must be defined as an environment variable.

The buyer's name, email, address and id of the selected products would be sent as a request from the frontend. We would be storing the user data and product order information passed by the user as a comment and payer data in the invoice.

Have a look at Tobi's detailed instructions and code alongside of him.

Frontend

One part of the frontend is the Checkout component to manage the products added to the cart.

The main Checkout component holds the socket connection to the backend. At the point of payment, you generate an invoice and check if the user has a WebLN-supported wallet in their browser. If they do, the WebLN sendPayment() function is called to initiate payment. If the user does not have WebLN installed, then an Invoice QR code and string is displayed. This ensures an optimal payment experience without desturbing design elements like a QR code when it is not needed.

Conclusion

In this tutorial, Tobi successfully created an e-commerce shop that uses the lightning network as its payment provider to seamlessly enable users to pay for products. By building this ecommerce project Tobi has only scratched the surface of what is possible with tools provided by Alby. To learn more about all the other amazing things you can do with Alby, create an account and visit the Developer Portal.

Happy hacking ✌🏼

Reference Documentations:

Step-by-step guide with code examples by Tobi
Alby's js-lightning tools: https://github.com/getAlby/js-lightning-tools
WebLN Guide: https://www.webln.guide/