When I say free ecommerce website, I mean you sell things on your website without relying on any third party CMS like Shopify, Woocommerce, Prestashop, etc.

You can use a static website or a static site generator like Jekyll, Gatsby, Hugo, etc. The catch here is that we use the payment gateway as our backend!

It is possible using stripe. And in India, I use Razorpay which is pretty similar to stripe. I will explain both in this post.

Check out the website - Crocodaily

The above website uses no CMS. It uses GitHub free hostig and a payment gateway to get order and customer details. So I do not pay anything to run this website.

Why free ecommerce?

There are plenty of good options to choose from. There is Snipcart which is pretty good($10/month). There is Shopify Lite($9/month). There is Woocommerce which I do not recommend to anyone(free but you have to pay for hosting it somewhere). There is Prestashop, which again needs a proper hosting.

I pay ₹0 for hosting, e-commerce, and emails!

All these options are good but when I have just 4 to 10 products, should I pay the monthly fee plus transaction fee? I’m being cheap here(Indian cheap). I know these CMSs offer good services like order management, tracking, etc. But I can manage that manually for now and I would like to create something that I can completely control.

Ecommerce in India

Indian ecommerce is booming. There are plenty of sellers who prefer selling their products or services online either through Amazon, Flipkart, or through their website and some people don’t even use a website. They do it over Facebook, OLX, Quickr etc.

I think I’m trying it late. I have seen people being successful in selling things online. Someone who wants to start selling right away, can use this idea and eventually move on to other better platforms.

Free ecommerce the solution?

This is a solution and not the solution. Anyone reading this and thinking this is all rosy then I tell you that it isn’t. It’s painful.

It takes a lot of time to set it up correctly. If you get this done by a developer then he/she might charge you at least $500 which is around 4 years subscription of Shopify Lite!

Simple solution

I have used Woocommerce, Prestashop, Shopify, and Snipcart. I like Shopify. I recommend it to anyone who wants to start their business online. But as I mentioned earlier I wanted to try something on my own.

I wanted a simple solution which gives me an easy option to just click on a button and buy stuff. This is easy using PayPal, Stripe, or any other payment gateway. Because all you need is a link that opens on a button click.

It was too simple for my case at least. I had to collect order data(product and quantity) and customer data(name, address, phone, etc) and give them an option to buy multiple products at once. So I need a cart and a place to store these data.

Razorpay notes or Stripe metadata

One of these days working on a client’s website which uses Razorpay as the payment Gateway. I was asked to get the user’s PAN number(Tax identification number) when they donate.

I found out that there is something called notes in Razorpay which can be used to get custom data from the frontend. All I had to do was provide a form with fields. Collect the form data, push it to the Razorpay notes field. This to me seemed to be the simplest way to collect order and customer data.

{
  "id": "order_6JUYuvmgCLfgjY",
  "entity": "order",
  "amount": 50000,
  "currency": "INR",
  "attempts": 0,
  "status": "created",
  "receipt": "receipt#42",
  "notes": {
    "customer_name": "Sharath",
    "address_1": "apple street",
    "address_2": "ball disctrict, cat state, dog pin",
    "cart": "3 black elephants"
  },
  "created_at": 1474013013
}

In the above snippet, you can see the notes object where you can add any custom field you fancy.

With this idea in mind, I started building the Crocodaily website. I had a few challenges. I had to implement a cart functionality. If you have worked on creating a cart by scratch, you will know the pain. The cart should be stored in the sessionStorage of the browser. That one was a hard nut to crack.

If you are using Stripe as a payment gateway then you can check out metadata where you can collect cart and customer details.

Cart solution?

Eventually, I found this nice little cart on codepen which was perfect for my case.

I had to do a few changes to it to adopt it on my website.

Email to customers?

When an order goes through, there was no confirmation email sent to the customers. Only Razorpay payment email was sent.

I wanted a custom email to be sent to our customers with the details of the items they have ordered and their address(in case they want to change it).

Luckily, Razorpay has a webhook that sends all these data in JSON format to any URL you specify in its dashboard. So the data was available, I just had to catch it.

I had previously worked on PHP-Mailer to design a form for one of my clients. I chose PHP-Mailer because the client wanted an email to be sent - with a file attachment - whenever someone uploads a file through their form. This came in handy for my application.

I created a free PHP app on heroku with PHP-Mailer installed using composer and wrote a code to catch the POST data sent by Razorpay. I specified the heroku app URL in Razorpay webhook.

This took several trial and errors and finally worked. My next idea is to write the customer details into a Google Spreadsheet as and when the orders happen.

Limitations

Well, there are plenty of limitations. Since the data is manually collected, you have to decide how to use it. In other services, you get this nice little printable customer address and invoice. We don’t have that luxury.

Tracking the shipping is usually done in these CMSs which isn’t possible in our economic ecommerce solution.

Svelte for improvements?

I plan to improve this using Svelte components and speed up the already fast website. This will take a while and I will put the updates here once I implement it.

Crocodaily is now built using Svelte!

Svelte made many logics easy which were harder to implement using Vanilla JavaScript. I have used React, played with Vue but Svelte is something else. I recommend newbie web devs to try it.

Conclusion

This is a completely free ecommerce solution as long as the payment gateways provide custom field options. Try this out if you have simple products say Books to sell. If you have too many products and many variants then stick to Shopify or Snipcart.

I still think $9/month is better than going through all these hacks. You can do it for a good learning experience though.