Live Demo · Deployment Documentation · Twitter

A Stripe focused Remix Stack that integrates User Subscriptions, Authentication and Testing. Driven by Prisma ORM. Deploys to Fly.io

Features

Template features are divided into two categories: Base Features and Stack Features.

Base Features

• Database ORM with Prisma.
• Production Ready with SQLite and PostgreSQL.
• Fly app Deployment with Docker.
• GitHub Actions for Deploy on merge to Production and Staging environments.
• HealthCheck Endpoint for Fly Backups.
• Styling with TailwindCSS + Tailwind Prettier-Plugin.
• End-to-End testing with Playwright.
• Linting with ESLint.
• Code formatting with Prettier.
• Static Types with TypeScript.
• Support for Javascript developers based on remix.init.

Stack Features

• Stripe Subscriptions with support for Billing Cycles, Multi Currency and Customer Portal.
• Authentication Ready with Remix-Auth, Remix Auth OTP and Socials Strategies.
• Flat Routes with Remix Flat Routes.

Learn more about Remix Stacks.

Stripe Stack v3 has been released after the integration of Supa-Stripe-Stack from rphlmr. Special thanks to him for his great work and a big recommendation to check his implementation.

Live Demo

We've created a simple demo that displays all template provided features. Feel free to test it here.

Here's a simple workflow you can follow to test the template:

1. Visit the Live Demo.
2. Log in with your preferred authentication method.
3. Select a Subscription Plan and fill the Stripe Checkout inputs with its test values. Check Notes.

Note

Stripe test mode uses the following number: 4242 as valid values for Card Information. Type it as much times as you can on each available input to successfully complete the checkout step.

---

Getting Started

Before starting our development or even deploying our template, we'll require to setup a few things.

Template

Stripe Stack has support for multiple database choices based on Prisma. The installer will prompt a selector allowing you to choose the database your project will run on.

To get started, run the following commands in your console:

# Initialize template into your workspace:
npx create-remix@latest --template dev-xo/stripe-stack

# Select the database your project will run on:
> SQLite or PostgreSQL

# Done! 💿 Please, keep reading the documentation to Get Started.

Note

Cloning the repository instead of initializing it with the above commands, will result in a inappropriate experience. Stripe Stack uses remix.init to configure itself and prepare your environment.

Environment

We'll require a few environment variables to get our app up and running.

Authentication Envs

Stripe Stack has support for Email Code (Includes Magic Link) and Socials Authentication Strategies. Feel free to visit the links to learn more about each one and how to configure them.

Stripe Envs

In order to use Stripe Subscriptions and seed our database, we'll require to get the secret keys from our Stripe Dashboard.

1. Create a Stripe Account or use an existing one.
2. Visit API Keys section and copy the Publishable and Secret keys.
3. Paste each one of them into your .env file as STRIPE_PUBLIC_KEY and STRIPE_SECRET_KEY respectively.

Stripe Webhook Envs

In order to start receiving Stripe Events to our Webhook Endpoint, we'll require to install the Stripe CLI. Once installed run the following command in your console:

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

This should give you a Webhook Secret Key. Copy and paste it into your .env file as DEV_STRIPE_WEBHOOK_ENDPOINT.

Important

This command should be running in your console while developing.

Database

Before starting our development, we'll require to setup our Prisma Migrations. First, ensure that your Prisma Schema is configured accordingly to your needs. Check /prisma/schema.prisma to learn more about it.

Once you're done, run the following command in your console:

npx prisma migrate dev --name init --skip-seed

Seeding Database

Now that we have our database initialized, we'll require to seed it with our Stripe Plans. Check /services/stripe/plans to learn more about it.

Once you're done, run the following command in your console:

npx prisma db seed

Warning You'll require to have your Stripe Envs already configured and no Stripe Products created with the same id as the ones in /services/stripe/plans.

Development Server

Now that we have everything configured, we can start our development server. Run the following command in your console:

npm run dev

You should be able to access your app at 🎉 http://localhost:3000.

Deployment

Stripe Stack has support for SQLite and PostgreSQL databases. In order to keep a better track and an easier maintenance of each deployment documentation, we moved each one to its own file.

Visit the Deployment Docs in order to get your app to production.

GitHub Actions

GitHub Actions are used for continuous integration and deployment. Anything that gets into the main branch will be deployed to production after running tests, build, etc. Anything in the dev branch will be deployed to staging.

Testing

Playwright

We use Playwright for our End-to-End tests. You'll find those in tests/e2e directory. To run your tests in development use npm run test:e2e:dev.

Type Checking

It's recommended to get TypeScript set up for your editor (if your template uses it) to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project use npm run typecheck.

Linting

This project uses ESLint for linting. That is configured in .eslintrc.js. To run linting across the whole project use npm run lint.

Formatting

We use Prettier for auto-formatting. It's recommended to install an editor plugin to get auto-formatting on save. To run formatting across the whole project use npm run format.

This template has pre-configured prettier settings inside .prettierrc. Feel free to update each value with your preferred work style and tun the above command to format your project.

Support

If you find this template useful, support it with a Star ⭐
It helps the repository grow and gives me motivation to keep working on it. Thank you!

License

Licensed under the MIT License.