A few weeks ago, I took an interest in e-commerce and I decided to build an online store. I had initially planned to build the store using the “classic” architecture which involves creating a database, an API backend, and a web front-end but after a little research, I learned that JAMSTACK is the shiny new toy that all the cool kids are using these days so that’s what I went with.

The complicated part with JAMSTACK in South Africa (SA) is that many of the payment gateways listed in the how-to tutorials and articles online do not process payments outside of Europe. This leaves the SA developer with the complicated task of stitching together the payment gateways that do accept payments in SA with the other APIs that make a JAMSTACK online store possible. This guide is written with the intent to navigate you through this part and provide the general architecture that you can follow when building an online store using the JAMSTACK in SA.

What is JAMSTACK?

The word JAMSTACK stands for the Javascript APIs and Markup stack. It is an architecture designed to make the web faster, more secure, and easier to scale. The idea is to use build tools to convert markup to the statically rendered assets of a website’s front-end which can be delivered using a content delivery network (CDN). The sites are then enhanced with data-driven capabilities using Javascript and APIs. This makes them fast, secure, and scalable. You can read more about JAMSTACK here. JAMSTACK allows developers to build a fully functional e-commerce store without having to set up a database or a server. No need to worry about security and managing users and scaling the site when the load increases. Just build your front-end and let the widely available APIs of the web do the rest for you. Welcome to the future!

How to JAMSTACK for E-Commerce?

In order to build an e-commerce website, you need a few things as a bare minimum.

1. A way to store and retrieve your catalog and inventory (API).

2. A way to process payments (API).

3. A website where people can make purchases of the items in your inventory (Markup and Javascript).

4. A CDN to host your website (API).

Beyond that, you will probably want to make use of some tooling to make the process of development more pleasant. Some tools you might want to consider include:

1. Git and Github for version control of your website.

2. A static site generator so that you don’t have to write all the HTML and CSS by hand.

3. A command-line interface (CLI) that allows you to run a development server that serves your static website locally.

The general architecture is that you will have a data source that hosts all of the dynamic data that powers your store. You will then use an API to access this data, and then generate the static assets of the store’s front-end at build time. The statically rendered site is then deployed to a CDN where users can access it via a browser. The site can then make further use of APIs to fetch more data and/or provide more functionality like processing payments.

Choosing your JAMSTACK fighters in SA

The power of JAMSTACK comes from the plethora of APIs and tools that you can use to put together a website. I experimented with many different APIs and payment gateways to build my e-commerce store and I finally settled on the below stack.

Catalog and Inventory

To manage the catalog and inventory I used the javascript library Commerce JS. This library provides a powerful headless commerce backend as well as APIs that allow you to manage your inventory, create a cart system, capture orders and send email notifications. It also comes with an intuitive dashboard UI where you can see a visual representation of the inventory, the orders as well as some statistics. Commerce JS also allows you to set up hooks to programmatically rebuild and redeploy your store based on certain events like price changes, changes in the catalog, the addition of promotional codes e.t.c It really is the all-in-one library for managing your online store.

The one drawback that Commerce JS has for SA users and developers is that it doesn’t come pre-configured with a payment gateway that can process payments in SA. Thankfully they do provide a manual payments option. This allows you to create an order on Commerce JS, process the payment using your chosen payment method, and then mark the order as settled on Commerce JS using an API.

Payment Gateway

There are a number of online payment gateways that you can use in SA. The list includes gateways such as payfast, paygate, and ozow but the one that I settled on is yoco. I was most impressed with yoco because of their excellent documentation that makes it trivial to integrate it into your website. All you do is include a script, paste some Javascript, and put a button on a form. The process really couldn’t be made simpler! Once the form is included on your page you can customize it to look and behave the way you want with CSS and Javascript. Another big advantage that yoco has is that the payment process is fully API-based. This means that there are no page redirects necessary which is very important as it allows the user to go through the entire payment process without leaving your website. A huge plus for user experience!

Build tools

I used a static site generator as well Git and Github for the version control. These days there are as many static site generators as there are probably stars in the sky. You can find an exhaustive list of them here. I settled on Eleventy. I chose it because it’s easy to use and it allows me to use my favorite templating language Pug to write the markup alongside the CSS preprocessor SASS to write my stylesheet. Another build tool that is worth mentioning is the Netlify CLI which allowed me to easily test and deploy the website.

Deployment

The CDN that I went with is Netlify. I chose Netlify because of its extensive and easy-to-use documentation and its many useful features. The feature that I found most useful was its seamless integration with Github which allows me to trigger a build/deployment by simply pushing the latest code to my Github repository. It really doesn’t get any easier than that! Netlify also comes with a serverless function feature which is essential since I needed to store secrete keys and call APIs from a server in order to process payments and capture orders. Netlify also allows you to set up a build hook URL that you can call to programmatically trigger a redeployment. This becomes important in a statically rendered store as catalog and inventory change constantly.

Conclusion

JAMSTACK is not some dream that’s in the distant future anymore for SA developers. It’s here and it’s ready to use! There has never been a more powerful, cheaper, and reliable way to quickly develop and deploy online stores. I hope this article has cleared the confusion that sometimes arises around which technologies you can use to take advantage of this architecture if you are a developer in SA looking to launch your next online store using the JAMSTACK. Check out the online store demo that I built with JAMSTACK here.

--
What is your JAMSTACK technology stack for building online stores in SA? Let me know in the comments😋