Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Jetstream Cashier Billing Portal is a simple scaffolding billing portal to manage subscriptions, invoices and payment methods, built on top of Jetstream & Cashier Register.

Stars: ✭ 45 (-75.81%)

Mutual labels: stripe, billing

React Native Stripe Payments

Lightweight, easy to integrate and use React native library for Stripe payments (using Payment Intents) compliant with SCA (strong customer authentication)

Stars: ✭ 78 (-58.06%)

Mutual labels: stripe, payments

Stripe

A comprehensive PHP Library for the Stripe.

Stars: ✭ 256 (+37.63%)

Mutual labels: stripe, billing

Laravel Stripe Webhooks

Handle Stripe webhooks in a Laravel application

Stars: ✭ 300 (+61.29%)

Mutual labels: stripe, payments

View All Similar Projects ➔

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 186

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (15) 🔗