Skip to main content

<CheckoutButton /> component

The <CheckoutButton /> component renders a button that opens the checkout drawer.

The <CheckoutButton /> component renders a button that opens the checkout drawer when selected, allowing users to subscribe to a Plan for either their or an Organization. It must be wrapped inside a <Show when="signed-in"> component to ensure the user is authenticated.

Important

Billing regularly introduces new features and UI changes to Clerk's components. If you'd like to remain on a specific version of Clerk's components or SDK, you can follow the steps in the pinning documentation.

Usage

<CheckoutButton /> must be wrapped inside a <Show when="signed-in"> component to ensure the user is authenticated.

<>
  // ❌ This will throw an error
  <CheckoutButton planId="cplan_xxx" />
  // ✅ Correct usage
  <Show when="signed-in">
    <CheckoutButton planId="cplan_xxx" />
  </Show>
</>

<CheckoutButton /> will throw an error if the for prop is set to 'organization' and no is set.

<>
  // ❌ This will throw an error if no Organization is active
  <CheckoutButton planId="cplan_xxx" for="organization" />
  // ✅ Correct usage
  {auth.orgId ? <CheckoutButton planId="cplan_xxx" for="organization" /> : null}
</>

<CheckoutButton /> preserves any click handlers attached to custom button elements, while maintaining the checkout drawer functionality.

<CheckoutButton planId="cplan_xxx">
  <button onClick={() => console.log('Starting checkout')} className="custom-button">
    Start Subscription
  </button>
</CheckoutButton>

Examples

pricing.vue
<script setup lang="ts">
import { Show } from '@clerk/vue'
import { CheckoutButton } from '@clerk/vue/experimental'
</script>

<template>
  <Show when="signed-in">
    <!-- Basic usage -->
    <CheckoutButton planId="cplan_xxx" planPeriod="month" />

    <!-- Customizes the appearance of the checkout drawer -->
    <CheckoutButton
      planId="cplan_xxx"
      planPeriod="annual"
      :checkoutProps="{
        appearance: {
          /* custom theme */
        },
      }"
    />

    <!-- Custom button -->
    <CheckoutButton
      planId="cplan_xxx"
      planPeriod="annual"
      :onSubscriptionComplete="
        () => {
          console.log('Subscription completed!')
        }
      "
      newSubscriptionRedirectUrl="/dashboard"
    >
      <button class="custom-button">Subscribe Now - $9.99/month</button>
    </CheckoutButton>
  </Show>
</template>

Properties

  • Name
    planId
    Type
    string
    Description

    The ID of the Plan to subscribe to.

  • Name
    planPeriod?
    Type
    'month' | 'annual'
    Description

    The billing period for the Subscription.

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

    Determines whether the Subscription is for the current user or Organization. Defaults to 'user'.

  • Name
    children?
    Type
    React.ReactNode
    Description

    A custom button element. If not provided, defaults to a button with the text "Checkout".

  • Name
    onSubscriptionComplete?
    Type
    () => void
    Description

    A callback function that is called when a Subscription is successfully completed.

  • Name
    newSubscriptionRedirectUrl?
    Type
    string
    Description

    The URL to redirect to after a successful Subscription.

  • Name
    checkoutProps?
    Type
    { appearance: Appearance }
    Description

    Options for the checkout drawer. Accepts the following properties:

    • appearance: an object used to style your components. For example: <CheckoutButton checkoutProps={{ appearance: { ... } }} />.

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub