This guide will show you how set up Flowglad in your app. It’s optimized for Next.js, but it can be adapted for any React + Node.js application.

​
Before starting…

Join our Discord

  • Get help fast from the founders and others building in public.

Star on GitHub

  • Support the project and follow our open source roadmap.

Follow us on X

  • Get release updates and feature drops from the founders in real time.

Connect on LinkedIn

  • Stay in the loop with company updates and community highlights.

​
1. Sign Up For Flowglad

Create a Flowglad account.

​
2. Add Your API Key

Add your Flowglad API key to your environment

.env
FLOWGLAD_SECRET_KEY="sk_test_...."

Quicklinks to add your key to your secrets:

Vercel Dashboard

Infisical Dashboard

​
3. Install Flowglad

pnpm install @flowglad/nextjs

​
4. Server Setup

First, set up a Flowglad server client. Do this in a file that can be imported wherever you need to access billing data, or make calls to Flowglad. Flowglad’s premade backend modules use the Flowglad Server in sessionful contexts to determine who you’re loading billing data for:

import { FlowgladServer } from '@flowglad/nextjs/server'
// or wherever you initialize your supabase client
import { createClient } from '@/utils/supabase'

export const flowgladServer = new FlowgladServer({
  supabaseAuth: {
    client: createClient
  },
})

Next, set up your Flowglad API route at /api/flowglad/[...path]. Your app will use this to send and receive data from Flowglad.

// /api/flowglad/[...path]/route.ts
import { createAppRouterRouteHandler } from '@flowglad/nextjs/server';
import { flowgladServer } from '@/app/flowglad';

const routeHandler = createAppRouterRouteHandler(flowgladServer);

export { routeHandler as GET, routeHandler as POST }

You can mount Flowglad’s handler at a different route, but you’ll need to specify it via the serverRoute prop in <FlowgladProvider /> in your React app.

​
5. Set up React

Next, you need to set up the FlowgladProvider component. For the fastest possible demo, make your success route the home page you load once customers sign in.

// app/layout.tsx
import { PropsWithChildren } from 'react'
import { FlowgladProvider } from '@flowglad/react'
// or wherever you initialize your supabase client
import { createClient } from '@/utils/supabase'

export default function RootLayout({
  children,
}: PropsWithChildren) {
    const supabase = createClient();
  const {
    data: { user }
  } = await supabase.auth.getUser();
  return (
    <FlowgladProvider loadBilling={!!user}>
    { /* ... existing layout JSX ... */}
      {children}
    { /* ... existing layout JSX ... */}
    </FlowgladProvider>
  )
}

If you are using custom route for your Flowglad handler instead of /api/flowglad, set it on FlowgladProvider’s serverRoute prop, using /path/to/your/route.

​
6. Add the Billing Page

Create a /billing route in your app and mount the BillingPage component from Flowglad:

import { BillingPage } from '@flowglad/nextjs'

export default function Billing() {
  return <BillingPage />
}