rphlmr / supa-stripe-stack

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

supa-stripe-stack's Issues

Use tsx

Like my other projects, drop ts-node for tsx.

Hangs at "completing your checkout"

Most of the functionality here worked pretty well right out of the box, which I can't say for some of the other solutions I experimented with, so kudos for that. I followed the instructions and got it running pretty seamlessly on localhost, with one exception: it hangs at the "Completing your checkout" screen.

I did a little debugging and determined that the API request is successful, and getSubscription is working correctly. However, it returns a null value because no subscription has been created in the backend database.

When I look at the logs in the Stripe web interface, I can see that my localhost webhook is listening and has returned some POST responses with status code 200, so it's apparently not a webhook problem.

Rather, I think it's that the action function in routes/api/webhook.ts is failing to trigger.

Property 'data' does not exist on type 'SerializeDeferred<...>'

Since Remix 1.12 there is a conflict in loader return type if you return an object with a data property :'(

And ... this is the pattern I use in this stack 😅

remix-run/remix#5211

Uncaught error: Hydraton failed due to Mismatch

Hiya, so first thanks for this starter.
I've managed to get it working, however if we peek into de dev console we see a few errors related to Hydration fail, so it switches to client rendering...
Your demo has it too: https://remix-supa-stripe-stack.fly.dev/ . Although on dev you can see the errors un-minified.

Also when seeding the DB and Stripe, had to do it manually due to "run-s" not being recognized on npm run setup. I don't think an extra package is worth it for that anyways?

Thanks!

Be sure it works with Remix v2