skills.rest
DimonikRV
DimonikRVCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

clerk-billing

Implement Clerk Billing subscription plans, feature gating, and billing webhooks in Next.js applications.

Updated Jul 9, 2026
Search Tags:#subscriptions#nextjs#billing#webhooks#saas#clerk#feature-gating
One-click install
npx skills add https://github.com/DimonikRV/ghost-pilot-project --skill clerk-billing-dimonikrv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-billing
Source: https://github.com/DimonikRV/ghost-pilot-project/tree/main/.agents/skills/clerk-billing
Command: npx skills add https://github.com/DimonikRV/ghost-pilot-project --skill clerk-billing-dimonikrv

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, plan and feature setup, entitlement checks, and webhook handling, with many non-obvious pitfalls like wrong plan tabs, stale session tokens, and Stripe-vs-Clerk event name confusion. ## 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: Gate routes, API endpoints, and UI elements with has({ plan }) and has({ feature }) from auth() or useAuth(), including seat-limit org plans for B2B. - Billing Webhooks: Handle the full Clerk billing event catalog (subscription.created, subscriptionItem.canceled, subscriptionItem.pastDue, etc.) with verifyWebhook to sync subscription state to your database. - Use Case: A SaaS team adds a pricing page, gates an analytics dashboard behind the pro plan, enforces a 10-seat cap on the org team plan, and syncs cancellations to their database via webhooks. ## Quick Start Ask the AI to add a Clerk Billing pricing page with plan gating to your Next.js app, and it will enable billing, render the PricingTable, and protect your routes.

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?▼

Enable Billing in Clerk Dashboard → Billing → Settings, create plans under the User Plans or Organization Plans tab, then render `<PricingTable />` from `@clerk/nextjs` on a pricing route. Selecting a plan opens Clerk's in-app checkout drawer automatically.

How do I gate a route or feature by subscription plan with Clerk?▼

Call `await auth()` in a server component and use `has({ plan: 'pro' })` for tier-level gates or `has({ feature: 'export' })` for specific capabilities, redirecting to /pricing when the check fails. Client components use `useAuth()` with optional chaining on `has`.

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 new session, and verify the subscription exists in Dashboard → Billing → Subscriptions.

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

Clerk Billing uses seat-limit plans with fixed per-plan pricing and a membership cap, not metered pricing that scales per member or per API call. For usage-based models, gate allotments with `has({ feature })` and track consumption in your own datastore.

What webhook events does Clerk Billing send for cancellations?▼

There is no `subscription.canceled` event; cancellation fires as `subscriptionItem.canceled`. Other key events include `subscription.created`, `subscription.updated`, `subscription.pastDue`, and `subscriptionItem.freeTrialEnding`, all verified with `verifyWebhook` from `@clerk/nextjs/webhooks`.

Why is my PricingTable rendering empty or throwing cannot_render_billing_disabled?▼

Billing is not enabled for the instance, or plans were created in the wrong tab (User Plans vs Organization Plans). Enable Billing in Dashboard → Billing → Settings and pass `for="organization"` to PricingTable for B2B org plans.

Related Skills

Explore More Software Engineering Skills→
koushik-haitkoushik-hait

clerk

Implement Clerk authentication flows and routing across multiple frameworks.

Community
Advanced
bonnguyenitcbonnguyenitc
19

subscription-billing

Reconcile Stripe webhook events to maintain authoritative subscription state.

Community
Advanced
Endsi3gEndsi3g

clerk-orgs

Configure Clerk Organizations with RBAC, member management, and Next.js safety patterns for B2B tenants.

Community
Advanced
NextSpark-jsNextSpark-js

billing-subscriptions

Implement multi-provider SaaS billing with Stripe and Polar.sh integrations.

Official
Advanced