flowglad-setup

Name: flowglad-setup
Availability: InStock
Author: Flowglad

Install and configure the Flowglad SDK for Next.js, Express, and React apps.

2|Updated Jan 21, 2026

Search Tags:#react #sdk #setup #nextjs #billing #express #flowglad

Ready to run

npx skills add https://github.com/flowglad/skills --skill flowglad-setup

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: flowglad-setup
Source: https://github.com/flowglad/skills/tree/main/skills/setup
Command: npx skills add https://github.com/flowglad/skills --skill flowglad-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill streamlines installing and configuring the Flowglad SDK for Next.js, Express, and React applications, enabling billing integration with clear, repeatable steps.

Core Features & Use Cases

Framework-agnostic setup that detects your runtime (Next.js, Express, or React) and wires the correct provider, server factory, and API routes.
One-time or first-time setup guidance for installing packages, configuring environment variables, and wiring a per-customer Flowglad server instance.
Use case: Add Flowglad billing to a new app by creating a scoped server, a catch-all API route, and wrapping the app with FlowgladProvider.

Quick Start

Install the packages: bun add @flowglad/nextjs @flowglad/react
Create and configure a per-customer server factory (e.g., lib/flowglad.ts) with getCustomerDetails
Add a catch-all API route (e.g., app/api/flowglad/[...path]/route.ts) using nextRouteHandler
Wrap your app with FlowgladProvider in your layout (e.g., app/layout.tsx) and set FLOWGLAD_SECRET_KEY in .env.local

Frequently Asked Questions about flowglad-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up billing in a Next.js app?▼

To set up billing in Next.js, install the SDK, create a per-customer server factory, add a catch-all API route using nextRouteHandler, and wrap your app with FlowgladProvider in your layout.

How do I configure environment variables for billing integration?▼

Configuring billing integration environment variables requires setting FLOWGLAD_SECRET_KEY in your .env.local file. This secret key authenticates your server-side requests to the billing provider.

Can I use this billing SDK with both Express and React?▼

Yes, the billing SDK supports Express, React, and Next.js. It provides a framework-detection flow that wires the correct provider, server factory, and API routes for your specific runtime environment.

What is a per-customer server factory for billing?▼

A per-customer server factory for billing is a scoped server instance, typically defined in lib/flowglad.ts, that uses getCustomerDetails to manage individual customer billing contexts and route requests securely.

What's the best way to add billing to an app for the first time?▼

The best way to add billing to an app for the first time is installing the SDK packages, configuring environment variables, creating a scoped server, adding a catch-all API route, and wrapping the app with a billing provider.

Why do I need a catch-all API route for billing setup?▼

You need a catch-all API route for billing setup to handle webhooks and API requests dynamically. Using nextRouteHandler in app/api/flowglad/[...path]/route.ts routes all billing traffic to the correct server logic.