Building a Serverless E-Commerce App with AWS Lambda, Stripe and React

Dragon’s Den (German version, “Die Höhle des Löwen” ), a television program featuring entrepreneurs pitching their business idea, offers an amazing opportunity to showcase your products and drive huge awareness to your startup. However, dealing with the enormous influx of traffic during the live broadcast is still a challenging task.

Limberly Trachten’s appearance on the GermanDragon’s Den version “Die Höhle des Löwen” and the immediate impact on site traffic.

Architecture

The bullet-proof, low-cost solution is based on a serverless architecture. Serverless is a hot topic today. A nice introduction by Martin Fowler can be found here. There are basically two types of definitions:

First it can be used to describe applications that significantly or fully depend on 3rd party services in the cloud. These types of services can be described as “Backend as a Service” (BaaS). We use Stripe as a BaaS provider for both inventory & order management and payments.

Second, it can also contain some amount of server-side logic but unlike traditional architectures the code is run as plain functions in “stateless compute containers that are event-triggered”. We use AWS Lambda as a ‘’Functions as a Service” (FaaS) provider to communicate securely with Stripe servers and provide a basic Shop API for a web-based Shop Frontend.

Shop API: To communicate with the Stripe API a secure server environment is still needed. Therefore we use AWS Lambda to execute server functions in the cloud and expose a public Shop API for products and inventory data. AWS Lambda is extremely cheap and we pay only for the time our code runs, and not for hours we rented servers for.

Shop Frontend: Instead of building the site on-demand on the server, we entirely host our shop as a static site on a content delivery network (CDN). CDNs offer improved scalability and fast load times by distributing assets globally. The current proof-of-concept site is built with Facebook’s React library.

In September 2015, Stripe launched a new product Relay that allows retailers to sell goods directly in social networking and content apps. Currently, we solely use Relay’s inventory & order management features for our site. In addition to that, the architecture could leverage Relay’s built-in distribution capabilities and effortlessly add additional customer touch points such as social, voice or messenger bots. For more information take a look at the Stripe Relay documentation.

III. Implementation

Let’s start building. First, we setup the product inventory. Second, we build a Shop API to make our product inventory publicly available. Third, we build the Shop Frontend to showcase our product inventory. Fourth, we include a payment method. Lastly, we send an order from our site to Stripe.

Setup the product inventory & order management

2. Click on “Create your first product” in the dashboard’s products section and fill in some product details (ID, Name, Description, Images)

Product details view

3. Add SKUs (Stock Keeping Units) to the created product. Each product can be linked to one or many variants taking into account any combination of attributes (such as color, sizes) and cost. Note: A customer buys a variant of a product (e.g. specific color and size combination), not the product.

Please note: This is only a proof-of-concept site, more components such as multiple products, categories etc, can easily be added in the future.

Build the Shop API

To communicate with the Stripe API a secure server environment is still needed. The secret key can be found in the API section of the Stripe dashboard. We use AWS Lambda to execute server functions in the cloud and expose a public Shop API for products and inventory data.