skills.rest
paramcodes
paramcodesCOMMUNITY
Explore all skills by this author →
Website𝕏@Your_PARAMGitHub

clerk-billing

Implement Clerk Billing subscriptions, plan gating, and billing webhooks in Next.js applications.

Updated Sep 19, 2026
Search Tags:#pricing#subscriptions#SaaS#Clerk#Next.js#billing#webhooks
One-click install
npx skills add https://github.com/paramcodes/autobro --skill clerk-billing-paramcodes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-billing
Source: https://github.com/paramcodes/autobro/tree/main/.agents/skills/clerk-billing
Command: npx skills add https://github.com/paramcodes/autobro --skill clerk-billing-paramcodes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @clerk/nextjs, and includes references (resource) components.

What problem does it solve? Adding subscription monetization to a Next.js app with Clerk auth requires coordinating dashboard configuration, pricing UI, entitlement checks, and webhook lifecycle events, and mistakes like wrong plan tabs or stale sessions cause silent failures. ## Core Features & Use Cases - Pricing and Checkout UI: Render <PricingTable /> and <CheckoutButton /> to display plans and open Clerk's in-app checkout drawer for B2C users or B2B organizations. - Plan and Feature Gating: Protect routes, pages, and API endpoints with has({ plan }) and has({ feature }) checks from auth() or useAuth(). - Billing Webhooks: Handle all 16 Clerk billing events (subscription.created, subscriptionItem.canceled, subscriptionItem.pastDue, etc.) with verified payloads to sync subscription state to your database. - Use Case: A B2B SaaS needs seat-limited organization plans. Create tiered org plans in the Clerk Dashboard, render <PricingTable for="organization" />, gate team routes with has({ plan: 'org:team' }), and let Clerk enforce membership caps at invite time. ## Quick Start Ask the AI to add a pricing page with Clerk's PricingTable and protect a Pro-only dashboard route using plan checks.

Frequently Asked Questions about clerk-billing

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

FAQPage Schema
How do I add a pricing page with Clerk Billing in Next.js?▼

Create a route that renders `<PricingTable />` from @clerk/nextjs after enabling Billing in Clerk Dashboard → Billing → Settings and creating plans. The component fetches configured plans and opens Clerk's in-app checkout drawer on selection.

How do I protect a route so only Pro plan users can access it?▼

In a server component, call `await auth()` from @clerk/nextjs/server and check `has({ plan: 'pro' })`, redirecting to /pricing when false. For gating specific capabilities like export or analytics, use `has({ feature: 'slug' })` instead of plan checks.

Why does has({ plan }) return false after a successful checkout?▼

The session token has not refreshed to include the new plan, or the plan slug in code does not exactly match the Dashboard slug. Call `clerk.session?.reload()` or navigate to force a session refresh, and verify the subscription exists in Dashboard → Billing → Subscriptions.

Does Clerk Billing support per-seat or metered usage-based pricing?▼

Clerk Billing uses seat-limit plans with fixed per-plan pricing and membership caps, not metered billing that scales per member or per API call. Tier plans by seat cap to charge larger organizations more, and track usage in your own datastore gated by `has({ feature })`.

What webhook events does Clerk Billing send for subscription lifecycle?▼

Clerk sends dot-notation camelCase events like subscription.created, subscription.pastDue, subscriptionItem.canceled, and paymentAttempt.created, never Stripe-style names. Verify payloads with `verifyWebhook(req)` from @clerk/nextjs/webhooks and read the payer from `evt.data.payer`.

Why is my PricingTable rendering empty in production?▼

The most common cause is creating plans in the wrong Dashboard tab: User Plans only appear in the default table, Organization Plans require `<PricingTable for="organization" />`. Also confirm Billing is enabled and a payment gateway is connected for production instances.

Related Skills

Explore More Software Engineering Skills→
koushik-haitkoushik-hait

clerk

Implement Clerk authentication flows and routing across multiple frameworks.

Community
Advanced
hmzainjamilhmzainjamil
1

Stripe Payments

Automates Stripe payment processing, subscription management, invoicing, and revenue reporting.

Community
Advanced
sudarshan-krishnansudarshan-krishnan

clerk-billing

Implement Clerk Billing subscription management in Next.js applications.

Community
Advanced
RohithdgrrRohithdgrr

stripe-integration-expert

Implements Stripe subscriptions, checkout sessions, webhooks, and usage-based billing for web applications.

Community
Advanced