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.
In order to build an e-commerce website, you need a few things as a bare minimum.
A way to store and retrieve your catalog and inventory (API).
A way to process payments (API).
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:
Git and Github for version control of your website.
A static site generator so that you don’t have to write all the HTML and CSS by hand.
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.
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.
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.
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.
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.
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😋