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.
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. |
This repository includes two components:
- Express server in Node.js to create and manage subscriptions via an API.
- Vue.js application with a front-end interface for the web service.
Here are a few key files where we interact with Stripe's platform:
server/models: Defines our database models and includes all the server-side interaction with Billing and Sources.server/models/Plan.js: ThesetupPlansmethod creates and manages the Products and Plans for our Stripe account.server/routes/stripeRoutes.js: Express API routes for all payments and billing actions for our front-end app.client/src/components/Payment.vue: Vue front-end component for payment options, which includes an Element to collect credit-card details.
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.
Install dependencies using npm (or yarn):
npm install
Copy the example .env file. You'll need to fill out two details:
- Your Stripe API keys
- A random 20-character string to keep user authentication secure (using JSON Web Tokens)
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.
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.
- Typographic code: Michael Glukhovsky
- Design: Maddie Simens
- Fonts provided by Google Fonts