# 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=js-frontend) 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/js-frontend/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 `` component. If it's a user Plan, it can appear in the `` 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=js-frontend) 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 `` component. If it's a user Plan, it can appear in the `` 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 [](https://clerk.com/docs/js-frontend/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.
filename: main.js
```js
import { Clerk } from '@clerk/clerk-js'
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
`
const pricingTableDiv = document.getElementById('pricing-table')
clerk.mountPricingTable(pricingTableDiv)
```
## 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=js-frontend#has) method or the [](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=js-frontend#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=js-frontend), which you will access differently [depending on the framework you are using](https://clerk.com/docs/reference/backend/types/auth-object.md?sdk=js-frontend#how-to-access-the-auth-object).
**Plan**
The following example demonstrates how to use `has()` to check if a user has a Plan.
filename: main.js
```js
import { Clerk } from '@clerk/clerk-js'
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
`
const bronzeContentDiv = document.getElementById('bronze-content')
const hasBronzePlan = clerk.session.checkAuthorization({ plan: 'bronze' })
if (!hasBronzePlan) {
bronzeContentDiv.innerHTML = `
Only subscribers to the Bronze plan can access this content.
`
} else {
bronzeContentDiv.innerHTML = `
For Bronze subscribers only
`
}
```
**Feature**
The following example demonstrates how to use `has()` to check if a user has a Feature.
filename: main.js
```js
import { Clerk } from '@clerk/clerk-js'
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
`
const pageContentDiv = document.getElementById('page-content')
const hasPremiumAccess = clerk.session.checkAuthorization({ feature: 'premium_access' })
if (!hasPremiumAccess) {
pageContentDiv.innerHTML = `
Only subscribers with the Premium Access feature can access this content.
`
} else {
pageContentDiv.innerHTML = `
Our Exclusive Content
`
}
```
### Example: Using ``
The [](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 `` that will be rendered if the user does not have the access control.
**Plan**
The following example demonstrates how to use `` to protect a page by checking if the user has a Plan.
> JS Frontend SDK doesn't support the `` component.
**Feature**
The following example demonstrates how to use `` to protect a page by checking if the user has a Feature.
> JS Frontend SDK doesn't support the `` component.
---
## Sitemap
[Overview of all docs pages](https://clerk.com/docs/llms.txt)