billing-sdk_skill

Overview

This skill guides developers through BillingSDK — an open-source set of React components and CLI tooling for pricing tables, subscription management, usage meters, and Dodo Payments integration. It explains quick-start options, component usage, Next.js API route examples, and environment configuration. The content focuses on concrete setup steps, customization hooks, and recommended practices for production billing flows.

How this skill works

The skill inspects components and CLI flows: project initialization, component installation, and generated API routes for checkout, customer portal, and webhooks. It shows how components accept props and styling overrides, how to call backend endpoints to create checkout sessions or portal sessions, and how to wire environment variables and webhook secrets. Example code demonstrates Next.js route handlers, plan configuration, and client-side handlers that redirect users to Dodo Payments for checkout and portal sessions.

When to use it

• You need ready-made, customizable React billing UI components (pricing tables, meters, subscription pages).
• You want a fast project bootstrap with framework-aware API routes and Dodo Payments wiring.
• You are adding billing UI to an existing app without building components from scratch.
• You need clear examples for Next.js server routes (checkout, portal, webhooks).
• You want components that follow Tailwind/shadcn/ui patterns for easy theming.

Best practices

• Store product IDs and keys in environment variables for safe staging/production swaps.
• Use server-side data fetching for subscription state and treat webhooks as the source of truth.
• Show loading states during checkout/portal creation to prevent duplicate actions.
• Customize visuals via Tailwind variables, class overrides, or by modifying local component files.
• Use the CLI to add components so configuration and dependencies update automatically.

Example use cases

• Initialize a new Next.js app with billing routes and Dodo Payments using npx @billingsdk/cli init.
• Add a pricing table or usage meter to an existing React app via the CLI or shadcn registry.
• Implement an account page with SubscriptionManagement that opens the customer portal for billing updates.
• Create a usage dashboard with UsageMeterCircle components to visualize API, storage, or bandwidth consumption.
• Generate server endpoints that create checkout sessions and portal sessions and redirect users to Dodo Payments.