A free, open source e-commerce platform for static websites.
JavaScript Makefile CSS HTML
Latest commit f3f6050 Oct 24, 2016 @christophercliff Add cost data.
Permalink
Failed to load latest commit information.
packages v3.0.1 Aug 19, 2016
.gitignore Add flatmarket-aws. Aug 17, 2016
LICENSE.md Create library. Jul 25, 2015
Makefile Cleanup Makefile. Aug 19, 2016
README.md Add cost data. Oct 24, 2016
architecture.nomnoml Create monorepo. Aug 4, 2016
architecture.png Create monorepo. Aug 4, 2016
circle.yml Add flatmarket-aws. Aug 17, 2016
lerna.json v3.0.1 Aug 19, 2016
package.json Remove top-level version. Aug 18, 2016

README.md

Lerna

Flatmarket

Build Status codecov.io

Flatmarket is a free, open source e-commerce platform for static websites. It offers the performance, reliability, and simplicity of a static website combined with secure and scalable payment processing.

The platform uses Stripe for payment processing and it's built on the latest web technologies like hapi, React, and Webpack. The backend can be deployed automatically to AWS Lambda.

At its core is a batteries-included CLI to help you get started quickly. Modules are also packaged individually so you can customize your rig.

Features

  • Automated deployment to AWS Lambda
  • Customizable React UI (or use whatever frontend you prefer)
  • Separate billing and shipping addresses
  • Subscription billing
  • Supports many global currencies
  • Manual charge authorization
  • Bitcoin
  • Mobile-ready
  • Email receipts

Demo

👉 christophercliff.com/flatmarket/

You can complete checkout using credit card number 4242 4242 4242 4242. A test charge will be created in Stripe, so do not submit personal information.

How it works

Flatmarket is a static website generator paired with a proxy server for sending payments to Stripe. The static website content is generated from a public schema document. The proxy server reads from that document during checkout to prevent charge tampering. Once the proxy server is deployed, all content and configuration updates are made via the static website.

Creating a charge

architecture

  1. The web browser loads the static website from the static web server.
  2. The web browser obtains a token from Stripe via Stripe Checkout.
  3. The web browser submits the token and product ID to the Flatmarket service.
  4. The Flatmarket service reads the product price from the schema document on the static web server.
  5. The Flatmarket service submits the charge to Stripe.

Cost to Operate

This data is for the Flatmarket demo for the month of September, 2016.

Sales
Gross volume $2,586
Successful charges 213
Operating costs
Static website (GitHub Pages) $0.00
Flatmarket service (AWS) $0.82
DNS/SSL (CloudFlare) $0.00
Total $0.82

Documentation

Installation

Install the CLI:

npm install flatmarket-cli

Creating the schema

The schema is a JSON document that conforms to the flatmarket-schema spec. It contains information about individual products (e.g. description, price, images), Stripe configuration (e.g. currency, addresses) and any other data needed to render the static website. It looks like this. By convention, this document should be located at src/flatmarket.json.

Developing locally

The Flatmarket CLI comes with a local development server so you can preview your website and create charges with your Stripe test keys. The following command will build your website and start a development server at https://127.0.0.1:8000/ (note the https).

./node_modules/.bin/flatmarket ./src/flatmarket.json \
    --stripe-secret-key YOUR_TEST_SECRET_KEY \
    --dev

An example project is included to help you get started.

Deploying the proxy server

Automated deployments

Platform Deploy  
AWS Deploy to AWS Docs

Manual deployments

Building & deploying the static website

When you're finished with development, generate a production-ready build of the static website.

./node_modules/.bin/flatmarket ./src/flatmarket.json

Then upload the files to your preferred web server.

Using themes

A theme is a container component that gets bound to the Redux store implemented by flatmarket-ui.

Themes are defined by a single React component but can contain multiple child components, CSS, fonts, and images. Flatmarket uses Webpack loaders to import non-JavaScript file types. The following loaders are supported by default:

To use a theme, run:

./node_modules/.bin/flatmarket ./src/flatmarket.json \
    --component ./path/to/your-theme.jsx

Included Themes

Developers

Install dependencies:

npm install
make reset

Run tests:

make test

Run the example locally:

make example-dev

License

See LICENSE.