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

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

• 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

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

I love it.

• 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

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

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

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.

TODO: explain the stack

TODO: explain the pricing plan

TODO: explain how to make this stack your own

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

npm run setup

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

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.

Test credit card: 4242424242424242 Date 12/33 CVC 123

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