Selling on the Jamstack

8 min read
by Andrew Underwood
July 22, 2020

Jamstack is here, and boy has it made its mark. The Jamstack has not only improved the developer experience, but the experience of those consuming Jamstack delivered websites and apps. As this ecosystem matures, the number of developer tools and frameworks available for building businesses on the Jamstack grows each year.

As an industry, commerce is seeing a growing interest amongst the Jamstack community to build higher performing, and converting sites. The days of running an online store with a monolithic single tenant platform like Magento or Drupal are slowly fading away.

At Commerce.js, we’re proud to be building tools and resources that support Jamstack development for commerce. Let’s take a closer look at commerce on the Jamstack.

Jamstack for commerce

Websites that don’t rely on a web server are classified as Jamstack. One area of the Jamstack which is hugely popular is Static Site Generators (SSGs). This is because SSGs do all of the build and heavy work upfront, without your customers having to wait on roundtrips to the database between each page load.

For commerce sites, there is a strong correlation between time taken to load a page and the abandoned cart and checkout rate. The TLDR is; the faster and smoother your site is, the more likely customers will purchase from you. With the rise of Jamstack, we can address most of the speed, and reliability issues by building pages that are progressively enhanced, and deployed to as close to the customer as possible. In most cases, this is done via a globally distributed CDN (Content Delivery Network).

Just because a website may be static, doesn’t mean it can’t also be dynamic. As well as the rise of Jamstack, we’ve also seen a trend towards software engineers relying on serverless functions to connect and power their Jamstack-first websites and apps.

Commerce APIs

It’s 2020. Whether you’re a developer building solutions or a consumer interacting with brands, APIs are everywhere. When we pay for goods online, receive emails, or SMS notifications, it’s most likely being handled by a third-party API.

One proponent of moving away from the monolith is no doubt the variety in APIs available for very specific functionalities. Who wants to rely on one tool that does an average job at everything? Instead, we can pick from a variety of best of breed tools that suit specific business needs and help to out-pace our competitors in all areas. APIs allow businesses to stay ahead by piping functionality into their business with speed and ease.

Commerce.js SDK visual

You could argue that having many tools adds a lot more complexity to any project, but thanks to variety of frontend frameworks, and backend services, we can easily build eCommerce apps in a way that isn’t tied to one provider.

If we consider the term “microservices”, we can use each of the APIs individually. If you really want to leverage the Jamstack, you should perform API actions from user events. This means you can quickly replace your email or SMS provider with another, simply by updating your serverless function code. This wasn’t possible with the traditional monolith.

While building on the Jamstack gives us variety in the tools we use, how do we know who does what, who does it best, and how do we even discover the “best of breed” APIs out there?

Headless Commerce

We built HeadlessCommerce.org as a resource for eCommerce developers and business builders to discover the tools that fit their needs. We introduced a filter that allows you to search across Commerce, Hosting, Communication, Search, Shipping, Payments, and more.

Head to HeadlessCommerce to discover complimentary tools that play nice with a headless stack.

Breaking down the monolith

Let’s begin by taking a quick look at some of the resources available while building your own commerce stack.

Commerce

It’s no secret that we’re a little biased when it comes to commerce solutions, but not everybody is looking for an eCommerce API like Chec/Commerce.js. Tools like Snipcart, Payhere, Apicart, and others give you enough flexibility to use as much or as little as you need when it comes to selling your goods online.

Most of these services don’t lock you into their platforms, either by allowing you to manage your inventory outside or by providing JavaScript embeds to sell right within your existing site. Side note, we also have no-code storefronts and lightweight JS embeds for selling on your existing site 😉 .

There are plenty of open source commerce options available too with solutions like Vendure, a headless GraphQL eCommerce platform built with TypeScript, all available on GitHub.

Communication

Looking to send order or shipping notifications to your customers? API-first SMS services like SendGrid, Twilio, and Postmark have your back.

Looking to engage with your customer base via email? Tools like MailChimp, and Dyspatch make it super easy for your marketing team to send offers to your customers. Most of these platforms integrate with each other, or provide a mechanism such as webhooks to make integrating these super easy.

CMS

Give your customers something to explore and let them get to know the company behind the products. Using a Content Management System (CMS) allows teams outside of development to manage and create marketing pages on your site.

Headless CMS’s like GraphCMS, Sanity, and Contentful are popular choices for enriching product data with rich text, reviews, and related products.

There’s no need to rely on the commerce API to do everything for you. Offload some of that to the CMS, and make use of the APIs to source multiple content sources to build your product, and marketing pages.

Authentication

Nearly all commerce experiences give us the option to “save details for later”, or “login to view order history”. For those providers who don’t provide an API for “customers” or “users” out of the box, you can make use of services such as Auth0, or Netlify Identity to manage your customers.

Along with the CMS, you can bridge the gap with some serverless functions to store your customer, and order details for retrieval later.

Browsing through products, and filtering to find the right one for your needs involves some serious background work to make it reliable, fast, and flexible. Whether you want full text or faceted search, you’re going to need something robust enough to do this for you.

Elastic and Algolia are probably the most well known APIs for search on the web. Of course we could opt for a JavaScript library to search products, but depending on your inventory size, this might be better served by an API.

Search doesn’t have to be boring either. Algolia ships with a fantastic InstantSearch library that makes building search UIs a breeze. Get blazing fast search on your store in no time at all with ready to go JavaScript components.

Tax

Sales tax is something that can very quickly increase project scope when building your custom storefront, especially if you are selling globally. Save time by offloading your tax worries to services like TaxJar, Avalara, and TaxCloud.

These specilized tax services will almost always be more powerful than what any commerce platform provides out of the box.

Hosting

One of the biggest benefits of the Jamstack is by building all markup/assets at build time, and deploying them to the CDN. Services such as Vercel and Netlify provide one click continuous deployment with your favourite version control platform.

As most of the Jamstack hosting platforms provide CI/CD (Continuous Integration/Continuous Delivery) out of the box, this also works very nicely with automated builds. Build hooks allow you to attach your content source with the hosting provider. This means you can trigger builds when content changes in your CMS or PIM.

Payments

Unless your products are free, you’ll want to take money from your customers. Thankfully there are an array of different payment providers available that take care of all of the heavy lifting when it comes to moving money.

Whether you sell a one-off product, or a subscription, you’ll want to a robust platform that can take care of it for you. Most payment gateways such as Stripe, Mollie, Braintree, and Adyen allow you to be the middleman. So if you’re starting an on-demand service such as Uber, or Lyft, you can take a fee for letting customers use your platform.

Shipping

Once your customers have paid for items, you’ll want to ship them. Integrating a shipping API such as Shippo, or EasyPost gives you all you need to provide the best experience for your users. No matter where your customers are located, give them the available shipping options, and use the available APIs to automatically arrange collection of sold products.

Start selling on the Jamstack

So what are you waiting for? As you can see, selling on the Jamstack has never been easier. Choose best of breed tools that suit your needs today, and then optimize as you grow.

Discover more of the services, and categories at headlesscommerce.org where you can subscribe to updates to get the very latest curated commerce resources right to your inbox.

You might also like