/subscription-use-cases

Create subscriptions with fixed prices or usage based billing.

Primary LanguageJavaScriptMIT LicenseMIT

Set up subscriptions with Stripe Billing

This sample shows how to create a customer and subscribe them to a plan with Stripe Billing. For the official documentation for Stripe billing checkout the overview.

Checkout Fixed-price-subscriptions with Elements Usage-based-subscriptions with Elements Per-seat-subscriptions with Elements
Demo checkout.stripe.dev
Define prices in: CLI, Dashboard, or API Create a price with the Stripe: CLI, Dashboard, or API. ✅ ✅ ✅ ✅
Charge users a fixed price on a recurring basis Create a subscription with a fixed price recurring monthly/yearly/etc. ✅ ✅
Charge users per seat on a recurring basis. Create a subscription that charges based on the amount of seats used. ✅ ✅
Charge customers based on their usage. Create a metered subscriptions so you can charge customers based on their usage. ✅ ✅
Apple Pay & Google Pay support ✅ Built in, no extra code needed
Coupon support for subscriptions ✅ ✅ ✅ ✅

The hosted demos linked above are running in test mode -- use 4242424242424242 as a test card number with any CVC + future expiration date.

Use the 4000002500003155 test card number to trigger a 3D Secure challenge flow.

Read more about test cards on Stripe at https://stripe.com/docs/testing.

Run the sample locally

This sample can be installed two ways -- Stripe CLI or git clone. The .env configuration will vary depending on which way you install.

Requirements

Installing the sample

The Stripe CLI is the fastest way to clone and configure a sample to run locally and is the recommended approach as it will only download the code required for the server language you select. Alternatively, you can download and run directly with this repository.

Option 1: Installing with Stripe CLI

  1. If you haven't already installed the CLI, follow the installation steps. The CLI is useful for cloning samples and locally testing webhooks and Stripe integrations.

  2. Ensure the CLI is linked to your Stripe account by running:

stripe login
  1. Start the sample installer and follow the prompts with:
stripe samples create subscription-use-cases

The CLI will walk you through picking your integration type, server and client languages, and partially configuring your .env file with your Stripe API keys.

  1. Move into the server directory:
cd subscription-use-cases/server
  1. Open server/.env and set the ID values for BASIC and PREMIUM to the IDs of two Prices from your Stripe account. The API keys should already have been configured by the Stripe CLI. The STATIC_DIR value should be ../client when installed using the Stripe CLI.
# Billing variables
BASIC=price_12345...
PREMIUM=price_7890...


# Stripe keys
STRIPE_PUBLISHABLE_KEY=pk_12345
STRIPE_SECRET_KEY=sk_12345
STRIPE_WEBHOOK_SECRET=whsec_1234

# Stripe key for React front end
REACT_APP_STRIPE_PUBLISHABLE_KEY=pk_12345

# Environment variables
STATIC_DIR=../client

  1. Follow the instructions in server/README.md for how to build and/or run the server.

  2. View in the browser: localhost:4242 and test with 4242424242424242.

  3. [Optional] Forward webhook events

You can use the Stripe CLI to forward webhook events to your server running locally.

stripe listen --forward-to localhost:4242/webhook

You should see events logged in the console where the CLI is running.

When you are ready to create a live webhook endpoint, follow our guide in the docs on configuring a webhook endpoint in the dashboard.

Option 2: Installing manually

If you do not want to use the Stripe CLI, you can manually clone and configure the sample:

  1. Clone the repository
git clone git@github.com:stripe-samples/subscription-use-cases.git
cd subscription-use-cases
  1. Configure .env

The .env file contains the API keys and some settings to enable the sample to run with data for your Stripe account.

Copy the .env.example file from the root of the project into a file named .env in the folder of the server language you want to use. For example with node:

cp .env.example fixed-price-subscriptions/server/node/.env
cd fixed-price-subscriptions/server/node

For example with ruby:

cp .env.example fixed-price-subscriptions/server/ruby/.env
cd fixed-price-subscriptions/server/ruby
  1. Edit the copied .env and populate all of the variables. For more information see: .env config
# Stripe keys
STRIPE_PUBLISHABLE_KEY=pk_12345
STRIPE_SECRET_KEY=sk_12345
STRIPE_WEBHOOK_SECRET=whsec_1234

# Stripe key for React front end
REACT_APP_STRIPE_PUBLISHABLE_KEY=pk_12345

# Billing variables
BASIC=price_12345...
PREMIUM=price_7890...

# Environment variables
STATIC_DIR=../../client/vanillajs
  1. Follow the server instructions on how to run:

Pick the server language you want and follow the instructions in the server folder README on how to run.

cd fixed-price-subscriptions/server/node # there's a README in this folder with instructions
npm install
npm start
  1. [Optional] Forward webhook events

You can use the Stripe CLI to forward webhook events to your server running locally.

If you haven't already, install the CLI and link your Stripe account.

stripe listen --forward-to localhost:4242/webhook

You should see events logged in the console where the CLI is running.

When you are ready to create a live webhook endpoint, follow our guide in the docs on configuring a webhook endpoint in the dashboard.

How to create Prices

With the Stripe CLI

Run the following commands and copy the resulting IDs.

stripe prices create --unit-amount 500 --currency usd -d "recurring[interval]=month" -d "product_data[name]=basic"
stripe prices create --unit-amount 900 --currency usd -d "recurring[interval]=month" -d "product_data[name]=premium"

Or from the Dashbaord

  1. From the Stripe dashboard go to Products > Add product
  2. Fill in the product name Basic and the value ($5/month) for the price and save
  3. Repeat and create a SECOND product and price, this time with Premium and ($12/month)

.env config

Example configuration file .env.example

  • STRIPE_PUBLISHABLE_KEY: Found in the dashboard here: https://dashboard.stripe.com/test/apikeys
  • STRIPE_SECRET_KEY: Found in the dashboard here: https://dashboard.stripe.com/test/apikeys
  • STRIPE_WEBHOOK_SECRET: If using the Stripe CLI (recommended) run stripe listen --print-secret, otherwise you can find the signing secret for the webhook endpoint in the dashboard by viewing the details of the endpoint here: https://dashboard.stripe.com/test/webhooks.
  • STATIC_DIR: The path to the directory containing the client side code. For vanillajs on the client, this will be ../../client/vanillajs.
  • BASIC: The ID of the basic Price. You can find this in the Stripe dashboard by viewing the basic product created earlier.
  • PREMIUM: The ID of the premium Price. You can find this in the Stripe dashboard by viewing the premium product created earlier.

FAQ

Q: Why did you pick these frameworks?

A: We chose the most minimal framework to convey the key Stripe calls and concepts you need to understand. These demos are meant as an educational tool that helps you roadmap how to integrate Stripe within your own system independent of the framework.

Get support

If you found a bug or want to suggest a new [feature/use case/sample], please file an issue.

If you have questions, comments, or need help with code, we're here to help:

Sign up to stay updated with developer news.

Author(s)