Skip to main content
Docs

<PricingTable />

The <PricingTable /> component displays a table of Plans and Features that users can subscribe to.

The <PricingTable /> component displays a table of Plans and Features that users can subscribe to.

Usage with JavaScript

The following methods available on an instance of the Clerk class are used to render and control the <PricingTable /> component:

The following examples assume that you followed the quickstart to add Clerk to your JavaScript app.

mountPricingTable()

function mountPricingTable(node: HTMLDivElement, props?: PricingTableProps): void

mountPricingTable() params

  • Name
    node
    Type
    HTMLDivElement
    Description

    The container <div> element used to render in the <PricingTable /> component

  • Name
    props?
    Type
    PricingTableProps
    Description

    The properties to pass to the <PricingTable /> component

mountPricingTable() usage

main.js
import { Clerk } from '@clerk/clerk-js'

// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load()

document.getElementById('app').innerHTML = `
  <div id="pricing-table"></div>
`

const pricingTableDiv = document.getElementById('pricing-table')

clerk.mountPricingTable(pricingTableDiv)

unmountPricingTable()

function unmountPricingTable(node: HTMLDivElement): void

unmountPricingTable() params

  • Name
    node
    Type
    HTMLDivElement
    Description

    The container <div> element with a rendered <PricingTable /> component instance

unmountPricingTable() usage

main.js
import { Clerk } from '@clerk/clerk-js'

// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load()

document.getElementById('app').innerHTML = `
  <div id="pricing-table"></div>
`

const pricingTableDiv = document.getElementById('pricing-table')

clerk.mountPricingTable(pricingTableDiv)

// ...

clerk.unmountPricingTable(pricingTableDiv)

Properties

All props are optional.

  • Name
    appearance
    Type
    Appearance | undefined
    Description

    Optional object to style your components. Will only affect Clerk components and not Account Portal pages.

  • Name
    checkoutProps
    Type
    { appearance: Appearance }
    Description

    Options for the checkout drawer. Accepts the following properties:

  • Name
    collapseFeatures
    Type
    boolean
    Description

    A boolean that indicates whether the features are collapsed. Requires layout to be set to 'default'. Defaults to false.

  • Name
    ctaPosition
    Type
    'top' | 'bottom'
    Description

    The placement of the CTA button. Requires layout to be set to 'default'. Defaults to 'bottom'.

  • Name
    fallback
    Type
    JSX
    Description

    An optional UI to show when the pricing table is loading.

  • Name
    for
    Type
    'user' | 'organization'
    Description

    A string that indicates whether the pricing table is for users or organizations. If 'user', the pricing table will display a list of plans and features that users can subscribe to. If 'organization', the pricing table will display a list of plans and features that organizations can subscribe to. Defaults to 'user'.

  • Name
    newSubscriptionRedirectUrl
    Type
    string
    Description

    The URL to navigate to after the user completes the checkout and selects the "Continue" button.

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on