clerk · nikospapcom · May 5, 2025 · May 5, 2025
diff --git a/.changeset/full-webs-beam.md b/.changeset/full-webs-beam.md
@@ -0,0 +1,6 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+---
+
+Move `<__experimental_PaymentSources />` component under `Billing` -> `Subscriptions` tab and delete `Payment methods` tab
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx
@@ -5,7 +5,7 @@ import {
   SubscriberTypeContext,
   useSubscriptions,
 } from '../../contexts';
-import { Button, Col, descriptors, localizationKeys } from '../../customizables';
+import { Button, Col, descriptors, Flex, localizationKeys } from '../../customizables';
 import {
   Card,
   Header,
@@ -73,28 +73,26 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
             <Tab
               localizationKey={localizationKeys('userProfile.__experimental_billingPage.start.headerTitle__invoices')}
             />
-            <Tab
-              localizationKey={localizationKeys(
-                'userProfile.__experimental_billingPage.start.headerTitle__paymentMethods',
-              )}
-            />
           </TabsList>
           <TabPanels>
             <TabPanel sx={{ width: '100%', flexDirection: 'column' }}>
               {subscriptions.data.length > 0 ? (
-                <>
+                <Flex
+                  sx={{ width: '100%', flexDirection: 'column' }}
+                  gap={4}
+                >
                   <SubscriptionsList />
                   <Button
                     localizationKey='View all plans'
                     hasArrow
                     variant='ghost'
                     onClick={() => navigate('plans')}
-                    sx={t => ({
+                    sx={{
                       width: 'fit-content',
-                      marginTop: t.space.$4,
-                    })}
+                    }}
                   />
-                </>
+                  <__experimental_PaymentSources />
+                </Flex>
               ) : (
                 <__experimental_PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
                   <__experimental_PricingTable />
@@ -106,9 +104,6 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
                 <InvoicesList />
               </InvoicesContextProvider>
             </TabPanel>
-            <TabPanel sx={{ width: '100%' }}>
-              <__experimental_PaymentSources />
-            </TabPanel>
           </TabPanels>
         </Tabs>
       </Col>

diff --git a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx
@@ -111,7 +111,12 @@ const PaymentSources = () => {
       title={localizationKeys('userProfile.__experimental_billingPage.paymentSourcesSection.title')}
       centered={false}
       id='profile'
-      sx={{ paddingTop: 0, borderTop: 'none', flex: 1 }}
+      sx={t => ({
+        flex: 1,
+        borderTopWidth: t.borderWidths.$normal,
+        borderTopStyle: t.borderStyles.$solid,
+        borderTopColor: t.colors.$neutralAlpha100,
+      })}
     >
       <Action.Root>
         <ProfileSection.ItemList id='paymentSources'>

diff --git a/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx
@@ -5,7 +5,7 @@ import {
   SubscriberTypeContext,
   useSubscriptions,
 } from '../../contexts';
-import { Button, Col, descriptors, localizationKeys } from '../../customizables';
+import { Button, Col, descriptors, Flex, localizationKeys } from '../../customizables';
 import {
   Card,
   Header,
@@ -75,28 +75,26 @@ const BillingPageInternal = withCardStateProvider(() => {
             <Tab
               localizationKey={localizationKeys('userProfile.__experimental_billingPage.start.headerTitle__invoices')}
             />
-            <Tab
-              localizationKey={localizationKeys(
-                'userProfile.__experimental_billingPage.start.headerTitle__paymentMethods',
-              )}
-            />
           </TabsList>
           <TabPanels>
             <TabPanel sx={_ => ({ width: '100%', flexDirection: 'column' })}>
               {subscriptions.data.length > 0 ? (
-                <>
+                <Flex
+                  sx={{ width: '100%', flexDirection: 'column' }}
+                  gap={4}
+                >
                   <SubscriptionsList />
                   <Button
                     localizationKey='View all plans'
                     hasArrow
                     variant='ghost'
                     onClick={() => navigate('plans')}
-                    sx={t => ({
+                    sx={{
                       width: 'fit-content',
-                      marginTop: t.space.$4,
-                    })}
+                    }}
                   />
-                </>
+                  <__experimental_PaymentSources />
+                </Flex>
               ) : (
                 <__experimental_PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
                   <__experimental_PricingTable />
@@ -108,9 +106,6 @@ const BillingPageInternal = withCardStateProvider(() => {
                 <InvoicesList />
               </InvoicesContextProvider>
             </TabPanel>
-            <TabPanel sx={{ width: '100%' }}>
-              <__experimental_PaymentSources />
-            </TabPanel>
           </TabPanels>
         </Tabs>
       </Col>

diff --git a/packages/localizations/src/ar-SA.ts b/packages/localizations/src/ar-SA.ts
@@ -15,6 +15,7 @@ import type { LocalizationResource } from '@clerk/types';
 export const arSA: LocalizationResource = {
   locale: 'ar-SA',
   __experimental_commerce: {
+    availableFeatures: undefined,
     billedAnnually: undefined,
     cancelSubscription: undefined,
     checkout: {
@@ -33,22 +34,28 @@ export const arSA: LocalizationResource = {
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
+    defaultFreePlanActive: undefined,
     free: undefined,
     getStarted: undefined,
     keepSubscription: undefined,
     manage: undefined,
     manageSubscription: undefined,
     month: undefined,
     reSubscribe: undefined,
+    seeAllFeatures: undefined,
     switchPlan: undefined,
+    switchToAnnual: undefined,
+    viewFeatures: undefined,
   },
   backButton: 'الرجوع',
+  badge__canceledEndsAt: undefined,
   badge__currentPlan: undefined,
   badge__default: 'الأفتراضي',
   badge__endsAt: undefined,
   badge__expired: undefined,
   badge__otherImpersonatorDevice: 'جهاز منتحل آخر',
   badge__primary: 'الرئيسي',
+  badge__renewsAt: undefined,
   badge__requiresAction: 'الإجراء المطلوب',
   badge__startsAt: undefined,
   badge__thisDevice: 'هذا الجهاز',
@@ -707,7 +714,6 @@ export const arSA: LocalizationResource = {
       },
       start: {
         headerTitle__invoices: undefined,
-        headerTitle__paymentMethods: undefined,
         headerTitle__plans: undefined,
         headerTitle__subscriptions: undefined,
       },

diff --git a/packages/localizations/src/be-BY.ts b/packages/localizations/src/be-BY.ts
@@ -15,6 +15,7 @@ import type { LocalizationResource } from '@clerk/types';
 export const beBY: LocalizationResource = {
   locale: 'be-BY',
   __experimental_commerce: {
+    availableFeatures: undefined,
     billedAnnually: undefined,
     cancelSubscription: undefined,
     checkout: {
@@ -33,22 +34,28 @@ export const beBY: LocalizationResource = {
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
+    defaultFreePlanActive: undefined,
     free: undefined,
     getStarted: undefined,
     keepSubscription: undefined,
     manage: undefined,
     manageSubscription: undefined,
     month: undefined,
     reSubscribe: undefined,
+    seeAllFeatures: undefined,
     switchPlan: undefined,
+    switchToAnnual: undefined,
+    viewFeatures: undefined,
   },
   backButton: 'Назад',
+  badge__canceledEndsAt: undefined,
   badge__currentPlan: undefined,
   badge__default: 'Па-змаўчанні',
   badge__endsAt: undefined,
   badge__expired: undefined,
   badge__otherImpersonatorDevice: 'Іншая прылада',
   badge__primary: 'Асноўная',
+  badge__renewsAt: undefined,
   badge__requiresAction: 'Патрабуецца дзеянне',
   badge__startsAt: undefined,
   badge__thisDevice: 'Гэта прылада',
@@ -715,7 +722,6 @@ export const beBY: LocalizationResource = {
       },
       start: {
         headerTitle__invoices: undefined,
-        headerTitle__paymentMethods: undefined,
         headerTitle__plans: undefined,
         headerTitle__subscriptions: undefined,
       },

diff --git a/packages/localizations/src/bg-BG.ts b/packages/localizations/src/bg-BG.ts
@@ -15,6 +15,7 @@ import type { LocalizationResource } from '@clerk/types';
 export const bgBG: LocalizationResource = {
   locale: 'bg-BG',
   __experimental_commerce: {
+    availableFeatures: undefined,
     billedAnnually: undefined,
     cancelSubscription: undefined,
     checkout: {
@@ -33,22 +34,28 @@ export const bgBG: LocalizationResource = {
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
+    defaultFreePlanActive: undefined,
     free: undefined,
     getStarted: undefined,
     keepSubscription: undefined,
     manage: undefined,
     manageSubscription: undefined,
     month: undefined,
     reSubscribe: undefined,
+    seeAllFeatures: undefined,
     switchPlan: undefined,
+    switchToAnnual: undefined,
+    viewFeatures: undefined,
   },
   backButton: 'Назад',
+  badge__canceledEndsAt: undefined,
   badge__currentPlan: undefined,
   badge__default: 'По подразбиране',
   badge__endsAt: undefined,
   badge__expired: undefined,
   badge__otherImpersonatorDevice: 'Друго устройство за имитация',
   badge__primary: 'Основен',
+  badge__renewsAt: undefined,
   badge__requiresAction: 'Изисква действие',
   badge__startsAt: undefined,
   badge__thisDevice: 'Това устройство',
@@ -706,7 +713,6 @@ export const bgBG: LocalizationResource = {
       },
       start: {
         headerTitle__invoices: undefined,
-        headerTitle__paymentMethods: undefined,
         headerTitle__plans: undefined,
         headerTitle__subscriptions: undefined,
       },

diff --git a/packages/localizations/src/ca-ES.ts b/packages/localizations/src/ca-ES.ts
@@ -15,6 +15,7 @@ import type { LocalizationResource } from '@clerk/types';
 export const caES: LocalizationResource = {
   locale: 'ca-ES',
   __experimental_commerce: {
+    availableFeatures: undefined,
     billedAnnually: undefined,
     cancelSubscription: undefined,
     checkout: {
@@ -33,22 +34,28 @@ export const caES: LocalizationResource = {
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
+    defaultFreePlanActive: undefined,
     free: undefined,
     getStarted: undefined,
     keepSubscription: undefined,
     manage: undefined,
     manageSubscription: undefined,
     month: undefined,
     reSubscribe: undefined,
+    seeAllFeatures: undefined,
     switchPlan: undefined,
+    switchToAnnual: undefined,
+    viewFeatures: undefined,
   },
   backButton: 'Enrere',
+  badge__canceledEndsAt: undefined,
   badge__currentPlan: undefined,
   badge__default: 'Per defecte',
   badge__endsAt: undefined,
   badge__expired: undefined,
   badge__otherImpersonatorDevice: 'Un altre dispositiu impostor',
   badge__primary: 'Principal',
+  badge__renewsAt: undefined,
   badge__requiresAction: 'Requereix acció',
   badge__startsAt: undefined,
   badge__thisDevice: 'Aquest dispositiu',
@@ -710,7 +717,6 @@ export const caES: LocalizationResource = {
       },
       start: {
         headerTitle__invoices: undefined,
-        headerTitle__paymentMethods: undefined,
         headerTitle__plans: undefined,
         headerTitle__subscriptions: undefined,
       },

diff --git a/packages/localizations/src/cs-CZ.ts b/packages/localizations/src/cs-CZ.ts
@@ -15,6 +15,7 @@ import type { LocalizationResource } from '@clerk/types';
 export const csCZ: LocalizationResource = {
   locale: 'cs-CZ',
   __experimental_commerce: {
+    availableFeatures: undefined,
     billedAnnually: undefined,
     cancelSubscription: undefined,
     checkout: {
@@ -33,22 +34,28 @@ export const csCZ: LocalizationResource = {
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
+    defaultFreePlanActive: undefined,
     free: undefined,
     getStarted: undefined,
     keepSubscription: undefined,
     manage: undefined,
     manageSubscription: undefined,
     month: undefined,
     reSubscribe: undefined,
+    seeAllFeatures: undefined,
     switchPlan: undefined,
+    switchToAnnual: undefined,
+    viewFeatures: undefined,
   },
   backButton: 'Zpět',
+  badge__canceledEndsAt: undefined,
   badge__currentPlan: undefined,
   badge__default: 'Výchozí',
   badge__endsAt: undefined,
   badge__expired: undefined,
   badge__otherImpersonatorDevice: 'Jiné zařízení představitele',
   badge__primary: 'Hlavní',
+  badge__renewsAt: undefined,
   badge__requiresAction: 'Vyžaduje akci',
   badge__startsAt: undefined,
   badge__thisDevice: 'Toto zařízení',
@@ -706,7 +713,6 @@ export const csCZ: LocalizationResource = {
       },
       start: {
         headerTitle__invoices: undefined,
-        headerTitle__paymentMethods: undefined,
         headerTitle__plans: undefined,
         headerTitle__subscriptions: undefined,
       },