# Clerk Billing for B2C SaaS

> Billing is currently in Beta and its APIs are experimental and may undergo breaking changes. To mitigate potential disruptions, we recommend [pinning](https://clerk.com/docs/pinning.md?sdk=fastify) your SDK and `clerk-js` package versions.

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](https://clerk.com/docs/fastify/guides/billing/for-b2b.md). You can also combine both B2C and B2B Billing in the same application.

## Enable Billing

To enable Billing for your application, navigate to the [**Billing Settings**](https://dashboard.clerk.com/~/billing/settings) page in the Clerk Dashboard. This page will guide you through enabling Billing for your application.

Clerk Billing costs the same as using Stripe Billing directly, just 0.7% per transaction, plus transaction fees which are paid directly to Stripe. Clerk Billing is **not** the same as Stripe Billing. Plans and pricing are managed directly through the Clerk Dashboard and won't sync with your existing Stripe products or plans. Clerk uses Stripe **only** for payment processing, so you don't need to set up Stripe Billing.

### Payment gateway

Once you have enabled Billing, you will see the following **Payment gateway** options for collecting payments via Stripe:

- **Clerk development gateway**: A shared **test** Stripe account used for development instances. This allows developers to test and build Billing flows **in development** without needing to create and configure a Stripe account.
- **Stripe account**: Use your own Stripe account for production. **A Stripe account created for a development instance cannot be used for production**. You will need to create a separate Stripe account for your production environment.

## Create a Plan

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 [**Subscription plans**](https://dashboard.clerk.com/~/billing/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.

> 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.

## Add Features to a Plan

[Features](https://clerk.com/docs/guides/secure/features.md?sdk=fastify) 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:

1. Navigate to the [**Subscription plans**](https://dashboard.clerk.com/~/billing/plans) page in the Clerk Dashboard.
2. Select the Plan you'd like to add a Feature to.
3. In the **Features** section, select **Add Feature**.

> 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.

## Create a pricing page

You can create a pricing page by using the [<PricingTable />](https://clerk.com/docs/reference/components/billing/pricing-table.md) 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.

> To see an example of how to create a pricing table page, please select one of the frontend SDKs on the sidebar.

## Control access with Features and Plans

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()`](https://clerk.com/docs/reference/backend/types/auth-object.md?sdk=fastify#has) method or the [<Show>](https://clerk.com/docs/reference/components/control/show.md) component.

### Example: Using `has()`

Use the `has()` method to test if the user has access to a **Plan**:

```jsx
const hasPremiumAccess = has({ plan: 'gold' })
```

Or a **Feature**:

```jsx
const hasPremiumAccess = has({ feature: 'widgets' })
```

The [`has()`](https://clerk.com/docs/reference/backend/types/auth-object.md?sdk=fastify#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](https://clerk.com/docs/reference/backend/types/auth-object.md?sdk=fastify), which you will access differently [depending on the framework you are using](https://clerk.com/docs/reference/backend/types/auth-object.md?sdk=fastify#how-to-access-the-auth-object).

**Plan**

The following example demonstrates how to use `has()` to check if a user has a Plan.

filename: src/routes/bronze-content.ts
```tsx
import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify'
import { getAuth } from '@clerk/fastify'

export const bronzeContentRoutes = (fastify: FastifyInstance) => {
  fastify.get('/bronze-content', async (request: FastifyRequest, reply: FastifyReply) => {
    const { has } = getAuth(request)

    const hasBronzePlan = has({ plan: 'bronze' })

    if (hasBronzePlan) {
      reply.send('For Bronze subscribers only')
    } else {
      reply.send('Only subscribers to the Bronze plan can access this content.')
    }
  })
}
```

**Feature**

The following example demonstrates how to use `has()` to check if a user has a Feature.

filename: src/routes/premium-content.ts
```ts
import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify'
import { getAuth } from '@clerk/fastify'

export const premiumContentRoutes = (fastify: FastifyInstance) => {
  fastify.get('/premium-content', async (request: FastifyRequest, reply: FastifyReply) => {
    const { has } = getAuth(request)
    const hasPremiumAccess = has({ feature: 'premium_access' })

    if (!hasPremiumAccess) {
      reply.send('Only subscribers with the Premium Access feature can access this content.')
    } else {
      reply.send('Our Exclusive Content')
    }
  })
}
```

### Example: Using `<Show>`

The [<Show>](https://clerk.com/docs/reference/components/control/show.md) component can be used to protect 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 `<Show>` that will be rendered if the user does not have the access control.

**Plan**

The following example demonstrates how to use `<Show>` to protect a page by checking if the user has a Plan.

> To see an example of how to use the `<Show />` component, please select one of the frontend SDKs on the sidebar.

**Feature**

The following example demonstrates how to use `<Show>` to protect a page by checking if the user has a Feature.

> To see an example of how to use the `<Show />` component, please select one of the frontend SDKs on the sidebar.

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)