# 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=nuxt) 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/nuxt/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=nuxt) 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/nuxt/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: pages/pricing.vue
```vue
<script setup lang="ts">
// Components are automatically imported
</script>

<template>
  <main>
    <PricingTable />
  </main>
</template>
```

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

**Plan**

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

filename: pages/bronze-content.vue
```vue
<script setup lang="ts">
import { computed } from 'vue'
import { useAuth } from '@clerk/nuxt/composables'

const { isLoaded, has } = useAuth()
const hasBronzePlan = computed(() => has.value?.({ plan: 'bronze' }))
</script>

<template>
  <main>
    <div v-if="!isLoaded">Loading...</div>
    <h1 v-else-if="!hasBronzePlan">Only subscribers to the Bronze plan can access this content.</h1>
    <h1 v-else>For Bronze subscribers only</h1>
  </main>
</template>
```

**Feature**

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

filename: pages/premium-content.vue
```vue
<script setup lang="ts">
import { computed } from 'vue'
import { useAuth } from '@clerk/nuxt/composables'

const { isLoaded, has } = useAuth()
const hasPremiumAccess = computed(() => has.value?.({ feature: 'premium_access' }))
</script>

<template>
  <main>
    <div v-if="!isLoaded">Loading...</div>
    <h1 v-else-if="!hasPremiumAccess">
      Only subscribers with the Premium Access feature can access this content.
    </h1>
    <h1 v-else>Our Exclusive Content</h1>
  </main>
</template>
```

### Example: Using `<Show>`

The [<Show>](https://clerk.com/docs/nuxt/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.

filename: pages/protected-content.vue
```vue
<script setup lang="ts">
// Components are automatically imported
</script>

<template>
  <main>
    <Show
      :when="{ plan: 'bronze' }"
      fallback="Only subscribers to the Bronze plan can access this content."
    >
      <h1>Exclusive Bronze Content</h1>
      <p>This content is only visible to Bronze subscribers.</p>
    </Show>
  </main>
</template>
```

**Feature**

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

filename: pages/protected-premium-content.vue
```vue
<script setup lang="ts">
// Components are automatically imported
</script>

<template>
  <main>
    <Show
      :when="{ feature: 'premium_access' }"
      fallback="Only subscribers with the Premium Access feature can access this content."
    >
      <h1>Exclusive Premium Content</h1>
      <p>This content is only visible to users with Premium Access feature.</p>
    </Show>
  </main>
</template>
```

---

## Sitemap

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