Skip to content
⚡️Typographic is a webfont service (and demo) built with Stripe Billing.
Branch: master
Clone or download
rlk-stripe Merge pull request #14 from stripe/bump-nodemon
Bumped nodemon version to remove flatmap-stream package
Latest commit a3ae974 Nov 27, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
client Fixed typos May 2, 2018
screenshots Updating README. May 2, 2018
server add comment, remove debug lines Sep 14, 2018
.env.example Update to latest Stripe API version May 22, 2018
.gitignore Initial commit of Typographic. May 2, 2018
LICENSE Initial commit of Typographic. May 2, 2018 Fix link to locahost in README May 22, 2018
app.example.yaml Initial commit of Typographic. May 2, 2018
config.js Initial commit of Typographic. May 2, 2018
package.json Bumped nodemon version to remove malicious package Nov 27, 2018

Typographic: Stripe Billing Demo

Typographic is a sample web application for a hosted webfont service built with Stripe Billing and Elements. This is a complete Stripe integration that subscribes users to multiple plans (with monthly and metered billing), uses tiered pricing , tracks metered usage, and provides invoices.

You can try the app live at


Typographic is a complete, full-stack example of a Stripe Billing integration:

🗂 Multiple plans. Each level of service (Starter, Growth, and Enterprise) include monthly and metered plans.
💸 Tiered pricing. Metered plans use tiered pricing to build a sophisticated pay-as-you-go billing model with graduated pricing.
📈 Usage records. Metered usage is tracked with the Usage Record API.
💌 Hosted invoices. Users can pay via credit card or receive a hosted invoice by email.
📬 Upcoming invoices. Estimated costs for the next billing cycle are calculated using the Invoices API (based on monthly and metered usage).
⚡️ Products and Plans. Typographic uses the Stripe Products and Plans APIs.
💳 Card payments with Elements. This demo uses pre-built Stripe components customized to fit the app design, including the Card Element which provides real-time validation, formatting, and autofill.
🌏 Vue.js frontend. Single-page Vue app demonstrating how to use Elements in a component-based web framework.
☕️ Node.js backend. An Express server manages billing and user data between the database and Stripe's API.
📦 Database support. Uses Knex.js and SQLite (by default) to demonstrate a data modeling pattern for the Billing API.
🔑 User authentication. JSON web tokens (JWT) and an Express authentication scheme are included for user login and registration.

Stripe Billing Integration

This repository includes two components:

Here are a few key files where we interact with Stripe's platform:


You'll need a Stripe account to manage customer subscriptions and payments. Sign up for free before running the application.

Typographic also requires Node.js >=8.x to run this app.

Getting Started

Install dependencies using npm (or yarn):

npm install

Copy the example .env file. You'll need to fill out two details:

cp .env.example .env

If this is your first time running the app, you'll need to set up the app:

npm run setup

Run the app:

npm start

Go to http://localhost:3000 in your browser to start using Typographic.

Resetting Data

If you'd like to wipe the slate clean and start with a fresh environment, you can wipe all test data from your Stripe account, then rebuild your local database:

npm run setup

This recreates the tables Typographic uses in its local database.


You can’t perform that action at this time.