From ef34eede32e9ac20fd67d0785144d45e16fc0675 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 19 Nov 2025 13:19:24 -0300
Subject: [PATCH 1/3] Replace `useOrganization` with `useOrganizationContext`

---
 .changeset/cuddly-cougars-buy.md                       |  5 +++++
 .../components/PaymentAttempts/PaymentAttemptPage.tsx  |  8 ++++----
 .../ui/components/PaymentMethods/PaymentMethods.tsx    | 10 +++++-----
 .../ui/components/PricingTable/PricingTableDefault.tsx |  6 +++---
 .../src/ui/components/Statements/StatementPage.tsx     |  8 ++++----
 .../src/ui/components/SubscriptionDetails/index.tsx    |  8 ++++----
 packages/clerk-js/src/ui/contexts/components/Plans.tsx |  6 +++---
 7 files changed, 28 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/cuddly-cougars-buy.md

diff --git a/.changeset/cuddly-cougars-buy.md b/.changeset/cuddly-cougars-buy.md
new file mode 100644
index 00000000000..f98f76a6c47
--- /dev/null
+++ b/.changeset/cuddly-cougars-buy.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Internal change, not user facing: Replace `useOrganization` within billing components with `useOrganizationContext`
diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
index 805940db2be..98f333dd2a1 100644
--- a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganizationContext } from '@clerk/shared/react';
 import type { BillingSubscriptionItemResource } from '@clerk/shared/types';
 import useSWR from 'swr';
 
@@ -29,7 +29,7 @@ import { useRouter } from '../../router';
 export const PaymentAttemptPage = () => {
   const { params, navigate } = useRouter();
   const subscriberType = useSubscriberTypeContext();
-  const { organization } = useOrganization();
+  const organizationCtx = useOrganizationContext();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
   const { t, translateError } = useLocalizations();
   const clerk = useClerk();
@@ -43,13 +43,13 @@ export const PaymentAttemptPage = () => {
       ? {
           type: 'payment-attempt',
           id: params.paymentAttemptId,
-          orgId: subscriberType === 'organization' ? organization?.id : undefined,
+          orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
         }
       : null,
     () =>
       clerk.billing.getPaymentAttempt({
         id: params.paymentAttemptId,
-        orgId: subscriberType === 'organization' ? organization?.id : undefined,
+        orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
       }),
   );
 
diff --git a/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx b/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx
index 7b53795ce9d..eef804f0489 100644
--- a/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx
@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganizationContext } from '@clerk/shared/react';
 import type { BillingPaymentMethodResource } from '@clerk/shared/types';
 import { Fragment, useMemo, useRef } from 'react';
 
@@ -60,7 +60,7 @@ const RemoveScreen = ({
   const { close } = useActionContext();
   const card = useCardState();
   const subscriberType = useSubscriberTypeContext();
-  const { organization } = useOrganization();
+  const organizationCtx = useOrganizationContext();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
   const ref = useRef(
     `${paymentMethod.paymentType === 'card' ? paymentMethod.cardType : paymentMethod.paymentType} ${paymentMethod.paymentType === 'card' ? `⋯ ${paymentMethod.last4}` : '-'}`,
@@ -72,7 +72,7 @@ const RemoveScreen = ({
 
   const removePaymentMethod = async () => {
     await paymentMethod
-      .remove({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
+      .remove({ orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined })
       .then(revalidate)
       .catch((error: Error) => {
         handleError(error, [], card.setError);
@@ -196,7 +196,7 @@ const PaymentMethodMenu = ({
 }) => {
   const { open } = useActionContext();
   const card = useCardState();
-  const { organization } = useOrganization();
+  const organizationCtx = useOrganizationContext();
   const subscriberType = useSubscriberTypeContext();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
 
@@ -215,7 +215,7 @@ const PaymentMethodMenu = ({
       isDestructive: false,
       onClick: () => {
         paymentMethod
-          .makeDefault({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
+          .makeDefault({ orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined })
           .then(revalidate)
           .catch((error: Error) => {
             handleError(error, [], card.setError);
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index 8a17eb8f883..33e04b6f17e 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -1,4 +1,4 @@
-import { useClerk, useOrganization, useSession } from '@clerk/shared/react';
+import { useClerk, useOrganizationContext, useSession } from '@clerk/shared/react';
 import type { BillingPlanResource, BillingSubscriptionPlanPeriod, PricingTableProps } from '@clerk/shared/types';
 import * as React from 'react';
 
@@ -104,7 +104,7 @@ function Card(props: CardProps) {
   const { isSignedIn } = useSession();
   const { mode = 'mounted', ctaPosition: ctxCtaPosition } = usePricingTableContext();
   const subscriberType = useSubscriberTypeContext();
-  const { organization } = useOrganization();
+  const organizationCtx = useOrganizationContext();
 
   const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';
   const collapseFeatures = pricingTableProps.collapseFeatures || false;
@@ -137,7 +137,7 @@ function Card(props: CardProps) {
     plan,
     planPeriod,
     for: pricingTableProps.for,
-    hasActiveOrganization: !!organization,
+    hasActiveOrganization: !!organizationCtx?.organization,
   });
 
   return (
diff --git a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
index 6c64b7d861b..a74de43d3f9 100644
--- a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
+++ b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganizationContext } from '@clerk/shared/react';
 import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
@@ -23,7 +23,7 @@ import { Statement } from './Statement';
 export const StatementPage = () => {
   const { params, navigate } = useRouter();
   const subscriberType = useSubscriberTypeContext();
-  const { organization } = useOrganization();
+  const organizationCtx = useOrganizationContext();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
   const { t, translateError } = useLocalizations();
   const clerk = useClerk();
@@ -37,13 +37,13 @@ export const StatementPage = () => {
       ? {
           type: 'statement',
           id: params.statementId,
-          orgId: subscriberType === 'organization' ? organization?.id : undefined,
+          orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
         }
       : null,
     () =>
       clerk.billing.getStatement({
         id: params.statementId,
-        orgId: subscriberType === 'organization' ? organization?.id : undefined,
+        orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
       }),
   );
 
diff --git a/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx b/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
index 730d50c4b49..7df3a7250d2 100644
--- a/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
+++ b/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganizationContext } from '@clerk/shared/react';
 import type {
   __internal_CheckoutProps,
   __internal_SubscriptionDetailsProps,
@@ -173,7 +173,7 @@ const SubscriptionDetailsInternal = (props: __internal_SubscriptionDetailsProps)
 
 const SubscriptionDetailsFooter = withCardStateProvider(() => {
   const subscriberType = useSubscriberTypeContext();
-  const { organization } = useOrganization();
+  const organizationCtx = useOrganizationContext();
   const { isLoading, error, setError, setLoading, setIdle } = useCardState();
   const {
     subscription: selectedSubscription,
@@ -195,7 +195,7 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
     setLoading();
 
     await selectedSubscription
-      .cancel({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
+      .cancel({ orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined })
       .then(() => {
         onSubscriptionCancel?.();
         if (setIsOpen) {
@@ -213,7 +213,7 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
     setError,
     setLoading,
     subscriberType,
-    organization?.id,
+    organizationCtx?.organization?.id,
     onSubscriptionCancel,
     setIsOpen,
     setIdle,
diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index 577d31582d7..5ce27148186 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -5,7 +5,7 @@ import {
   __experimental_useStatements,
   __experimental_useSubscription,
   useClerk,
-  useOrganization,
+  useOrganizationContext,
   useSession,
 } from '@clerk/shared/react';
 import type {
@@ -32,7 +32,7 @@ export function normalizeFormatted(formatted: string) {
 
 const useBillingHookParams = () => {
   const subscriberType = useSubscriberTypeContext();
-  const { organization } = useOrganization();
+  const organizationCtx = useOrganizationContext();
   const allowBillingRoutes = useProtect(
     has =>
       has({
@@ -44,7 +44,7 @@ const useBillingHookParams = () => {
     for: subscriberType,
     keepPreviousData: true,
     // If the user is in an organization, only fetch billing data if they have the necessary permissions
-    enabled: subscriberType === 'organization' ? Boolean(organization) && allowBillingRoutes : true,
+    enabled: subscriberType === 'organization' ? Boolean(organizationCtx?.organization) && allowBillingRoutes : true,
   };
 };
 

From eccdbdf6535f3890441f19b01381e86b1897fbdc Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 19 Nov 2025 13:38:15 -0300
Subject: [PATCH 2/3] Update changeset

---
 .changeset/cuddly-cougars-buy.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/cuddly-cougars-buy.md b/.changeset/cuddly-cougars-buy.md
index f98f76a6c47..5ec19993237 100644
--- a/.changeset/cuddly-cougars-buy.md
+++ b/.changeset/cuddly-cougars-buy.md
@@ -2,4 +2,4 @@
 '@clerk/clerk-js': patch
 ---
 
-Internal change, not user facing: Replace `useOrganization` within billing components with `useOrganizationContext`
+Internal change, not user facing: Replace `useOrganization` with `useOrganizationContext` in billing components

From 83e7f51d5d3d5fa8282f317f5a7fd342873d7a48 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 19 Nov 2025 14:48:24 -0300
Subject: [PATCH 3/3] Add comments to clarify context usage

---
 .changeset/cuddly-cougars-buy.md                            | 2 +-
 .../ui/components/PaymentAttempts/PaymentAttemptPage.tsx    | 3 ++-
 .../src/ui/components/PaymentMethods/PaymentMethods.tsx     | 6 ++++--
 .../src/ui/components/PricingTable/PricingTableDefault.tsx  | 1 +
 .../clerk-js/src/ui/components/Statements/StatementPage.tsx | 3 ++-
 .../src/ui/components/SubscriptionDetails/index.tsx         | 3 ++-
 packages/clerk-js/src/ui/contexts/components/Plans.tsx      | 3 ++-
 7 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/.changeset/cuddly-cougars-buy.md b/.changeset/cuddly-cougars-buy.md
index 5ec19993237..0c3575cfecd 100644
--- a/.changeset/cuddly-cougars-buy.md
+++ b/.changeset/cuddly-cougars-buy.md
@@ -2,4 +2,4 @@
 '@clerk/clerk-js': patch
 ---
 
-Internal change, not user facing: Replace `useOrganization` with `useOrganizationContext` in billing components
+Internal change, not user-facing: Replace `useOrganization` with `useOrganizationContext` in billing components
diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
index 98f333dd2a1..8574c783daf 100644
--- a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
@@ -29,10 +29,11 @@ import { useRouter } from '../../router';
 export const PaymentAttemptPage = () => {
   const { params, navigate } = useRouter();
   const subscriberType = useSubscriberTypeContext();
-  const organizationCtx = useOrganizationContext();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
   const { t, translateError } = useLocalizations();
   const clerk = useClerk();
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
+  const organizationCtx = useOrganizationContext();
 
   const {
     data: paymentAttempt,
diff --git a/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx b/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx
index eef804f0489..dec38b4c5ec 100644
--- a/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx
@@ -60,11 +60,12 @@ const RemoveScreen = ({
   const { close } = useActionContext();
   const card = useCardState();
   const subscriberType = useSubscriberTypeContext();
-  const organizationCtx = useOrganizationContext();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
   const ref = useRef(
     `${paymentMethod.paymentType === 'card' ? paymentMethod.cardType : paymentMethod.paymentType} ${paymentMethod.paymentType === 'card' ? `⋯ ${paymentMethod.last4}` : '-'}`,
   );
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
+  const organizationCtx = useOrganizationContext();
 
   if (!ref.current) {
     return null;
@@ -196,9 +197,10 @@ const PaymentMethodMenu = ({
 }) => {
   const { open } = useActionContext();
   const card = useCardState();
-  const organizationCtx = useOrganizationContext();
   const subscriberType = useSubscriberTypeContext();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
+  const organizationCtx = useOrganizationContext();
 
   const actions = [
     {
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index 33e04b6f17e..879ed453c3c 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -104,6 +104,7 @@ function Card(props: CardProps) {
   const { isSignedIn } = useSession();
   const { mode = 'mounted', ctaPosition: ctxCtaPosition } = usePricingTableContext();
   const subscriberType = useSubscriberTypeContext();
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
   const organizationCtx = useOrganizationContext();
 
   const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';
diff --git a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
index a74de43d3f9..03b6f933568 100644
--- a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
+++ b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
@@ -23,10 +23,11 @@ import { Statement } from './Statement';
 export const StatementPage = () => {
   const { params, navigate } = useRouter();
   const subscriberType = useSubscriberTypeContext();
-  const organizationCtx = useOrganizationContext();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
   const { t, translateError } = useLocalizations();
   const clerk = useClerk();
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
+  const organizationCtx = useOrganizationContext();
 
   const {
     data: statement,
diff --git a/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx b/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
index 7df3a7250d2..3f88b8f46ae 100644
--- a/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
+++ b/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
@@ -173,7 +173,6 @@ const SubscriptionDetailsInternal = (props: __internal_SubscriptionDetailsProps)
 
 const SubscriptionDetailsFooter = withCardStateProvider(() => {
   const subscriberType = useSubscriberTypeContext();
-  const organizationCtx = useOrganizationContext();
   const { isLoading, error, setError, setLoading, setIdle } = useCardState();
   const {
     subscription: selectedSubscription,
@@ -183,6 +182,8 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
   const { data: subscription } = useSubscription();
   const { setIsOpen } = useDrawerContext();
   const { onSubscriptionCancel } = useSubscriptionDetailsContext();
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
+  const organizationCtx = useOrganizationContext();
 
   const onOpenChange = useCallback((open: boolean) => setConfirmationOpen(open), [setConfirmationOpen]);
 
diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index 5ce27148186..834b37fdb06 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -32,13 +32,14 @@ export function normalizeFormatted(formatted: string) {
 
 const useBillingHookParams = () => {
   const subscriberType = useSubscriberTypeContext();
-  const organizationCtx = useOrganizationContext();
   const allowBillingRoutes = useProtect(
     has =>
       has({
         permission: 'org:sys_billing:read',
       }) || has({ permission: 'org:sys_billing:manage' }),
   );
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
+  const organizationCtx = useOrganizationContext();
 
   return {
     for: subscriberType,