feat(vue): Add Billing buttons (#6680)

panteliselef · web-flow · commit ea65f2079b8c · 2025-09-02T20:10:48.000+03:00
diff --git a/.changeset/cold-parks-push.md b/.changeset/cold-parks-push.md
@@ -0,0 +1,5 @@
+---
+'@clerk/vue': minor
+---
+
+Expose billing buttons as experimental
diff --git a/integration/templates/vue-vite/src/router.ts b/integration/templates/vue-vite/src/router.ts
@@ -47,6 +47,22 @@ const routes = [
     path: '/user',
     component: () => import('./views/Profile.vue'),
   },
+  // Billing button routes
+  {
+    name: 'CheckoutBtn',
+    path: '/billing/checkout-btn',
+    component: () => import('./views/billing/CheckoutBtn.vue'),
+  },
+  {
+    name: 'PlanDetailsBtn',
+    path: '/billing/plan-details-btn',
+    component: () => import('./views/billing/PlanDetailsBtn.vue'),
+  },
+  {
+    name: 'SubscriptionDetailsBtn',
+    path: '/billing/subscription-details-btn',
+    component: () => import('./views/billing/SubscriptionDetailsBtn.vue'),
+  },
 ];
 
 const router = createRouter({
diff --git a/integration/templates/vue-vite/src/views/billing/CheckoutBtn.vue b/integration/templates/vue-vite/src/views/billing/CheckoutBtn.vue
@@ -0,0 +1,17 @@
+<template>
+  <main>
+    <SignedIn>
+      <CheckoutButton
+        planId="cplan_2wMjqdlza0hTJc4HLCoBwAiExhF"
+        planPeriod="month"
+      >
+        Checkout Now
+      </CheckoutButton>
+    </SignedIn>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { SignedIn } from '@clerk/vue';
+import { CheckoutButton } from '@clerk/vue/experimental';
+</script>
diff --git a/integration/templates/vue-vite/src/views/billing/PlanDetailsBtn.vue b/integration/templates/vue-vite/src/views/billing/PlanDetailsBtn.vue
@@ -0,0 +1,9 @@
+<template>
+  <main>
+    <PlanDetailsButton planId="cplan_2wMjqdlza0hTJc4HLCoBwAiExhF"> Plan details </PlanDetailsButton>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { PlanDetailsButton } from '@clerk/vue/experimental';
+</script>
diff --git a/integration/templates/vue-vite/src/views/billing/SubscriptionDetailsBtn.vue b/integration/templates/vue-vite/src/views/billing/SubscriptionDetailsBtn.vue
@@ -0,0 +1,9 @@
+<template>
+  <main>
+    <SubscriptionDetailsButton> Subscription details </SubscriptionDetailsButton>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { SubscriptionDetailsButton } from '@clerk/vue/experimental';
+</script>
diff --git a/integration/tests/pricing-table.test.ts b/integration/tests/pricing-table.test.ts
@@ -32,9 +32,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     });
 
     test('renders pricing details of a specific plan', async ({ page, context }) => {
-      if (!app.name.includes('next')) {
-        return;
-      }
+      test.skip(app.name.includes('astro'), 'Still working on it');
+
       const u = createTestUtils({ app, page, context });
       await u.po.page.goToRelative('/billing/plan-details-btn');
 
@@ -83,9 +82,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
       page,
       context,
     }) => {
-      if (!app.name.includes('next')) {
-        return;
-      }
+      test.skip(app.name.includes('astro'), 'Still working on it');
       const u = createTestUtils({ app, page, context });
       await u.po.signIn.goTo();
       await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
@@ -100,9 +97,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     });
 
     test('when signed in, clicking checkout button open checkout drawer', async ({ page, context }) => {
-      if (!app.name.includes('next')) {
-        return;
-      }
+      test.skip(app.name.includes('astro'), 'Still working on it');
       const u = createTestUtils({ app, page, context });
       await u.po.signIn.goTo();
       await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
@@ -137,9 +132,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     });
 
     test('opens subscription details drawer', async ({ page, context }) => {
-      if (!app.name.includes('next')) {
-        return;
-      }
+      test.skip(app.name.includes('astro'), 'Still working on it');
       const u = createTestUtils({ app, page, context });
       await u.po.signIn.goTo();
       await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -30,6 +30,10 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./experimental": {
+      "types": "./dist/experimental.d.ts",
+      "default": "./dist/experimental.js"
+    },
     "./internal": {
       "types": "./dist/internal.d.ts",
       "default": "./dist/internal.js"
diff --git a/packages/vue/src/components/CheckoutButton.vue b/packages/vue/src/components/CheckoutButton.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useAttrs, useSlots } from 'vue';
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import { useClerk } from '../composables/useClerk';
+import { useAuth } from '../composables/useAuth';
+import { assertSingleChild, normalizeWithDefaultValue } from '../utils';
+
+const props = defineProps<__experimental_CheckoutButtonProps>();
+
+const clerk = useClerk();
+const { userId, orgId } = useAuth();
+const slots = useSlots();
+const attrs = useAttrs();
+
+// Authentication checks - similar to React implementation
+if (userId.value === null) {
+  throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
+}
+
+if (orgId.value === null && props.for === 'organization') {
+  throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
+}
+
+function getChildComponent() {
+  const children = normalizeWithDefaultValue(slots.default?.({}), 'Checkout');
+  return assertSingleChild(children, 'CheckoutButton');
+}
+
+function clickHandler() {
+  if (!clerk.value) {
+    return;
+  }
+
+  return clerk.value.__internal_openCheckout({
+    planId: props.planId,
+    planPeriod: props.planPeriod,
+    for: props.for,
+    onSubscriptionComplete: props.onSubscriptionComplete,
+    newSubscriptionRedirectUrl: props.newSubscriptionRedirectUrl,
+    ...props.checkoutProps,
+  });
+}
+</script>
+
+<template>
+  <component
+    :is="getChildComponent"
+    v-bind="attrs"
+    @click="clickHandler"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/packages/vue/src/components/PlanDetailsButton.vue b/packages/vue/src/components/PlanDetailsButton.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useAttrs, useSlots } from 'vue';
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import { useClerk } from '../composables/useClerk';
+import { assertSingleChild, normalizeWithDefaultValue } from '../utils';
+
+const props = defineProps<__experimental_PlanDetailsButtonProps>();
+
+const clerk = useClerk();
+const slots = useSlots();
+const attrs = useAttrs();
+
+function getChildComponent() {
+  const children = normalizeWithDefaultValue(slots.default?.({}), 'Plan details');
+  return assertSingleChild(children, 'PlanDetailsButton');
+}
+
+function clickHandler() {
+  if (!clerk.value) {
+    return;
+  }
+
+  return clerk.value.__internal_openPlanDetails({
+    plan: props.plan,
+    planId: props.planId,
+    initialPlanPeriod: props.initialPlanPeriod,
+    ...props.planDetailsProps,
+  } as __experimental_PlanDetailsButtonProps);
+}
+</script>
+
+<template>
+  <component
+    :is="getChildComponent"
+    v-bind="attrs"
+    @click="clickHandler"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/packages/vue/src/components/SubscriptionDetailsButton.vue b/packages/vue/src/components/SubscriptionDetailsButton.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useAttrs, useSlots } from 'vue';
+import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/types';
+import { useClerk } from '../composables/useClerk';
+import { useAuth } from '../composables/useAuth';
+import { assertSingleChild, normalizeWithDefaultValue } from '../utils';
+
+const props = defineProps<__experimental_SubscriptionDetailsButtonProps>();
+
+const clerk = useClerk();
+const { userId, orgId } = useAuth();
+const slots = useSlots();
+const attrs = useAttrs();
+
+// Authentication checks - similar to React implementation
+if (userId.value === null) {
+  throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
+}
+
+if (orgId.value === null && props.for === 'organization') {
+  throw new Error('Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.');
+}
+
+function getChildComponent() {
+  const children = normalizeWithDefaultValue(slots.default?.({}), 'Subscription details');
+  return assertSingleChild(children, 'SubscriptionDetailsButton');
+}
+
+function clickHandler() {
+  if (!clerk.value) {
+    return;
+  }
+
+  return clerk.value.__internal_openSubscriptionDetails({
+    for: props.for,
+    onSubscriptionCancel: props.onSubscriptionCancel,
+    ...props.subscriptionDetailsProps,
+  });
+}
+</script>
+
+<template>
+  <component
+    :is="getChildComponent"
+    v-bind="attrs"
+    @click="clickHandler"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/packages/vue/src/experimental.ts b/packages/vue/src/experimental.ts
@@ -0,0 +1,41 @@
+/**
+ * @experimental
+ * These components and their prop types are unstable and may change in future releases.
+ * They are part of Clerk's Billing feature which is available under public beta.
+ */
+export { default as SubscriptionDetailsButton } from './components/SubscriptionDetailsButton.vue';
+
+/**
+ * @experimental
+ * These components and their prop types are unstable and may change in future releases.
+ * They are part of Clerk's Billing feature which is available under public beta.
+ */
+export { default as CheckoutButton } from './components/CheckoutButton.vue';
+
+/**
+ * @experimental
+ * These components and their prop types are unstable and may change in future releases.
+ * They are part of Clerk's Billing feature which is available under public beta.
+ */
+export { default as PlanDetailsButton } from './components/PlanDetailsButton.vue';
+
+export type {
+  /**
+   * @experimental
+   * These components and their prop types are unstable and may change in future releases.
+   * They are part of Clerk's Billing feature which is available under public beta.
+   */
+  __experimental_SubscriptionDetailsButtonProps as SubscriptionDetailsButtonProps,
+  /**
+   * @experimental
+   * These components and their prop types are unstable and may change in future releases.
+   * They are part of Clerk's Billing feature which is available under public beta.
+   */
+  __experimental_CheckoutButtonProps as CheckoutButtonProps,
+  /**
+   * @experimental
+   * These components and their prop types are unstable and may change in future releases.
+   * They are part of Clerk's Billing feature which is available under public beta.
+   */
+  __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps,
+} from '@clerk/types';
diff --git a/packages/vue/src/utils/childrenUtils.ts b/packages/vue/src/utils/childrenUtils.ts
@@ -3,7 +3,14 @@ import { h, Text, type VNode } from 'vue';
 import { errorThrower } from '../errors/errorThrower';
 import { multipleChildrenInButtonComponent } from '../errors/messages';
 
-type ButtonName = 'SignInButton' | 'SignUpButton' | 'SignOutButton' | 'SignInWithMetamaskButton';
+type ButtonName =
+  | 'SignInButton'
+  | 'SignUpButton'
+  | 'SignOutButton'
+  | 'SignInWithMetamaskButton'
+  | 'SubscriptionDetailsButton'
+  | 'CheckoutButton'
+  | 'PlanDetailsButton';
 
 export const normalizeWithDefaultValue = (slotContent: VNode[] | undefined, defaultValue: string) => {
   // Render a button with the default value if no slot content is provided
diff --git a/packages/vue/tsup.config.ts b/packages/vue/tsup.config.ts
@@ -9,21 +9,21 @@ type EsbuildPlugin = NonNullable<Options['esbuildPlugins']>[number];
 export default defineConfig(() => {
   return {
     clean: true,
-    entry: ['./src/index.ts', './src/internal.ts', './src/errors.ts'],
+    entry: ['./src/index.ts', './src/experimental.ts', './src/internal.ts', './src/errors.ts'],
     format: ['esm'],
     bundle: true,
     sourcemap: true,
     minify: false,
     dts: false,
     esbuildPlugins: [
       // Adds .vue files support
-      vuePlugin() as EsbuildPlugin,
+      vuePlugin(),
       // Automatically generates runtime props from TypeScript types/interfaces for all
       // control and UI components, adding them to Vue components during build via
       // Object.defineProperty
       autoPropsPlugin({
         include: ['**/*.ts'],
-      }) as EsbuildPlugin,
+      }),
     ],
     define: {
       PACKAGE_NAME: `"${name}"`,

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@clerk/vue': minor
 +---
++
 +Expose billing buttons as experimental