Remix Supa Stripe Stack

Twitter • Live Demo

A Remix & Stripe Stack, backed by Supabase (driven by Prisma), that integrates authentication, subscriptions (multi-currency, month and year intervals) and handling tier limit.

Remix deploy target: Fly.io

Disclaimer: This stack gives you a good starting point but it can't handle a specific business model. You'll need to adapt it to your needs and you must understand how Stripe works before going to production.

I want to thank and credit DevXO for its work on Stripe Stack which helped me a lot to build the webhook part of this stack.

Learn more about Remix Stacks.

npx create-remix --template rphlmr/supa-stripe-stack

What's in the stack

Features

• Authentication (email/password) with Supabase
• Subscriptions (default: free, tier_1, tier_2) with Stripe
  • Multi-currency (default: usd and eur)
  • Interval (default: month and year)
• A taking notes app demo with tier limits on the max number of notes (default: free = 2, tier_1 = 4, tier_2 = infinite)

Tools

• Fly app deployment with Docker
• Production-ready Supabase Database
• Healthcheck endpoint for Fly backups region fallbacks
• Email/Password Authentication with cookie-based sessions
• Database ORM with Prisma
• Forms Schema (client and server sides !) validation with Zod and React Zorm
• Styling with Tailwind
• Code formatting with Prettier
• Linting with ESLint
• Static Types with TypeScript 4.9

What's not in the stack

• Unit Testing 😶 (will try to add it)
• E2E Testing 😶 (will try to add it with Playwright))
• GitHub Actions

Why Supabase?

I love it.

Requirements

#1 Supabase project

• Create a Supabase database (the free tier gives you 2 databases)

  It'll ask you to define the Database Password. Save it somewhere, you'll need it later.

  

• Go to https://app.supabase.io/project/{PROJECT}/settings/database to find your database secrets

  

  • It's time to copy/paste some secrets from this page 👆 into your .env file
  • URI 👉 DATABASE_URL
    • Replace [YOUR-PASSWORD] with your Database Password (from the previous step)

• Go to https://app.supabase.io/project/{PROJECT}/settings/api to find your API secrets

  

  • It's time to copy/paste some secrets from this page 👆 into your .env file
  • URL 👉 SUPABASE_URL
  • anon public 👉 SUPABASE_ANON_PUBLIC
  • service_role secret 👉 SUPABASE_SERVICE_ROLE

#2 Stripe project

You'll also need to install the Stripe CLI to test the webhook locally

This CLI gives you the ability to listen Stripe webhook events and forward them to your local server.

• Create a Stripe account

• Go to https://dashboard.stripe.com/test/apikeys

  

  • It's time to copy/paste some secrets from this page 👆 into your .env file
  • Secret key 👉 STRIPE_SECRET_KEY

• As long as you're here, and let's assume you've installed the Stripe CLI, you can run the following command to start Stripe webhook listener and get your webhook signing secret

  stripe listen --forward-to localhost:3000/api/webhook
  ...
  > Ready! You are using Stripe API Version [2022-11-15]. Your webhook signing secret is whsec_d7f96cbdb268xxxxxxxxxxxxxxxx
  

  • whsec_d7f96cbdb268xxxxxxxxxxxxxxxx 👉 STRIPE_ENDPOINT_SECRET

#3 Fly project

TODO In the meantime, you can look at my other stack working with Fly

#4 Environment variables

There are other environment variables you can set in your .env file.

• SERVER_URL: the URL of your server (http://localhost:3000 in local env)
• SESSION_SECRET: a secret string used to encrypt your session cookie
• DEFAULT_CURRENCY: default currency for your Stripe subscriptions if the user currency is not supported. (only used for UI purposes)

  Note:

  The currency we show on the Pricing page is based on the user locale.See getDefaultCurrency

  It's not reliable because Stripe checkout will choose a currency based on the user's IP address.

  You can implement a better solution by using geo-ip services.

  After the user subscribe, we'll use the currency selected by Stripe.

How it works

TODO: explain the stack

TODO: explain the pricing plan

TODO: explain how to make this stack your own

Development

It's time to play with the stack 🎉

⚠️ This step only applies if you've opted out of having the Remix CLI install dependencies for you:

npx remix init

The default pricing plan included in this stack can be found in scripts/config/index.ts

Seed the database and Stripe

npm run setup

Start Stripe Webhook listener

It is mandatory to test the webhook locally.

Stripe sends webhook events to your server when a customer subscribes, cancels, or updates their subscription.

Stripe events are sent to the /api/webhook endpoint.

stripe listen --forward-to localhost:3000/api/webhook

Start the server

With the Stripe webhook listener running, open a new terminal and use the command to start a development server:

npm run dev

Both the listener and the development server must be running concurrently in separate terminals for the app to work.

Notes

Test credit card: 4242424242424242 Date 12/33 CVC 123

More cards: https://stripe.com/docs/testing?testing-method=card-numbers#cards