DEV Community

loading...

Running a small static e-commerce store with less than 5$ budget per month

Muhammad Talha Akbar
I provide solutions that matter. With my strong background in Internet and Web, I've worked on challenging platforms and have created web applications that are used on a daily basis.
・7 min read

Before you start, you can either read the short answer below, read the story or jump to conclusion at the end.

Short Answer

  1. Amazon Lambda
  2. Stripe
  3. serverless framework
  4. Some code magic on your side

Story

Recently, I was assigned a project on Upwork to build a single page store with Stripe. It was not made clear to me what technologies needed to be used for the project so, I quickly suggested the ones with which I was most comfortable with. But, soon, it was revealed to me that I needed to update an existing website and can't start from scratch. Whatever, that's not an issue, right?

Turns out that the existing website that the client was referring to was an Amazon S3 bucket with static hosting enabled. I was being asked to make a fully-functioning store without any backend. I knew there must be a reason that the client wanted it to work that way and was not being totally irrational so, I asked. I was told that the current setup was great and costed around 2$ a month. At this point, I was a bit hesitant and the client felt it so, he asked how much would it cost to migrate it to some other hosting and not compromise the great setup he had. I replied that I understood that he didn't want to change anything and I will try to keep it that way but, will need some time to think...

So began my search. I had heard of a term "server-less architecture". Just that. So, I quickly googled it. Somehow, I came across Amazon Lambda which allowed you to create simple isolated functions which could be invoked through a variety of events. And, not only that but, also 1 million such invocations in a month costed you nothing. I acted swiftly and shared this with the client who was amazed to hear about it and approved of it.

But, all was not over yet. Although, Lambda was a key to completing this project but, I also had to deal with Stripe. I had done a few projects with Stripe before but, not a complete e-commerce solution backed by it. I revised Stripe concepts and was confident that I could make payments and create subscriptions. I just needed to send Stripe generated token to Lambda functions to process.

Here's a quick tip: don't try to reinvent the wheel. I googled Lambda with Stripe and voila! A developer name Yos Riady not only had a github repository but, also had a tutorial for it.

So far, I had discovered Amazon Lambda and tutorial by Yos Riady. Yos Riady suggested the use of server-less framework available on npm to interact with Lambda and save headaches of creating Lambda packages. He was right. It saved tons of working hours.

After following the tutorial and inspecting his repository code thoroughly, I was ready to start the project.

My initial idea was to store the products in a JSON file and fetch() them. After fetching, I will list the products and let the user add them to a cart. Once the user will finalize his/her cart, using Stripe elements, we will get their payment details. Once the details will be given, the Stripe generated token will be sent to Lambda function to process which will create a Stripe payment after validating the request. To tell which items the user ordered, my naive solution was to put those details in the description of the payment. Genius! Wasn't it?

With the initial approach, there were two problems:

  1. The client will need to edit the JSON file each time he needs changes in the products.
  2. The order items in description of the payment!

I had these problems in my mind but, continued anyway. Just about when I was going to write logic for putting the order items in the description of the payment, I realized not only it's stupid but, also useless. I needed some other way. Search mode on!

Believe me, out of nowhere, I came across Stripe Orders API. I could create Stripe Orders and pay for that order using the Stripe generated token. My initial guess was the order object would just let me add a bunch of items and store it. It was not the case! After carefully going through process of creation of Order through Stripe API, I discovered that I had to first register the store's catalog with Stripe then use the IDs generated for each one of them in the order create request. This lead to another discovery of the Products System in Stripe Dashboard. Stripe already gives you functionality of storing products and variations of those products in the form of SKUs. Guess what?! This also solved the problem #1.

Solving the problem #1 was not obvious. I still needed to do a bit of thinking. As the store at that stage was relying on a JSON file that I had created.

Regardless, I went to Stripe dashboard and added a few products along with SKUs. Stripe API lets you list these products. Considering it was a static website and we can't ask Stripe to list the products whenever the store was loaded, I created a node script that fetched the list of products from Stripe API and put it in the JSON file the application was relying on. I had to make some logic and code adjustments as the Stripe's object for list of products had a different structure than the JSON file I had created initially. It worked! I was more closer to signing off the project.

However, there was still a bit of issue. It was great that the client could now see orders made in a delightful way through Stripe dashboard and also, could manage the inventory from there. But, whenever, there will be a change to products, the client will need to run the node script to update JSON file from his environment. But, this turned out not be a big problem for the client as he was already running commands to manage his website's setup.

Still, I would like to propose a solution to the above mentioned problem. Stripe allows you to register Webhooks. The events occuring on your Stripe account can be captured and dealt with. So, utilizing this functionality, we could create a Lambda function that listened to any Product change event on Stripe and update the JSON file in the S3 bucket. I haven't done this myself yet but, I encourage you to do this an exercise if you're just starting out with Amazon S3, Stripe and Amazon Lambda.

Conclusion

So, to conclude:

  1. Use Stripe Products section in dashboard to manage your inventory.
  2. Sync the stripe products with a JSON file using a script and Stripe API.
  3. Fetch the JSON file on load of your Store and render all of the products.
  4. Allow users to add those products to a cart. From programming point of view, you'll need to store the IDs of the products / SKUs that the user selected in the cart.
  5. Use Stripe Elements to collect user payment information and generate a Stripe token.
  6. Import serverless framework from npm and setup using Yos Riady's Tutorial as a guide. This will include creating Amazon Lambda function in the language of your choice and also, importing any Stripe API's implementation of that language. I used JavaScript both for the static site and the Lambda function.
  7. In your Lambda function, create Stripe order object and specify the items that the customer ordered. Then, you'll need to pay for the order you just created. The total price will be calculated by Stripe.
  8. You may also want to turn on Customer Emails from Stripe dashboard to send receipts of purchases.

Using these 8 points as a guide, you can start your own ecommerce store. If I didn't mention who my client was in this project, let me do that now. It's an entertainment company in USA named ArrowTagOC. I thank Thomas Magsaysay supposedly, the owner of ArrowTagOC, for believing in me and helping make this challenging task possible. If you are around: Arrow Tag OC 3400 W. Warner Suite K Santa Ana, CA 92704, and want to do some fake archery, do visit them.

Now, cost calculations:
According to Amazon, static website on S3 costs as quoted below:
Typically, it will cost $1-3/month if you are outside the AWS Free Tier limits. If you qualify for AWS Free Tier and are within the limits, hosting your static website will cost around $0.50/month.

Amazon Lambda, for a small business, will cost nothing if you write your Lambda functions correctly. I believe as much as number of invocations matter so does the time taken during the execution of your code. Keep it under 100ms, as the minimum Billing time is 100ms. My node implementation did run under 100ms so, I guess yours can too.

We used serverless framework to setup Lambda package which utilizes some additional Amazon services like Amazon Cloudwatch, Amazon CloudFormation, Amazon S3 and Amazon CloudFront e.t.c. So, keep an eye over pricing of these services as I am not sure. So far, I don't see any billing of these services. And, considering you're about to run a small store, I don't think you'll hit billing limits.

So, in most cases, you'll only pay S3 static hosting costs to keep running your small static e-commerce store. In worst case, you pay more but, not more than 5$ if you stay smart.

Apart from above costs, Stripe will also take its cut which you can view at Stripe Pricing Page. But, it's totally worth it considering the number of problems that could be solved by their services.

If you read this far, don't forget to share. I would encourage you to suggest improvements and share your opinions. Thanks.

Discussion (2)

Collapse
sammisidhu profile image
sam

Did you consider using Amazon's DynamoDB (managed NoSql database)?

Collapse
devtalhaakbar profile image
Muhammad Talha Akbar Author

You mean instead of a JSON file?