thedemodev / stripe-billing-typographic

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

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:

• 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 the PaymentMethods API.
• server/models/Plan.js: The setupPlans method 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.

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:

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

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

• Typographic code: Michael Glukhovsky
• Design: Maddie Simens
• Fonts provided by Google Fonts