Stripe Configuration
MakerKit offers support for subscriptions and payments using Stripe.
To get started with Stripe Checkout, you will need to create an account using the Stripe website.
If you want, you can get your business details sorted right away. If you want to continue with the set-up, you can skip it for now and get back to it later.
Configuration
Visit the Stripe Checkout Tutorial where we can copy the configuration for our development environment.
If you click on the file .env
of the code editor on the right-hand side,
you will be able to see the variables needed:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
STRIPE_SECRET_KEY
STRIPE_WEBHOOK_SECRET
Copy these values to your local .env
file.
Creating your SaaS plans in Stripe
Stripe allows us to create our plans using the UI in the Stripe Dashboard.
To get started, let's add a couple of testing plans that you can use while developing your application.
Visit the Stripe Dashboard and add a new product (for example, a one-time purchase or a SaaS subscription).
You can add multiple "prices": for example, if you're defining a subscription, you could use two plans, "Basic" and "Pro".
They are the default plans in MakerKit, so it's good to start with these for playing around with Stripe: you can change them later on.
Now that we have created the plans, we need to set the plan IDs in your
configuration. Open the file ~/configuration.ts
and set the
stripePriceId
property with IDs of your plans:
{
name: 'Basic',
description: 'Unlimited applications and 2-hour onboarding session',
price: '$249/year',
stripePriceId: '<YOUR_PRICE_ID_GOES_HERE>',
}
Install The Stripe CLI
The Stripe CLI is required to help us test our integration. Please follow this guide to install the CLI on your system.
Connect CLI with your account
To connect the Stripe CLI with your account, run the following command:
npm run stripe:listen
The CLI should prompt you to connect your account. If you signed in already, visit the link and follow the instructions.
If you followed the instructions, get back to the terminal, and then copy
the webhook secret to your STRIPE_WEBHOOK_SECRET
environment variables in the
.env
file.
Restart the next.js server to apply the changes.
Billing Portal
MakerKit uses the Stripe Billing Portal to let your users manage their invoices and subscriptions.
The portal becomes accessible once the organization subscribes to a plan, which creates a customerId
property, making it possible for the organization to access the portal.
Enabling the Billing Portal in test mode
Please visit the Stripe Billing Page to enable the Billing Portal.
Choose the settings that best apply to your product and save your changes.
The only required fields to get started are Terms of Service
and
Privacy
URLs. You can add any URL at this stage. However, remember to update these pages when you go live.