<SubscriptionDetailsButton /> component
The <SubscriptionDetailsButton /> component renders a button that opens the subscription details drawer when selected, allowing users to view and manage their subscription details, whether for their personal account or organization. It must be wrapped inside a <SignedIn /> component to ensure the user is authenticated.
Properties
All props are optional.
- Name
for?- Type
'user' | 'organization'- Description
Determines whether to show subscription details for the current user or organization. Defaults to
'user'.
- Name
children?- Type
React.ReactNode- Description
Optional custom button element. If not provided, defaults to a button with the text "Subscription details".
- Name
onSubscriptionCancel?- Type
() => void- Description
A callback function that is called when a subscription is cancelled.
- Name
subscriptionDetailsProps?- Type
{ appearance: Appearance }- Description
Options for the subscription details drawer. Accepts the following properties:
appearance: an object used to style your components. For example:<SubscriptionDetailsButton subscriptionDetailsProps={{ appearance: { ... } }} />.
Usage
<SubscriptionDetailsButton /> must be wrapped inside a <SignedIn /> component to ensure the user is authenticated.
<>
// ❌ This will throw an error
<SubscriptionDetailsButton />
// ✅ Correct usage
<SignedIn>
<SubscriptionDetailsButton />
</SignedIn>
</><SubscriptionDetailsButton /> 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
<SubscriptionDetailsButton for="organization" />
// ✅ Correct usage
{auth.orgId ? <SubscriptionDetailsButton for="organization" /> : null}
</>'use client'
import { SignedIn } from '@clerk/nextjs'
import { SubscriptionDetailsButton } from '@clerk/nextjs/experimental'
export default function BillingPage() {
return (
<SignedIn>
{/* Basic usage */}
<SubscriptionDetailsButton />
{/* Customizes the appearance of the subscription details drawer */}
<SubscriptionDetailsButton
subscriptionDetailsProps={{
appearance: {
/* custom theme */
},
}}
/>
{/* Custom button */}
<SubscriptionDetailsButton onSubscriptionCancel={() => console.log('Subscription canceled')}>
<button className="custom-button">
<Icon name="subscription" />
Manage Subscription
</button>
</SubscriptionDetailsButton>
</SignedIn>
)
}import { SignedIn } from '@clerk/clerk-react'
import { SubscriptionDetailsButton } from '@clerk/clerk-react/experimental'
const BillingSection = () => {
return (
<SignedIn>
{/* Basic usage */}
<SubscriptionDetailsButton />
{/* Customizes the appearance of the subscription details drawer */}
<SubscriptionDetailsButton
subscriptionDetailsProps={{
appearance: {
/* custom theme */
},
}}
/>
{/* Custom button */}
<SubscriptionDetailsButton onSubscriptionCancel={() => console.log('Subscription canceled')}>
<button className="custom-button">
<Icon name="subscription" />
Manage Subscription
</button>
</SubscriptionDetailsButton>
</SignedIn>
)
}
export default BillingSection<script setup lang="ts">
import { SignedIn } from '@clerk/vue'
import { SubscriptionDetailsButton } from '@clerk/vue/experimental'
</script>
<template>
<SignedIn>
<!-- Basic usage -->
<SubscriptionDetailsButton />
<!-- Customizes the appearance of the subscription details drawer -->
<SubscriptionDetailsButton
:subscriptionDetailsProps="{
appearance: {
/* custom theme */
},
}"
/>
<!-- Custom button -->
<SubscriptionDetailsButton :onSubscriptionCancel="() => console.log('Subscription canceled')">
<button class="custom-button">Manage Subscription</button>
</SubscriptionDetailsButton>
</SignedIn>
</template>Feedback
Last updated on