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…

​

1. Sign Up For Flowglad

Create a Flowglad account.

​

2. Add Your API Key

Add your Flowglad API key to your environment

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 }

​

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>
  )
}

​

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 />
}

​

7. Supported Countries

• Australia
• Austria
• Belgium
• Brazil
• Bulgaria
• Canada
• Côte d’Ivoire
• Croatia
• Cyprus
• Czech Republic
• Denmark
• Estonia
• Finland
• France
• Germany
• Ghana
• Gibraltar
• Greece
• Hong Kong
• Hungary
• India
• Indonesia
• Ireland
• Italy
• Japan
• Kenya
• Latvia
• Liechtenstein
• Lithuania
• Luxembourg
• Malaysia
• Malta
• Mexico
• Netherlands
• New Zealand
• Nigeria
• Norway
• Poland
• Portugal
• Romania
• Singapore
• Slovakia
• Slovenia
• South Africa
• Spain
• Sweden
• Switzerland
• Thailand
• United Arab Emirates
• United Kingdom
• United States