āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/guides/billing/for-b2c ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
Clerk billing for B2C SaaS allows you to create plans and manage subscriptions for individual users in your application. If you'd like to charge companies or organizations, see Billing for B2B SaaS. You can also combine both B2C and B2B billing in the same application.
<Include src="_partials/billing/enable-billing" />Subscription plans are what your users subscribe to. There is no limit to the number of plans you can create.
To create a plan, navigate to the Plans page in the Clerk Dashboard. Here, you can create, edit, and delete plans. To setup B2C billing, select the Plans for Users tab and select Add Plan. When creating a plan, you can also create features for the plan; see the next section for more information.
[!TIP] What is the Publicly available option?
Plans appear in some Clerk components depending on what kind of plan it is. All plans can appear in the
<PricingTable />component. If it's a user plan, it can appear in the<UserProfile />component. When creating or editing a plan, if you'd like to hide it from appearing in Clerk components, you can toggle the Publicly available option off.
Features make it easy to give entitlements to your plans. You can add any number of features to a plan.
You can add a feature to a plan when you are creating a plan. To add it after a plan is created:
[!TIP] What is the Publicly available option?
Plans appear in some Clerk components depending on what kind of plan it is. All plans can appear in the
<PricingTable />component. If it's a user plan, it can appear in the<UserProfile />component. When adding a feature to a plan, it will also automatically appear in the corresponding plan. When creating or editing a feature, if you'd like to hide it from appearing in Clerk components, you can toggle the Publicly available option off.
You can create a pricing page by using the <PricingTable /> component. This component displays a table of plans and features that users can subscribe to. It's recommended to create a dedicated page, as shown in the following example.
You can use Clerk's features and plans to gate access to the content. There are a few ways to do this, but the recommended approach is to either use the has() method or the <Protect> component.
The has() method is available for any JavaScript framework, while <Protect> is only available for React-based frameworks.
has()Use the has() method to test if the user has access to a plan:
const hasPremiumAccess = has({ plan: 'gold' })
Or a feature:
const hasPremiumAccess = has({ feature: 'widgets' })
The has() method is a server-side helper that checks if the organization has been granted a specific type of access control (role, permission, feature, or plan) and returns a boolean value. has() is available on the auth object, which you will access differently depending on the framework you are using.
<Tabs items={[ "Plan", "Feature"]}>
<Tab>
The following example demonstrates how to use has() to check if a user has a plan.
<Include src="_partials/billing/checking-plan-using-has-function" />
<Include src="_partials/billing/checking-feature-using-has-function" />
<Protect>The <Protect> component protects content or even entire routes by checking if the user has been granted a specific type of access control (role, permission, feature, or plan). You can pass a fallback prop to <Protect> that will be rendered if the user does not have the access control.
<Tabs items={["Plan", "Feature"]}>
<Tab>
The following example demonstrates how to use <Protect> to protect a page by checking if the user has a plan.
<Include src="_partials/billing/checking-plan-using-protect" />
<Include src="_partials/billing/checking-feature-using-protect" />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā