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
free
, tier_1
, tier_2
) with Stripe
usd
and eur
)month
and year
)free
= 2, tier_1
= 4, tier_2
= infinite)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
.env
fileURI
👉 DATABASE_URL
[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
.env
fileURL
👉 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
.env
fileSecret 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 cookieDEFAULT_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