Get paid with Stripe

MakerKit makes it super-easy to add Stripe payment and subscriptions to your Firebase and Next.js application. Learn how!

2 min read
Cover Image for Get paid with Stripe

Hey everyone, happy new year!

Here at MakerKit, I started my 2022... making, of course!

More specifically, I improved MakerKit to support payments and subscriptions using Stripe Checkout!

The last time I had used Stripe, the Checkout product was still unavailable: it is incredible the amount of work it can save developers.

As incredible as is, Stripe Checkout cannot do everything for you. This is where MakerKit jumps in.

At MakerKit, I wanted to make it dead-easy to define your Stripe plans, automatically create a plan selector, and enable your app to handle the webhooks received by Stripe to update your application's database accordingly.

With this release, this is all possible.

Defining the Plans

After having added and configured the plans in Stripe, we do the same in your application.

We're going to add the plans to the ~/configuration.ts file, which is where we store most of our application's config:

configuration.ts
plans: [
    {
      name: 'Basic',
      description: '3 users and 10 todos',
      price: '$249/year',
      stripePriceId: '<STRIPE_PRICE_ID>',
    },
    {
      name: 'Pro',
      description: 'Unlimited users and todos',
      price: '$999/year',
      stripePriceId: '<STRIPE_PRICE_ID>',
    },
  ]

These are already configured to work with the PlanSelector.tsx component, which pulls the plans from the configuration and creates a checkbox with the data entered.

It's going to look similar to the below:

You can select a plan by clicking on one and then proceeding by clicking on "Continue to Checkout".

Loading video...

Checkout

Once a plan gets selected, the user can then continue to Stripe Checkout, which is a page hosted and managed by Stripe.

Once selected and subscribed to plan the user gets redirected back to the subscription page.

Loading video...

Billing Portal

Once the user has subscribed, they should also be able to perform the following actions:

  • cancel the plan
  • update to a new plan
  • update payment method
  • see previous invoices

Thankfully, the Stripe Portal can handle most of these for us!

The application's side (MakerKit) takes care of handling the webhooks sent by Stripe when the user takes any of the actions above.

Loading video...

In the video above, the user accessed the Stripe billing portal, canceled their plan, and then went back to the subscriptions page.

The user can now pick a plan again or visit their Billing Portal (as we now can identify the user with a Stripe ID), so that they can manage their billing settings directly from the customer portal.

Documentation

Check out the documentation for setting up Stripe and MakerKit.

Thank you for reading so far! If you have any questions, please contact us.


Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS

Read more about Changelog

Cover Image for Announcing: Makerkit now supports Lemon Squeezy subscriptions! 馃崑

Announcing: Makerkit now supports Lemon Squeezy subscriptions! 馃崑

2 min read
Announcing support for Lemon Squeezy subscriptions in Makerkit. It's now possible to use a MoR to power your Makerkit app.
Cover Image for Announcing support for Multi-Factor Authentication (MFA) with Supabase

Announcing support for Multi-Factor Authentication (MFA) with Supabase

3 min read
A sneak peek to our coming feature for Multi-Factor Authentication (MFA) with Supabase.
Cover Image for A sneak peek at the Supabase and Next.js RSC SaaS kit

A sneak peek at the Supabase and Next.js RSC SaaS kit

9 min read
A behind the scenes look at how we built the Supabase and Next.js RSC SaaS Starter.
Cover Image for Makerkit 鉂わ笍 Radix UI

Makerkit 鉂わ笍 Radix UI

2 min read
Makerkit migrated its UI Components to Radix UI, bringing a new look and feel to the platform.
Cover Image for Changelog: New Stripe Subscriptions Pages

Changelog: New Stripe Subscriptions Pages

3 min read
We've redesigned the Makerkit subscriptions pages. Let's take a look at the new design.
Cover Image for Planning Makerkit's 2023

Planning Makerkit's 2023

2 min read
A plan for the coming year at Makerkit. New kits, new blog posts, new documentation, courses, and more.