Flowglad: Open‑Source Payments and Billing Infrastructure

Project Overview: Architecture & Philosophy

Flowglad is built on a modern stack: Next.js, tRPC, Tailwind CSS, and Drizzle ORM. Its core philosophy can be broken down into three pillars:

• Stateless Billing: No hidden state, no extra tables—billing data lives in the same source as your user records.
• Single Source of Truth: All pricing, feature flags, and usage meters are queried through a unified API, eliminating data drift.
• Zero Webhooks: Real‑time billing status is fetched on demand, removing the need for fragile webhook listeners.

The platform also embraces Enterprise AI platform by UBOS concepts, allowing AI agents to read billing states and make automated decisions—perfect for dynamic pricing or usage‑based throttling.

Key Features & Benefits

By leveraging these features, teams can reduce integration time from weeks to hours, cut operational costs, and focus on product differentiation rather than payment plumbing. For a concrete example of how AI can amplify billing insights, see the AI Email Marketing template that automatically tailors offers based on a user’s subscription tier.

Who Should Use Flowglad? – Real‑World Use Cases

Flowglad shines in scenarios where billing logic is tightly coupled with product features. Below are the primary personas and the problems Flowglad solves for each.

• Fintech Developers: Need a compliant, extensible payment layer that can switch providers (Stripe, Paddle, Braintree) without code rewrites. Flowglad’s provider‑agnostic design makes this trivial.
• SaaS Product Managers: Want to experiment with new pricing experiments (e.g., usage‑based credits) without redeploying. The Workflow automation studio can trigger price‑model swaps in a click.
• Tech Entrepreneurs: Require a fast MVP launch. Using Flowglad’s UBOS templates for quick start, you can scaffold a billing‑enabled app in under an hour.

Example use cases include:

1. Marketplace platforms that charge per transaction and also offer subscription‑based premium listings.
2. AI‑driven content generators that bill per generated token or per API call, using usage meters.
3. Education SaaS that provides tiered access to courses and tracks credit consumption for live tutoring sessions.

For developers looking to enrich their product with AI‑powered insights, the AI Article Copywriter can automatically generate billing‑related documentation, while the AI Image Generator can create custom invoice graphics on the fly.

Getting Started: Installation, Docs, and First Checkout

The onboarding experience is intentionally frictionless. Follow these steps to have Flowglad up and running in under ten minutes.

1. Install the SDK

# For a Next.js project
bun add @flowglad/nextjs

# For React + Express
bun add @flowglad/react @flowglad/express

# For generic React + Node
bun add @flowglad/react @flowglad/server

2. Create a Flowglad Server Instance

Define a utility that maps your internal user IDs to the billing client. No extra tables required.

// utils/flowglad.ts
import { FlowgladServer } from '@flowglad/nextjs/server';

export const flowglad = (customerExternalId: string) => {
  return new FlowgladServer({
    customerExternalId,
    getCustomerDetails: async (externalId) => {
      const user = await db.users.findOne({ id: externalId });
      if (!user) throw new Error('User not found');
      return { email: user.email, name: user.name };
    },
  });
};

3. Expose an API Route

The route acts as a secure bridge between your frontend and Flowglad’s backend logic.

// app/api/flowglad/route.ts
import { nextRouteHandler } from '@flowglad/nextjs/server';
import { flowglad } from '@/utils/flowglad';

export const { GET, POST } = nextRouteHandler({
  flowglad,
  getCustomerExternalId: async (req) => {
    const userId = await getUserIdFromRequest(req);
    if (!userId) throw new Error('User not authenticated');
    return userId;
  },
});

4. Wrap Your Application

In Next.js 13+ you can wrap the root layout with the provider. This makes billing data available to any component via the useBilling hook.

// app/layout.tsx
import { FlowgladProvider } from '@flowglad/nextjs';

export default function RootLayout({ children }) {
  return (
    
      
        {children}
      
    
  );
}

Once the provider is in place, you can instantly query feature flags or usage balances. For a visual example, check out the Web app editor on UBOS, which demonstrates real‑time UI updates based on billing state.

5. Define Pricing Models in the Dashboard

Flowglad ships with a UI that lets you create plans, usage meters, and feature toggles without touching code. Choose a template—like “Tiered Access and Usage Credits”—and customize price points, credit limits, and feature lists. When you’re ready, hit “Publish” and the new model becomes live instantly.

Need more guidance? The official docs are comprehensive, and the community Slack channel (linked from the About UBOS page) offers real‑time help.

Community, Support, and Ecosystem

Open‑source projects thrive on community contributions, and Flowglad is no exception. With a vibrant Discord server, regular GitHub issue triage, and a growing list of third‑party integrations, you’ll never feel stranded.

• GitHub: Star the repo, submit pull requests, or open issues to request new features.
• Discord: Real‑time chat with other developers, share pricing templates, and get quick answers.
• UBOS Marketplace: Discover ready‑made templates like AI Video Generator that can be paired with Flowglad for content‑driven monetization.

For enterprises seeking a deeper partnership, the UBOS partner program offers co‑marketing, dedicated support, and custom SLA options.