Blazing fast static eCommerce site with Hugo, Shopemaa & Stripe

E-Commerce is raising these days. And it will keep going onward & upward. There are hundreds of eCommerce service providers, but the system is still broken. One of the major issues is payment collection. Secondly, flexibility comes with super expensive costs.

On-site checkout: There are service providers who give the option to add checkout to any site. These kind of features are in high demand as it takes less technical support and easy to implement. But these kinds of features providers are expensive.

Few of them takes per transaction commission. Let’s say, you get 1000 transactions per month, per transaction of $100. Now if the service provider takes 2% commission for each transaction, then in a month the service charge becomes $2000!

Headless API & Customisation: Most of the service providers provide platform template support. These give you the option to customize the storefront, but it also imposes the restriction about what are the tools you can use. Most of them offer specific language or tools to implement the template. On the other hand, the very few providers that provide API to integrate, are expensive.

Hugo Static Site Generator: Hugo is the world’s fastest framework for building static sites. It is developed using Golang. Hugo has a super active developer community to support the users. Besides there are a large collection of Hugo templates based on different need (from personal website to eCommerce store) and these are also in a reasonable price.

Shopemaa: Shopemaa is an all-in-one eCommerce platform, provides blazing-fast GraphQL based eCommerce API. LiveMart also has prebuilt storefronts, using that you can build your online store in minutes.

In this tutorial, we will implement an eCommerce store using Hugo, Shopemaa & Stripe.

Prerequisites:
1. Open an account on Shopemaa. Choose a subscription that comes with a 1-month free trial. Feel free to write to support@shopemaa.com if you need an extension of time.
2. Basic HTML, CSS & JS knowledge

Setup Shopemaa Store

After successful registration go to Stores, create a store and generate secrets for that store (don’t share your Admin type secret with anyone, in that case, they will get full access to your store),

Then move to Dashboard.

In the dashboard go to Catalog, then Products. You will see few dummy products are already generated for you.

Collection the productId for few products, we will use that later.

You can add shipping methods from the store settings menu,

Payment Gateway Configuration (Stripe)

LiveMart currently supports 2 payment gateway Stripe & SSLCommerz. In this tutorial, we will use Stripe.
First, go to Stripe and create an account. Later go to Developers -> API Keys.

On the next screen, you will get Key & Secret. Keep them securely, you will need them later.

Now go to LiveMart to put this information there. Goto Payment Gateway,

Fill all the fields with the information you have got from Stripe. At Success callback URL put the Link where the customer will be redirected after successful payment and the Failure callback URL is the link where the customer will be redirected if it fails.

In the URL you may have {ORDER_HASH} tag and if so it will be replaced with the order hash. ie: if the URL is: http://example.com/{ORDER_HASH} and the customer is paying for the order 123 . Then the customer will be redirected to http://example.com/123 after payment.

Set Payment Processing Fee if you want the customer to pay the payment processing charge.
Allow only digital payment set to Yes, if you want to disable manual payment.
Is Disabled set to Yes, if you want to disable digital payment.

Awesome! you are done with the payment gateway configuration.

Hugo Setup

Now install Hugo. Then execute hugo new site siteName to create a hugo site.

In the above picture, we have created a Hugo site named livemart-hugo-stripe-demo. Go to the root directory of the project.

Now we will need a Hugo template to work on. For the sake of simplicity, we will use livemart-vex-hugo. To add the template executes,

git submodule add https://github.com/livemart/livemart-vex-hugo themes/livemart-vex-hugo

Now copy exampleSite to project root directory,
cp ./themes/livemart-vex-hugo/exampleSite ./../livemart-hugo-stripe-demo

Finally, goto exampleSite directory and start the Hugo server,
hugo server --themesDir ./../themes
It will start the Hugo server on 1313 port. In the browser go to http://localhost:1313 to view your site.

LiveMart & Hugo Integration

We will use LiveMart JS library to implement the checkout on Hugo.

In the above picture, we have added livemart-checkout library within the template.
livemart-checkout depends on sweet-alert & stripe, so you have to add these libraries in your project too,

Then, we have to put our credentials in config.toml. In config.toml update livemart_key with your store's app type key and livemart_secret with your store's app type secret.

And you have to call the below functions before calling any others,

let key = "{{site.Params.livemart_key}}";
let secret = "{{site.Params.livemart_secret}}";
set_store_key(key);
set_store_secret(secret);
get_store_info();

Now update content with your productId. To do that, go to content/language/products directory and update products information with productId.

Now we will move to the layout directory of the template,
themes/livemart-vex-hugo/layouts
There under products directory, there is single.html file.

So there is Add To Cart option. Now we want if the user clicks on Add To Cart then it will interact with livemart-checkout library. To do so we have added,
onclick="add_to_cart({{ .Params.id }})". So what will happen now if the user clicks on Add To Cart , the item will be added to livemart-checkout.

Now we will move to Header section of the template, to add show cart functionality.

Similar to the above process we have added here show_cart function from livemart-checkout library. So if the user clicks on the cart icon, the current cart will be shown.

From there they can move to checkout and place an order.

Now if the user clicks on the checkout, they will be asked to log in if not already.

On successful login, they will be moved to checkout.

Now if the user clicks on Place Order an order will be created and the user will be redirected to Stripe for payment.

After payment the user again will be redirected to the store. And user will get an email with the oder details.

If you check the dashboard, you will see the order details.

Awesome! Your store is ready for further operations. Now users can come to your store and place an order and pay the charge using Stripe. And it will cost you < $100 per month.

Feel free to reach out to support@livemart.xyz if you need any help.

Originally published at https://livemart.xyz on August 19, 2021.