This sample shows how to build a coffee roastery themed SaaS platform using Stripe Checkout and Stripe Connect, where coffee roasteries can signup to get their website and wholesale shop with just a few clicks. The Roastery platform takes an application fee for every transaction happening on the platform.
Platform owners re on-boarded using Stripe Connect Standard where they connect their existing Stripe account. When the marketplace accepts funds via card payments, the funds are routed to the seller's Stripe accounts as a part of each marketplace transaction.
See a hosted version of the https://roastery.stripe.dev
- Basic user authentication system.
- Stripe onboarding using Stripe Connect Standard.
- Payments via Stripe Checkout.
- Basic platform website for each platform.
- Custom platform dashboard.
The marketplace is implemented as as full-stack application powered by Next.js and contains a React front-end, and a Node.js REST API.
The app renders its React components as both the server and client-side using isomorphic rendering.
- Authentication system using JWT tokens with login and signup pages.
- Storage using LowDB to provide a basic local JSON database.
- REST API scaffolding with authentication endpoints for resources like
listings,login,payouts,profile,signup,transactions, andusers. - Card payments are accepted via Payment Intents API + Stripe Elements and is integrated via
react-stripe-elements
To run this sample locally all you need is checkout the repo and run the app.
You will need a Stripe account with its own set of API keys, and enable a few features for your Stripe Account.
Don't worry, just follow the steps in this guide.
1. Clone and configure the sample
git clone [email protected]:stripe/stripe-demo-connect-roastery-saas-platform.git
2. Configure Stripe
The first thing you need to do is to Create a Connect platform. You do that by going to https://dashboard.stripe.com/test/connect/overview.
Once you have registered your Connect platform, you can now generate a Connect User Id. You need this together with your Stripe API keys.
2. Get Stripe API keys and configure environment variables
Go to the Stripe developer dashboard to find your API keys (developer settings), and your Connect User Id (Connect settings).
Copy the .env.example file into a file named .env in the folder of the server you want to use. For example:
cp .env.example .env
Now copy your Stripe API keys and Connect User id into your .env file:
STRIPE_PUBLIC_KEY=<replace-with-your-publishable-key>
STRIPE_SECRET_KEY=<replace-with-your-secret-key>
STRIPE_CLIENT_ID=<replace-with-your-connect-client-id>
Save the .env file and you should be good.
- Run
npm install - Run
npm run dev - You are now ready to use the app running in http://localhost:3000.
- The marketplace should be available, and if you go to
/loginyou should be able to login as both buyers and sellers using the demo buttons. - 🎉
Q: Why did you pick these frameworks?
A: We chose the most minimal framework to convey the key Stripe calls and concepts you need to understand. These demos are meant as an educational tool that helps you roadmap how to integrate Stripe within your own system independent of the framework.
Q: Can you show me how to build X?
A: We are always looking for new recipe ideas, please email [email protected] with your suggestion!