Flowglad
Open source, zero webhooks payment provider
Install / Use
/learn @flowglad/FlowgladREADME
Features
- Default Stateless Say goodbye to webhooks,
"subscriptions"db tables,customer_idcolumns,PRICE_IDenv variables, or manually mapping your plans to prices to features and back. - Single Source of Truth: Read your latest customer billing state from Flowglad, including feature access and usage meter credits
- Access Data Using Your Ids: Query customer state by your auth's user ids. Refer to prices, features, and usage meters via 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 prod in a click. Seamlessly rotate pricing models in your app without any redeployment.
Set Up
Installation
First, install the packages necessary 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 system and requires only a few lines of code to get started in your Next.js app. Setup typically takes under a minute:
Integration
- Configure Your Flowglad Server Client
Create a utility to generate your Flowglad server instance. Pass your own customer/user/organization IDs—Flowglad never requires its own customer IDs to be managed in your app:
// lib/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 the Flowglad API Handler
Add an API route so 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 the Provider
In your root layout (App Router) or _app (Pages Router):
import { FlowgladProvider } from '@flowglad/nextjs'
// App Router example (app/layout.tsx)
export default function RootLayout({ children }) {
return (
<html>
<body>
<FlowgladProvider>
{children}
</FlowgladProvider>
</body>
</html>
)
}
That’s it—Flowglad will use your app’s internal user IDs for all billing logic and integrate billing status into your frontend in real time.
B2C apps: Use user.id as the customer ID.
B2B apps: Use organization.id or team.id as the customer ID.
Flowglad does not require you to change your authentication system or manage Flowglad customer IDs. Just pass your own!
- Use
useBillingon your frontend, 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, usePricing } from '@flowglad/nextjs'
export function PricingCards() {
const pricingModel = usePricing()
const { createCheckoutSession } = useBilling()
if (!pricingModel) {
return <p>Loading pricing…</p>
}
return (
<div>
{pricingModel.products.map((product) => {
const defaultPrice = product.defaultPrice ?? product.prices?.[0]
if (!defaultPrice) return null
return (
<div key={product.id}>
<h3>{product.name}</h3>
<p>{product.description}</p>
<button
onClick={() =>
createCheckoutSession({
priceSlug: defaultPrice.slug,
successUrl: window.location.href,
cancelUrl: window.location.href,
autoRedirect: true,
})
}
>
Choose {defaultPrice.name ?? product.name}
</button>
</div>
)
})}
</div>
)
}
Backend Example: Server-side Feature and Usage Checks
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`)
}
}
Getting Started
First, set up a pricing model. You can do so in the dashboard in just a few clicks using a template, that you can then 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 more on the way. If you don't see a pricing model from our templates that suits you, you can always make one from scratch.
Examples
Built With
Project Goals
In the last 15 years, the market has given developers more options than ever for every single part of their stack. But when it comes to payments, there have been virtually zero new entrants. The existing options are slim, and almost all of them require us to talk to sales to even set up an account. When it comes to self-serve payments, there are even fewer options.
The result? The developer experience and cost of payments has barely improved in that time. Best in class DX in payments feels eerily suspended in 2015. Meanwhile, we've enjoyed constant improvements in auth, compute, hosting, and practically everything else.
Flowglad wants to change that.
We're building a payments layer that lets you:
- Think about billing and payments as little as possible
- Spend as little time on inte
Related Skills
bluebubbles
329.0kUse when you need to send or manage iMessages via BlueBubbles (recommended iMessage integration). Calls go through the generic message tool with channel="bluebubbles".
node-connect
329.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
slack
329.0kUse when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
frontend-design
81.1kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
