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.
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:
- 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.
setupPlansmethod 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):
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:
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.