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.

For a technical deep-dive, we recommend reading our blog post where we build the integration between Stripe and Next.js from scratch. Because the result of the blog post is a simplified version of the Makerkit's implementation, it can be very useful for understanding its code.