Serverless e-commerce: lessons learned
This winter I decided to give my mother an unusual Christmas gift. She owns a beachwear shop in a nearby seaside city and she is always looking for ways to increase her incomes and to promote her shop. So I decided to make her an e-commerce website. Being not a web developer this resulted in the occasion to learn something new.
I had a big constraint: the cost of running the website should have been the lower possible. Optimistically it should not have had fixed fees.
I started searching for the best solutions and quickly realized that static websites are gaining a lot of traction these days and that hosting a static website has lower costs then his dynamic counterpart. Then I found Netlify and I fell in love with the level of automation it offers. Just push to a repo and it takes care of the deployment 😍 All of a sudden the embedded world seems so old fashioned.
I choose Hugo as the static website framework because it is fast, easy to grasp and written in Go which is a great language. I was not able to find good free e-commerce themes for Hugo so I created my own theme based on a free html template found online. That gave me the ability to customize the website without constraints and to learn Hugo a little more.
Kept the website structure as simple as possible since the website is selling just bikinis and so far we have less than 50 products. It has just a landing page, a products page that lists all the items for sale and a page that shows a detailed view of each product and correlated products (thanks to the .Site.RegularPages.Related variable on Hugo). Filtering is done dynamically via javascript on the listing page.
Once the showroom was in place I had to add the shopping cart and the payment gateway. I already did a research on the subject and the obvious solution was to use Snipcart for a serverless e-commerce website. Adding that to my website was a breeze. It offers a dynamic cart, a checkout form and a secure payment gateway (for more on this subject visit this blog post: https://snipcart.com/blog/hugo-tutorial-static-site-ecommerce).
Unfortunately after the website was almost ready I found a big drawback in using Snipcart: the price. Snipcart has a monthly fee of 9€ if your store makes less than 442€ in revenue in the same period of time. Not a big bother for someone who is sure to meet the target but for a newly born website this could be too much. This was hitting hard against the constraint I had and I finally decided to ditch Snipcart and to find a cheaper alternative.
The solution i came up with was to use Stripe as a payment backend. Stripe does charge a fixed amount per payment no matter of the volume of your monthly transactions. Stripe is not targeted to static websites. It is rather a collection of tools that can be adapted to a wide range of uses with some glue code. Going this way required an additional effort to prepare a cart that works across my website pages and a checkout page to collect shipping informations as well as payment details.
Implemented a basic Javascript cart that is using localstorage to store chosen products and details about them.
The checkout page uses Stripe JS and Stripe elements to fetch the payment details and then it triggers the payment backend via a POST request to a lambda function stored on AWS. The lambda function uses informations passed via the post request to validate the products and make the payment through Stripe Order APIs. The function then returns a series of data on wether or not the payment was successful and — in case of an error — what the issue was about.
Stripe Orders is providing the stock inventory database for my website. Investigated also the possibility to generate the product list on the website dynamically by fetching data from the stripe inventory. This would have allowed to display only available products giving a more valuable information to the customer, but I choose to not use it and generate all of the items as static pages from Hugo because that allowed Hugo to generate the sitemap, to have a better search engine indexing and to categorize products based on taxonomy terms. The latter allowed to show links to related products on the bottom of the product page and to allow the navigation by category. Currently stock inspection is done only while issuing the payment. When the store will gain more traction I am going to use Stripe Order APIs to show stock availability inside the product page with a POST request to another Lambda function.
TL;DR
- Static website generators are a valid alternative to dynamic websites especially if you are not aiming to have tons of products. It keeps the whole thing easy to manage and cheap
- If you don’t have budget issues and you are not aiming for a super custom design Snipcart is the solution for a serverless e-commerce
- Stripe is an extremely flexible alternative and it does not charge you if you don’t make any money. But it requires more work to be adapted to a static website
- AWS API Gateway and AWS Lambda are the glue that allow a static website to become a serverless website. There alternatives (less tricky to use) but AWS is cheap and complete
- A good design choice is to use static product pages and stuff them with a backend request to display stock availability of each product
Ah BTW this is the final result: https://meraviliao.com