The easiest way to earn money from internet.
get started
· Quickstart · Website · Issues · Discord
Infinite pricing models, one source of truth, zero webhooks.
- default stateless Say goodbye to webhooks
"subscriptions"db table,customer_idcolumn,PRICE_IDenv variables, or manually mapping your plans from prices to features and back. - Single Source of Truth: Read your latest customer billing status from FlowGlad, including facility access and usage meter credits
- Access data using your ID: Ask about customer status by user ID of your authority. Refer to prices, features and usage meters through the slugs you define.
- Full-Stack SDK: Access your customer’s data on the backend using
flowgladServer.getBilling()Or in your React frontend using ouruseBilling()hook - Adaptable: Iterate on new pricing models in TestMode, and push them to product in one click. Seamlessly transition pricing models to your app without any re-deployment.
First, install the required flowglad packages based on your project setup:
# Next.js Projects
bun add @flowglad/nextjs
# React + Express projects:
bun add @flowglad/react @flowglad/express
# All other React + Node Projects
bun add @flowglad/react @flowglad/server
FlowGlad integrates seamlessly with your authentication systems and requires only a few lines of code to get started in your Next.js app. Setup usually takes less than a minute:
- Configure your FlowGlade Server Client
Create a utility to generate your FlowGlade server instance. Pass your own customer/user/organization IDs—Floglad never needs to manage your own customer IDs in your app:
// utils/flowglad.ts
import { FlowgladServer } from '@flowglad/nextjs/server'
export const flowglad = (customerExternalId: string) => {
return new FlowgladServer({
customerExternalId,
getCustomerDetails: async (externalId) => {
// e.g. Fetch user info from your DB using your user/org/team ID
const user = await db.users.findOne({ id: externalId })
if (!user) throw new Error('User not found')
return { email: user.email, name: user.name }
},
})
}
- Expose FlowGlad API Handler
Add an API route so that the FlowGlad client can communicate securely with your backend:
// app/api/flowglad/[...path]/route.ts
import { nextRouteHandler } from '@flowglad/nextjs/server'
import { flowglad } from '@/utils/flowglad'
export const { GET, POST } = nextRouteHandler({
flowglad,
getCustomerExternalId: async (req) => {
// Extract your user/org/team ID from session/auth.
// For B2C: return user.id from your DB
// For B2B: return organization.id or team.id
const userId = await getUserIdFromRequest(req)
if (!userId) throw new Error('User not authenticated')
return userId
},
})
- Wrap your app with a provider
In your route layout (app router) or _app (page router):
import { FlowgladProvider } from '@flowglad/nextjs'
// App Router example (app/layout.tsx)
export default function RootLayout({ children }) {
return (
<html>
<body>
<FlowgladProvider loadBilling={true}>
{children}
FlowgladProvider>
body>
html>
)
}
That’s all—FlowGlad will use your app’s internal user ID for all billing logic and integrate billing status into your frontend in real-time.
B2C Apps: Use user.id As customer ID.
B2B Apps: Use organization.id Or team.id As customer ID.
FlowGlad does not require you to change your authentication system or manage FlowGlad Customer IDs. Just make your pass!
- Use
useBillingon your forearm, andflowglad(userId).getBilling()on your backend
Frontend example: checking feature access and usage
'use client'
import { useBilling } from '@flowglad/nextjs'
export function FeatureGate({ featureSlug, children }) {
const { loaded, errors, checkFeatureAccess } = useBilling()
if (!loaded || !checkFeatureAccess) {
return <p>Loading billing state…p>
}
if (errors?.length) {
return <p>Unable to load billing data right now.p>
}
return checkFeatureAccess(featureSlug)
? children
: <p>You need to upgrade to unlock this feature.p>
}
import { useBilling } from '@flowglad/nextjs'
export function UsageBalanceIndicator({ usageMeterSlug }) {
const { loaded, errors, checkUsageBalance, createCheckoutSession } = useBilling()
if (!loaded || !checkUsageBalance) {
return <p>Loading usage…p>
}
const usage = checkUsageBalance(usageMeterSlug)
return (
<div>
<h3>Usage Balanceh3>
<p>
Remaining:{' '}
{usage ? `${usage.availableBalance} credits available` : <button onClick={() => createCheckoutSession({
priceSlug: 'pro_plan',
autoRedirect: true
})}
/>}
p>
div>
)
}
Backend Example: Server-Side Feature and Usage Checking
import { NextResponse } from 'next/server'
import { flowglad } from '@/utils/flowglad'
const hasFastGenerations = async () => {
// ...
const user = await getUser()
const billing = await flowglad(user.id).getBilling()
const hasAccess = billing.checkFeatureAccess('fast_generations')
if (hasAccess) {
// run fast generations
} else {
// fall back to normal generations
}
}
import { flowglad } from '@/utils/flowglad'
const processChatMessage = async (params: { chat: string }) => {
// Extract your app's user/org/team ID,
// whichever corresponds to your customer
const user = await getUser()
const billing = await flowglad(user.id).getBilling()
const usage = billing.checkUsageBalance('chat_messages')
if (usage.availableBalance > 0) {
// run chat request
} else {
throw Error(`User ${user.id} does not have sufficient usage credits`)
}
}
First, establish a pricing model. You can do this in just a few clicks in the dashboard using templates that you can customize to suit your specific needs.
We currently have templates for the following pricing models:
- usage-limit + subscription hybrid (like cursor)
- Unlimited usage (like ChatGPT consumer)
- Tiered access and usage credits (like MidJourney)
- Feature-Gated Subscription (like Linear)
And many more on the way. If you don’t see a pricing model that works for you among our templates, you can always create a model from scratch.
Over the past 15 years, the market has given developers more options than ever before for every single part of their stack. But when it comes to payments, there have been almost zero new entrants. The existing options are few, and almost all of them require us to talk to sales to even open an account. when it comes self service There are even fewer options when it comes to payment.
outcome? The developer experience and payment costs have barely improved in that time. DX, the best in class in terms of payments, was surprisingly suspended in 2015. In the meantime, we’ve enjoyed steady improvements in auth, compute, hosting, and practically everything else.
FloGlad wants to change that.
We’re building a payments layer that lets you:
- Think as little as possible about billing and payments
- Spend as little time as possible on integration and maintenance
- Get as much benefit as possible from your single integration
- Unlock multiple payment providers with a single integration
It will take time to achieve this mission. It will be difficult. Some people may also be unhappy with this. But with AI bringing more and more developers on line and increasing the complexity of startup billing, the need is more urgent than ever.
<a href