NOTE: this demo uses the OAuth method to connect Stripe accounts. For an example that uses the API method, see Connect Onboarding for Standard accounts.
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 Stripe Checkout
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.
3. Enable OAuth for Standard
Go to the Connect settings and enable OAuth for Standard Accounts. In addition, configure the redirect URIs for your local instance. For example, if you are running this demo locally at http://localhost:3000, you will need to add the following to the Redirects section: http://localhost:3000/stripe/callback
4. 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.
After the user completes the flow to connect their Stripe account, Stripe needs to redirect the user back to your application. You can do this with a redirect_uri parameter, but this project does not use that method. Instead, "If no redirect_uri is specified in the URL, then Stripe uses the first URI configured in your platform settings" (source). So go to your Connect settings, and under Integration > Redirects, click "Add URI", and enter http://localhost:3000/stripe/callback.
- 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!