chore(clerk-js): Rename payment source to method internally

.changeset/wet-cameras-sneeze.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/src/core/modules/billing/payment-source-methods.ts

@@ -46,11 +46,10 @@ export const getPaymentMethods = async (params: GetPaymentMethodsParams) => {
     method: 'GET',
     search: convertPageToOffsetSearchParams(rest),
   }).then(res => {
-    const { data: paymentSources, total_count } =
-      res?.response as unknown as ClerkPaginatedResponse<BillingPaymentMethodJSON>;
+    const { data, total_count } = res?.response as unknown as ClerkPaginatedResponse<BillingPaymentMethodJSON>;
     return {
       total_count,
-      data: paymentSources.map(paymentMethod => new BillingPaymentMethod(paymentMethod)),
+      data: data.map(paymentMethod => new BillingPaymentMethod(paymentMethod)),
     };
   });
 };

packages/clerk-js/src/core/modules/checkout/__tests__/manager.test.ts

@@ -52,7 +52,7 @@ const createMockCheckoutResource = (overrides: Partial<BillingCheckoutResource>
     pathRoot: '',
     reload: vi.fn(),
   },
-  paymentSource: undefined,
+  paymentMethod: undefined,
   confirm: vi.fn(),
   reload: vi.fn(),
   pathRoot: '/checkout',

packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

@@ -15,8 +15,8 @@ import { DevOnly } from '../../common/DevOnly';
 import { useCheckoutContext, usePaymentMethods } from '../../contexts';
 import { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Spinner, Text } from '../../customizables';
 import { ChevronUpDown, InformationCircle } from '../../icons';
-import * as AddPaymentSource from '../PaymentSources/AddPaymentSource';
-import { PaymentSourceRow } from '../PaymentSources/PaymentSourceRow';
+import * as AddPaymentMethod from '../PaymentMethods/AddPaymentMethod';
+import { PaymentMethodRow } from '../PaymentMethods/PaymentMethodRow';
 import { SubscriptionBadge } from '../Subscriptions/badge';
 
 type PaymentMethodSource = 'existing' | 'new';
@@ -213,10 +213,10 @@ const CheckoutFormElements = () => {
 const CheckoutFormElementsInternal = () => {
   const { checkout } = useCheckout();
   const { id, totals, isImmediatePlanChange, freeTrialEndsAt } = checkout;
-  const { data: paymentSources } = usePaymentMethods();
+  const { data: paymentMethods } = usePaymentMethods();
 
   const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>
-    paymentSources.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',
+    paymentMethods.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',
   );
 
   const showPaymentMethods = isImmediatePlanChange && (totals.totalDueNow.amount > 0 || !!freeTrialEndsAt);
@@ -233,7 +233,7 @@ const CheckoutFormElementsInternal = () => {
     >
       {__BUILD_DISABLE_RHC__ ? null : (
         <>
-          {paymentSources.length > 0 && showPaymentMethods && (
+          {paymentMethods.length > 0 && showPaymentMethods && (
             <SegmentedControl.Root
               aria-label='Payment method source'
               value={paymentMethodSource}
@@ -255,18 +255,18 @@ const CheckoutFormElementsInternal = () => {
       )}
 
       {paymentMethodSource === 'existing' && (
-        <ExistingPaymentSourceForm
-          paymentSources={paymentSources}
+        <ExistingPaymentMethodForm
+          paymentMethods={paymentMethods}
           totalDueNow={totals.totalDueNow}
         />
       )}
 
-      {__BUILD_DISABLE_RHC__ ? null : paymentMethodSource === 'new' && <AddPaymentSourceForCheckout />}
+      {__BUILD_DISABLE_RHC__ ? null : paymentMethodSource === 'new' && <AddPaymentMethodForCheckout />}
     </Col>
   );
 };
 
-export const PayWithTestPaymentSource = () => {
+export const PayWithTestPaymentMethod = () => {
   const { isLoading } = useCardState();
   const { payWithTestCard } = useCheckoutMutations();
 
@@ -344,32 +344,32 @@ const useSubmitLabel = () => {
   return localizationKeys('commerce.subscribe');
 };
 
-const AddPaymentSourceForCheckout = withCardStateProvider(() => {
+const AddPaymentMethodForCheckout = withCardStateProvider(() => {
   const { addPaymentMethodAndPay } = useCheckoutMutations();
   const submitLabel = useSubmitLabel();
   const { checkout } = useCheckout();
 
   return (
-    <AddPaymentSource.Root
+    <AddPaymentMethod.Root
       onSuccess={addPaymentMethodAndPay}
       checkout={checkout}
     >
       <DevOnly>
-        <PayWithTestPaymentSource />
+        <PayWithTestPaymentMethod />
       </DevOnly>
 
-      <AddPaymentSource.FormButton text={submitLabel} />
-    </AddPaymentSource.Root>
+      <AddPaymentMethod.FormButton text={submitLabel} />
+    </AddPaymentMethod.Root>
   );
 });
 
-const ExistingPaymentSourceForm = withCardStateProvider(
+const ExistingPaymentMethodForm = withCardStateProvider(
   ({
     totalDueNow,
-    paymentSources,
+    paymentMethods,
   }: {
     totalDueNow: BillingMoneyAmount;
-    paymentSources: BillingPaymentMethodResource[];
+    paymentMethods: BillingPaymentMethodResource[];
   }) => {
     const submitLabel = useSubmitLabel();
     const { checkout } = useCheckout();
@@ -378,22 +378,22 @@ const ExistingPaymentSourceForm = withCardStateProvider(
     const { payWithExistingPaymentMethod } = useCheckoutMutations();
     const card = useCardState();
     const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<BillingPaymentMethodResource | undefined>(
-      paymentMethod || paymentSources.find(p => p.isDefault),
+      paymentMethod || paymentMethods.find(p => p.isDefault),
     );
 
     const options = useMemo(() => {
-      return paymentSources.map(source => {
+      return paymentMethods.map(method => {
         const label =
-          source.paymentType !== 'card'
-            ? `${capitalize(source.paymentType)}`
-            : `${capitalize(source.cardType)} ⋯ ${source.last4}`;
+          method.paymentType !== 'card'
+            ? `${capitalize(method.paymentType)}`
+            : `${capitalize(method.cardType)} ⋯ ${method.last4}`;
 
         return {
-          value: source.id,
+          value: method.id,
           label,
         };
       });
-    }, [paymentSources]);
+    }, [paymentMethods]);
 
     const showPaymentMethods = isImmediatePlanChange && (totalDueNow.amount > 0 || !!freeTrialEndsAt);
 
@@ -412,8 +412,8 @@ const ExistingPaymentSourceForm = withCardStateProvider(
             options={options}
             value={selectedPaymentMethod?.id || null}
             onChange={option => {
-              const paymentSource = paymentSources.find(source => source.id === option.value);
-              setSelectedPaymentMethod(paymentSource);
+              const paymentMethod = paymentMethods.find(source => source.id === option.value);
+              setSelectedPaymentMethod(paymentMethod);
             }}
             portal
           >
@@ -430,7 +430,7 @@ const ExistingPaymentSourceForm = withCardStateProvider(
                 backgroundColor: t.colors.$colorBackground,
               })}
             >
-              {selectedPaymentMethod && <PaymentSourceRow paymentSource={selectedPaymentMethod} />}
+              {selectedPaymentMethod && <PaymentMethodRow paymentMethod={selectedPaymentMethod} />}
             </SelectButton>
             <SelectOptionList
               sx={t => ({

packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx

@@ -450,7 +450,7 @@ describe('Checkout', () => {
         freeTrialDays: 7,
         freeTrialEnabled: true,
       },
-      paymentSource: undefined,
+      paymentMethod: undefined,
       confirm: vi.fn(),
       freeTrialEndsAt,
     } as any);
@@ -747,7 +747,7 @@ describe('Checkout', () => {
           freeTrialDays: 7,
           freeTrialEnabled: true,
         },
-        paymentSource: undefined,
+        paymentMethod: undefined,
         confirm: vi.fn(),
         freeTrialEndsAt: new Date('2025-08-19'),
       } as any);
@@ -780,17 +780,17 @@ describe('Checkout', () => {
       });
 
       await waitFor(() => {
-        const visaPaymentSource = getByText('visa');
-        expect(visaPaymentSource).toBeVisible();
+        const visaPaymentMethod = getByText('visa');
+        expect(visaPaymentMethod).toBeVisible();
 
         const last4Digits = getByText('⋯ 4242');
         expect(last4Digits).toBeVisible();
 
-        // Verify the default badge is shown for the first payment source
+        // Verify the default badge is shown for the first payment method
         const defaultBadge = getByText('Default');
         expect(defaultBadge).toBeVisible();
 
-        // Verify the hidden input contains the correct payment source id
+        // Verify the hidden input contains the correct payment method id
         const hiddenInput = baseElement.querySelector('input[name="payment_method_id"]');
         expect(hiddenInput).toHaveAttribute('value', 'pm_test_visa');
 
@@ -886,7 +886,7 @@ describe('Checkout', () => {
           freeTrialDays: 7,
           freeTrialEnabled: true,
         },
-        paymentSource: undefined,
+        paymentMethod: undefined,
         confirm: vi.fn(),
         freeTrialEndsAt: null,
       } as any);
@@ -919,17 +919,17 @@ describe('Checkout', () => {
       });
 
       await waitFor(() => {
-        const visaPaymentSource = getByText('visa');
-        expect(visaPaymentSource).toBeVisible();
+        const visaPaymentMethod = getByText('visa');
+        expect(visaPaymentMethod).toBeVisible();
 
         const last4Digits = getByText('⋯ 4242');
         expect(last4Digits).toBeVisible();
 
-        // Verify the default badge is shown for the first payment source
+        // Verify the default badge is shown for the first payment method
         const defaultBadge = getByText('Default');
         expect(defaultBadge).toBeVisible();
 
-        // Verify the hidden input contains the correct payment source id
+        // Verify the hidden input contains the correct payment method id
         const hiddenInput = baseElement.querySelector('input[name="payment_method_id"]');
         expect(hiddenInput).toHaveAttribute('value', 'pm_test_visa');
 
@@ -1025,7 +1025,7 @@ describe('Checkout', () => {
           freeTrialDays: 7,
           freeTrialEnabled: true,
         },
-        paymentSource: undefined,
+        paymentMethod: undefined,
         confirm: vi.fn(),
         freeTrialEndsAt: null,
       } as any);
@@ -1055,16 +1055,16 @@ describe('Checkout', () => {
         const addPaymentMethodButton = queryByText('Add payment method');
         expect(addPaymentMethodButton).toBeNull();
 
-        const visaPaymentSource = queryByText('visa');
-        expect(visaPaymentSource).toBeNull();
+        const visaPaymentMethod = queryByText('visa');
+        expect(visaPaymentMethod).toBeNull();
 
         expect(
           getByText(
             'You will keep your current subscription and its features until the end of the billing cycle, then you will be switched to this subscription.',
           ),
         ).toBeInTheDocument();
 
-        // Verify the hidden input contains the correct payment source id
+        // Verify the hidden input contains the correct payment method id
         const hiddenInput = baseElement.querySelector('input[name="payment_method_id"]');
         expect(hiddenInput).toHaveAttribute('value', 'pm_test_visa');
 

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx

@@ -8,7 +8,7 @@ import { SubscriberTypeContext } from '../../contexts';
 import { Col, descriptors, localizationKeys } from '../../customizables';
 import { useTabState } from '../../hooks/useTabState';
 import { PaymentAttemptsList } from '../PaymentAttempts';
-import { PaymentSources } from '../PaymentSources';
+import { PaymentMethods } from '../PaymentMethods';
 import { StatementsList } from '../Statements';
 import { SubscriptionsList } from '../Subscriptions';
 
@@ -68,7 +68,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
                 )}
               />
               <Protect condition={has => has({ permission: 'org:sys_billing:manage' })}>
-                <PaymentSources />
+                <PaymentMethods />
               </Protect>
             </TabPanel>
             <TabPanel sx={{ width: '100%' }}>