{"id":26641565,"url":"https://github.com/flowglad/flowglad","last_synced_at":"2025-12-26T20:57:13.911Z","repository":{"id":279687327,"uuid":"932308018","full_name":"flowglad/flowglad","owner":"flowglad","description":"Open source payments + billing infrastructure","archived":false,"fork":false,"pushed_at":"2025-04-07T15:56:01.000Z","size":37051,"stargazers_count":114,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T16:46:15.297Z","etag":null,"topics":["billing","nextjs","payments","react","triggerdev","trpc","typescript","zod"],"latest_commit_sha":null,"homepage":"https://flowglad.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flowglad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-13T17:48:44.000Z","updated_at":"2025-04-05T23:06:26.000Z","dependencies_parsed_at":"2025-04-07T16:49:30.523Z","dependency_job_id":null,"html_url":"https://github.com/flowglad/flowglad","commit_stats":null,"previous_names":["flowglad/javascript","flowglad/flowglad"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flowglad%2Fflowglad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flowglad%2Fflowglad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flowglad%2Fflowglad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flowglad%2Fflowglad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flowglad","download_url":"https://codeload.github.com/flowglad/flowglad/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247987285,"owners_count":21028895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["billing","nextjs","payments","react","triggerdev","trpc","typescript","zod"],"created_at":"2025-03-24T18:32:09.842Z","updated_at":"2025-12-26T20:57:13.898Z","avatar_url":"https://github.com/flowglad.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/flowglad/flowglad\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./public/github-image-banner-dark-mode.jpg\"\u003e\n      \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"./public/github-image-banner-light-mode.jpg\"\u003e\n      \u003cimg width=\"1440\" alt=\"Flowglad Banner\" src=\"./public/github-image-banner-light-mode.jpg\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eFlowglad\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    The easiest way to make internet money.\n    \u003cbr /\u003e\n    \u003ca href=\"https://flowglad.com\"\u003e\u003cstrong\u003eGet Started\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    ·\n    \u003ca href=\"https://docs.flowglad.com/quickstart\"\u003eQuickstart\u003c/a\u003e\n    ·\n    \u003ca href=\"https://flowglad.com\"\u003eWebsite\u003c/a\u003e\n    ·\n    \u003ca href=\"https://luma.com/flowglad\"\u003eEvents\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/flowglad/flowglad/issues\"\u003eIssues\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/flowglad/examples\"\u003eExamples\u003c/a\u003e\n    ·\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://app.flowglad.com/invite-discord\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/chat-on%20discord-7289DA.svg\" alt=\"Join Discord Community\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/intent/follow?screen_name=flowglad\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/follow/flowglad.svg?label=Follow%20@flowglad\" alt=\"Follow @flowglad\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.ycombinator.com/companies/flowglad\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Backed%20by%20YC-FF4000\" alt=\"Backed by YC\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003e\n    Infinite pricing models, one source of truth, zero webhooks.\n  \u003c/p\u003e\n\u003c/div\u003e\n\n![nav-demo](/./public/fg-demo.gif)\n\n## Features\n\n- **Default Stateless** Say goodbye to webhooks, `\"subscriptions\"` db tables, `customer_id` columns, `PRICE_ID` env variables, or manually mapping your plans to prices to features and back.\n- **Single Source of Truth:** Read your latest customer billing state from Flowglad, including feature access and usage meter credits\n- **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.\n- **Full-Stack SDK:** Access your customer's data on the backend using `flowgladServer.getBilling()`, or in your React frontend using our `useBilling()` hook\n- **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.\n\n## Set Up\n\n### Installation\n\nFirst, install the packages necessary Flowglad packages based on your project setup:\n```bash\n# Next.js Projects\nbun add @flowglad/nextjs\n\n# React + Express projects:\nbun add @flowglad/react @flowglad/express\n\n# All other React + Node Projects\nbun add @flowglad/react @flowglad/server\n```\n\nFlowglad 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:\n\n### Integration\n1. **Configure Your Flowglad Server Client**\n\nCreate 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:\n\n```ts\n// lib/flowglad.ts\nimport { FlowgladServer } from '@flowglad/nextjs/server'\n\nexport const flowglad = (customerExternalId: string) =\u003e {\n  return new FlowgladServer({\n    customerExternalId,\n    getCustomerDetails: async (externalId) =\u003e {\n      // e.g. Fetch user info from your DB using your user/org/team ID\n      const user = await db.users.findOne({ id: externalId })\n      if (!user) throw new Error('User not found')\n      return { email: user.email, name: user.name }\n    },\n  })\n}\n```\n\n2. **Expose the Flowglad API Handler**\n\nAdd an API route so the Flowglad client can communicate securely with your backend:\n\n```ts\n// app/api/flowglad/[...path]/route.ts\nimport { nextRouteHandler } from '@flowglad/nextjs/server'\nimport { flowglad } from '@/utils/flowglad'\n\nexport const { GET, POST } = nextRouteHandler({\n  flowglad,\n  getCustomerExternalId: async (req) =\u003e {\n    // Extract your user/org/team ID from session/auth.\n    // For B2C: return user.id from your DB\n    // For B2B: return organization.id or team.id\n    const userId = await getUserIdFromRequest(req)\n    if (!userId) throw new Error('User not authenticated')\n    return userId\n  },\n})\n```\n\n3. **Wrap Your App with the Provider**\n\nIn your root layout (App Router) or _app (Pages Router):\n\n```tsx\nimport { FlowgladProvider } from '@flowglad/nextjs'\n\n// App Router example (app/layout.tsx)\nexport default function RootLayout({ children }) {\n  return (\n    \u003chtml\u003e\n      \u003cbody\u003e\n        \u003cFlowgladProvider loadBilling={true}\u003e\n          {children}\n        \u003c/FlowgladProvider\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  )\n}\n```\n\nThat’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.\n\n**B2C apps:** Use `user.id` as the customer ID.  \n**B2B apps:** Use `organization.id` or `team.id` as the customer ID.\n\n_Flowglad does not require you to change your authentication system or manage Flowglad customer IDs. Just pass your own!_\n\n4. Use `useBilling` on your frontend, and `flowglad(userId).getBilling()` on your backend\n\n### Frontend Example: Checking Feature Access and Usage\n```tsx\n'use client'\n\nimport { useBilling } from '@flowglad/nextjs'\n\nexport function FeatureGate({ featureSlug, children }) {\n  const { loaded, errors, checkFeatureAccess } = useBilling()\n\n  if (!loaded || !checkFeatureAccess) {\n    return \u003cp\u003eLoading billing state…\u003c/p\u003e\n  }\n\n  if (errors?.length) {\n    return \u003cp\u003eUnable to load billing data right now.\u003c/p\u003e\n  }\n\n  return checkFeatureAccess(featureSlug)\n    ? children\n    : \u003cp\u003eYou need to upgrade to unlock this feature.\u003c/p\u003e\n}\n```\n\n```tsx\nimport { useBilling } from '@flowglad/nextjs'\n\nexport function UsageBalanceIndicator({ usageMeterSlug }) {\n  const { loaded, errors, checkUsageBalance, createCheckoutSession } = useBilling()\n\n  if (!loaded || !checkUsageBalance) {\n    return \u003cp\u003eLoading usage…\u003c/p\u003e\n  }\n\n  const usage = checkUsageBalance(usageMeterSlug)\n\n  return (\n    \u003cdiv\u003e\n      \u003ch3\u003eUsage Balance\u003c/h3\u003e\n      \u003cp\u003e\n        Remaining:{' '}\n        {usage ? `${usage.availableBalance} credits available` : \u003cbutton onClick={() =\u003e createCheckoutSession({ \n            priceSlug: 'pro_plan',\n            autoRedirect: true\n          })}\n        /\u003e}\n      \u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Backend Example: Server-side Feature and Usage Checks\n```ts\nimport { NextResponse } from 'next/server'\nimport { flowglad } from '@/utils/flowglad'\n\nconst hasFastGenerations = async () =\u003e {\n  // ...\n  const user = await getUser()\n\n  const billing = await flowglad(user.id).getBilling()\n  const hasAccess = billing.checkFeatureAccess('fast_generations')\n  if (hasAccess) {\n    // run fast generations\n  } else {\n    // fall back to normal generations\n  }\n}\n```\n\n```ts\nimport { flowglad } from '@/utils/flowglad'\n\nconst processChatMessage = async (params: { chat: string }) =\u003e {\n  // Extract your app's user/org/team ID,\n  // whichever corresponds to your customer\n  const user = await getUser()\n\n  const billing = await flowglad(user.id).getBilling()\n  const usage = billing.checkUsageBalance('chat_messages')\n  if (usage.availableBalance \u003e 0) {\n    // run chat request\n  } else {\n    throw Error(`User ${user.id} does not have sufficient usage credits`)\n  }\n}\n```\n\n## Getting Started\nFirst, set up a pricing model. You can do so in the [dashboard](https://app.flowglad.com/pricing-models) in just a few clicks using a template, that you can then customize to suit your specific needs.\n\nWe currently have templates for the following pricing models:\n- Usage-limit + Subscription Hybrid (like Cursor)\n- Unlimited Usage (like ChatGPT consumer)\n- Tiered Access and Usage Credits (like Midjourney)\n- Feature-Gated Subscription (like Linear)\n\nAnd 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. \n\n\n\n## Examples\n\n- [Generation-Based Subscription](https://github.com/flowglad/examples/tree/main/generation-based-subscription)\n- [Tiered Usage-Gated Subscription](https://github.com/flowglad/examples/tree/main/tiered-usage-gated-subscription)\n- [Usage Limit Subscription](https://github.com/flowglad/examples/tree/main/usage-limit-subscription)\n\n## Built With\n\n- [Next.js](https://nextjs.org/?ref=flowglad.com)\n- [tRPC](https://trpc.io/?ref=flowglad.com)\n- [React.js](https://reactjs.org/?ref=flowglad.com)\n- [Tailwind CSS](https://tailwindcss.com/?ref=flowglad.com)\n- [Drizzle ORM](https://orm.drizzle.team/?ref=flowglad.com)\n- [Zod](https://zod.dev/?ref=flowglad.com)\n- [Trigger.dev](https://trigger.dev/?ref=flowglad.com)\n- [Supabase](https://supabase.com/?ref=flowglad.com)\n- [Better Auth](https://better-auth.com/?ref=flowglad.com)\n\n## Project Goals\n\nIn 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.\n\nThe 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.\n\nFlowglad wants to change that.\n\nWe're building a payments layer that lets you:\n- Think about billing and payments as little as possible\n- Spend as little time on integration and maintenance as possible\n- Get as much out of your single integration as possible\n- Unlock more payment providers from a single integration\n\nAchieving this mission will take time. It will be hard. It might even make some people unhappy. But with AI bringing more and more developers on line and exploding the complexity of startup billing, the need is more urgent than ever.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflowglad%2Fflowglad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflowglad%2Fflowglad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflowglad%2Fflowglad/lists"}