chore(vue): Replace callback props with event emitters in billing buttons (#6733)

Author: wobsoriano

.changeset/cuddly-masks-beam.md

@@ -0,0 +1,8 @@
+---
+"@clerk/vue": minor
+---
+
+Replaced callback props with event emitters in billing buttons:
+
+props `onSubscriptionComplete` → emit `subscription-complete`  
+props `onSubscriptionCancel`   → emit `subscription-cancel`

packages/vue/src/components/CheckoutButton.vue

@@ -5,7 +5,8 @@ import { useClerk } from '../composables/useClerk';
 import { useAuth } from '../composables/useAuth';
 import { assertSingleChild, normalizeWithDefaultValue } from '../utils';
 
-const props = defineProps<__experimental_CheckoutButtonProps>();
+type CheckoutButtonProps = Omit<__experimental_CheckoutButtonProps, 'onSubscriptionComplete'>;
+const props = defineProps<CheckoutButtonProps>();
 
 const clerk = useClerk();
 const { userId, orgId } = useAuth();
@@ -26,6 +27,8 @@ function getChildComponent() {
   return assertSingleChild(children, 'CheckoutButton');
 }
 
+const emit = defineEmits<{ (e: 'subscription-complete'): void }>();
+
 function clickHandler() {
   if (!clerk.value) {
     return;
@@ -35,9 +38,9 @@ function clickHandler() {
     planId: props.planId,
     planPeriod: props.planPeriod,
     for: props.for,
-    onSubscriptionComplete: props.onSubscriptionComplete,
     newSubscriptionRedirectUrl: props.newSubscriptionRedirectUrl,
     ...props.checkoutProps,
+    onSubscriptionComplete: () => emit('subscription-complete'),
   });
 }
 </script>

packages/vue/src/components/SubscriptionDetailsButton.vue

@@ -5,7 +5,8 @@ import { useClerk } from '../composables/useClerk';
 import { useAuth } from '../composables/useAuth';
 import { assertSingleChild, normalizeWithDefaultValue } from '../utils';
 
-const props = defineProps<__experimental_SubscriptionDetailsButtonProps>();
+type SubscriptionDetailsButtonProps = Omit<__experimental_SubscriptionDetailsButtonProps, 'onSubscriptionCancel'>;
+const props = defineProps<SubscriptionDetailsButtonProps>();
 
 const clerk = useClerk();
 const { userId, orgId } = useAuth();
@@ -26,15 +27,17 @@ function getChildComponent() {
   return assertSingleChild(children, 'SubscriptionDetailsButton');
 }
 
+const emit = defineEmits<{ (e: 'subscription-cancel'): void }>();
+
 function clickHandler() {
   if (!clerk.value) {
     return;
   }
 
   return clerk.value.__internal_openSubscriptionDetails({
     for: props.for,
-    onSubscriptionCancel: props.onSubscriptionCancel,
     ...props.subscriptionDetailsProps,
+    onSubscriptionCancel: () => emit('subscription-cancel'),
   });
 }
 </script>