Skip to content

⚡️Typographic is a webfont service (and demo) built with Stripe Billing.

License

Notifications You must be signed in to change notification settings

stripe/stripe-billing-typographic

Repository files navigation

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.io.

Overview

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

Features
🗂 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:

Requirements

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.

Credits