Skip to content

chore(types, localizations): Rename payment sources to method methods #6959

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

chore(types, localizations): Rename payment sources to method methods #6959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
122bcfc
wip
panteliselef Oct 10, 2025
b4152ed
wip 2
panteliselef Oct 10, 2025
43e9603
wip 3
panteliselef Oct 10, 2025
8554b7d
chore(types,localization): Rename payment sources to method methods
panteliselef Oct 10, 2025
8feb0eb
add changeset
panteliselef Oct 10, 2025
04dddd9
fix test
panteliselef Oct 10, 2025
32eaab3
fix missing changes
panteliselef Oct 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changeset/sad-bikes-tan.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment sources to method methods.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix typo in changeset description.

"method methods" should be "payment methods".

Apply this diff:

-[Billing Beta] Rename payment sources to method methods.
+[Billing Beta] Rename payment sources to payment methods.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
[Billing Beta] Rename payment sources to method methods.
[Billing Beta] Rename payment sources to payment methods.
🤖 Prompt for AI Agents 
.changeset/sad-bikes-tan.md around line 7: the changeset description contains a
typo "method methods" instead of "payment methods"; update that line to read
"[Billing Beta] Rename payment sources to payment methods." so the description
is correct and consistent.

Updates localization keys from `commerce` -> `billing` and `paymentSource` to `paymentMethod`.
4 changes: 2 additions & 2 deletions integration/tests/pricing-table.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -454,7 +454,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl

test.describe('in UserProfile', () => {
// test.describe.configure({ mode: 'serial' });
test('renders pricing table, subscribes to a plan, revalidates payment sources on complete and then downgrades to free', async ({
test('renders pricing table, subscribes to a plan, revalidates payment method on complete and then downgrades to free', async ({
page,
context,
}) => {
Expand Down Expand Up @@ -586,7 +586,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
await fakeUser.deleteIfExists();
});

test('adds payment source via checkout and resets stripe setup intent after failed payment', async ({
test('adds payment method via checkout and resets stripe setup intent after failed payment', async ({
page,
context,
}) => {
Expand Down
0 ...rc/core/resources/BillingPaymentSource.ts → ...rc/core/resources/BillingPaymentMethod.ts
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/clerk-js/src/core/resources/internal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export * from './BillingCheckout';
export * from './Feature';
export * from './BillingStatement';
export * from './BillingPayment';
export * from './BillingPaymentSource';
export * from './BillingPaymentMethod';
export * from './BillingPlan';
export * from './BillingSubscription';
export * from './DeletedObject';
Expand Down
18 changes: 9 additions & 9 deletions packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,10 +330,10 @@ export const CheckoutComplete = () => {
textVariant='h2'
localizationKey={
freeTrialEndsAt
? localizationKeys('commerce.checkout.title__trialSuccess')
? localizationKeys('billing.checkout.title__trialSuccess')
: totals.totalDueNow.amount > 0
? localizationKeys('commerce.checkout.title__paymentSuccessful')
: localizationKeys('commerce.checkout.title__subscriptionSuccessful')
? localizationKeys('billing.checkout.title__paymentSuccessful')
: localizationKeys('billing.checkout.title__subscriptionSuccessful')
}
sx={t => ({
opacity: 0,
Expand Down Expand Up @@ -387,8 +387,8 @@ export const CheckoutComplete = () => {
})}
localizationKey={
totals.totalDueNow.amount > 0
? localizationKeys('commerce.checkout.description__paymentSuccessful')
: localizationKeys('commerce.checkout.description__subscriptionSuccessful')
? localizationKeys('billing.checkout.description__paymentSuccessful')
: localizationKeys('billing.checkout.description__subscriptionSuccessful')
}
/>
</Span>
Expand Down Expand Up @@ -417,22 +417,22 @@ export const CheckoutComplete = () => {
>
<LineItems.Root>
<LineItems.Group variant='secondary'>
<LineItems.Title title={localizationKeys('commerce.checkout.lineItems.title__totalPaid')} />
<LineItems.Title title={localizationKeys('billing.checkout.lineItems.title__totalPaid')} />
<LineItems.Description text={`${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`} />
</LineItems.Group>

{freeTrialEndsAt ? (
<LineItems.Group variant='secondary'>
<LineItems.Title title={localizationKeys('commerce.checkout.lineItems.title__freeTrialEndsAt')} />
<LineItems.Title title={localizationKeys('billing.checkout.lineItems.title__freeTrialEndsAt')} />
<LineItems.Description text={formatDate(freeTrialEndsAt)} />
</LineItems.Group>
) : null}
<LineItems.Group variant='secondary'>
<LineItems.Title
title={
totals.totalDueNow.amount > 0 || freeTrialEndsAt !== null
? localizationKeys('commerce.checkout.lineItems.title__paymentMethod')
: localizationKeys('commerce.checkout.lineItems.title__subscriptionBegins')
? localizationKeys('billing.checkout.lineItems.title__paymentMethod')
: localizationKeys('billing.checkout.lineItems.title__subscriptionBegins')
}
/>
<LineItems.Description
Expand Down
32 changes: 16 additions & 16 deletions packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const CheckoutForm = withCardStateProvider(() => {
<LineItems.Group>
<LineItems.Title
title={plan.name}
description={planPeriod === 'annual' ? localizationKeys('commerce.billedAnnually') : undefined}
description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}
badge={
plan.freeTrialEnabled && freeTrialEndsAt ? (
<SubscriptionBadge subscription={{ status: 'free_trial' }} />
Expand All @@ -65,19 +65,19 @@ export const CheckoutForm = withCardStateProvider(() => {
<LineItems.Description
prefix={planPeriod === 'annual' ? 'x12' : undefined}
text={`${fee.currencySymbol}${fee.amountFormatted}`}
suffix={localizationKeys('commerce.checkout.perMonth')}
suffix={localizationKeys('billing.checkout.perMonth')}
/>
</LineItems.Group>
<LineItems.Group
borderTop
variant='tertiary'
>
<LineItems.Title title={localizationKeys('commerce.subtotal')} />
<LineItems.Title title={localizationKeys('billing.subtotal')} />
<LineItems.Description text={`${totals.subtotal.currencySymbol}${totals.subtotal.amountFormatted}`} />
</LineItems.Group>
{showCredits && (
<LineItems.Group variant='tertiary'>
<LineItems.Title title={localizationKeys('commerce.creditRemainder')} />
<LineItems.Title title={localizationKeys('billing.creditRemainder')} />
<LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />
</LineItems.Group>
)}
Expand All @@ -86,11 +86,11 @@ export const CheckoutForm = withCardStateProvider(() => {
<Tooltip.Root>
<Tooltip.Trigger>
<LineItems.Title
title={localizationKeys('commerce.pastDue')}
title={localizationKeys('billing.pastDue')}
icon={InformationCircle}
/>
</Tooltip.Trigger>
<Tooltip.Content text={localizationKeys('commerce.checkout.pastDueNotice')} />
<Tooltip.Content text={localizationKeys('billing.checkout.pastDueNotice')} />
</Tooltip.Root>
<LineItems.Description text={`${totals.pastDue?.currencySymbol}${totals.pastDue?.amountFormatted}`} />
</LineItems.Group>
Expand All @@ -99,7 +99,7 @@ export const CheckoutForm = withCardStateProvider(() => {
{!!freeTrialEndsAt && !!plan.freeTrialDays && (
<LineItems.Group variant='tertiary'>
<LineItems.Title
title={localizationKeys('commerce.checkout.totalDueAfterTrial', {
title={localizationKeys('billing.checkout.totalDueAfterTrial', {
days: plan.freeTrialDays,
})}
/>
Expand All @@ -110,7 +110,7 @@ export const CheckoutForm = withCardStateProvider(() => {
)}

<LineItems.Group borderTop>
<LineItems.Title title={localizationKeys('commerce.totalDueToday')} />
<LineItems.Title title={localizationKeys('billing.totalDueToday')} />
<LineItems.Description text={`${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`} />
</LineItems.Group>
</LineItems.Root>
Expand All @@ -125,7 +125,7 @@ export const CheckoutForm = withCardStateProvider(() => {
})}
>
<Text
localizationKey={localizationKeys('commerce.checkout.downgradeNotice')}
localizationKey={localizationKeys('billing.checkout.downgradeNotice')}
variant='caption'
colorScheme='secondary'
/>
Expand Down Expand Up @@ -243,11 +243,11 @@ const CheckoutFormElementsInternal = () => {
>
<SegmentedControl.Button
value='existing'
text={localizationKeys('commerce.paymentMethods')}
text={localizationKeys('billing.paymentMethods__label')}
/>
<SegmentedControl.Button
value='new'
text={localizationKeys('commerce.addPaymentMethod')}
text={localizationKeys('billing.addPaymentMethod__label')}
/>
</SegmentedControl.Root>
)}
Expand Down Expand Up @@ -307,13 +307,13 @@ export const PayWithTestPaymentMethod = () => {
color: t.colors.$warning500,
fontWeight: t.fontWeights.$semibold,
})}
localizationKey={localizationKeys('commerce.paymentSource.dev.developmentMode')}
localizationKey={localizationKeys('billing.paymentMethod.dev.developmentMode')}
/>
<Button
type='button'
block
variant='bordered'
localizationKey={localizationKeys('userProfile.billingPage.paymentSourcesSection.payWithTestCardButton')}
localizationKey={localizationKeys('userProfile.billingPage.paymentMethodsSection.payWithTestCardButton')}
colorScheme='secondary'
isLoading={isLoading}
onClick={payWithTestCard}
Expand All @@ -332,16 +332,16 @@ const useSubmitLabel = () => {
}

if (freeTrialEndsAt) {
return localizationKeys('commerce.startFreeTrial');
return localizationKeys('billing.startFreeTrial');
}

if (totals.totalDueNow.amount > 0) {
return localizationKeys('commerce.pay', {
return localizationKeys('billing.pay', {
amount: `${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`,
});
}

return localizationKeys('commerce.subscribe');
return localizationKeys('billing.subscribe');
};

const AddPaymentMethodForCheckout = withCardStateProvider(() => {
Expand Down
14 changes: 6 additions & 8 deletions packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ describe('Checkout', () => {
// Mock billing to prevent actual API calls and stay in loading state
fixtures.clerk.billing.startCheckout.mockResolvedValue({} as any);

const { baseElement } = render(
const { baseElement, getByRole } = render(
<Drawer.Root
open
onOpenChange={() => {}}
Expand All @@ -53,9 +53,7 @@ describe('Checkout', () => {
expect(baseElement.querySelector('[role="dialog"]')).toBeVisible();

// Verify the checkout title is displayed
const title = baseElement.querySelector('[data-localization-key="commerce.checkout.title"]');
expect(title).toBeVisible();
expect(title).toHaveTextContent('Checkout');
expect(getByRole('heading', { name: 'Checkout' })).toBeVisible();

// Verify spinner is shown during initialization
const spinner = baseElement.querySelector('span[aria-live="polite"]');
Expand Down Expand Up @@ -110,7 +108,7 @@ describe('Checkout', () => {
errors: [{ code: 'unknown_error' }],
});

const { baseElement } = render(
const { getByRole, baseElement } = render(
<Drawer.Root
open
onOpenChange={() => {}}
Expand All @@ -126,7 +124,7 @@ describe('Checkout', () => {
await waitFor(() => {
// Component should still render the drawer structure even with errors
expect(baseElement.querySelector('[role="dialog"]')).toBeVisible();
expect(baseElement.querySelector('[data-localization-key="commerce.checkout.title"]')).toBeVisible();
expect(getByRole('heading', { name: 'Checkout' })).toBeVisible();
});
});

Expand Down Expand Up @@ -171,7 +169,7 @@ describe('Checkout', () => {

fixtures.clerk.billing.startCheckout.mockResolvedValue({} as any);

const { baseElement } = render(
const { baseElement, getByRole } = render(
<Drawer.Root
open
onOpenChange={() => {}}
Expand All @@ -191,7 +189,7 @@ describe('Checkout', () => {
expect(dialog).toHaveAttribute('tabindex', '-1');

// Check heading hierarchy
const heading = baseElement.querySelector('h2[data-localization-key="commerce.checkout.title"]');
const heading = getByRole('heading', { name: 'Checkout' });
expect(heading).toBeVisible();

// Check focus guards for modal
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/components/Checkout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const Checkout = (props: __internal_CheckoutProps) => {
}}
>
<Drawer.Content>
<Drawer.Header title={localizationKeys('commerce.checkout.title')} />
<Drawer.Header title={localizationKeys('billing.checkout.title')} />
<CheckoutPage.Root>
<CheckoutPage.Stage name='needs_initialization'>
<CheckoutPage.FetchStatus status='fetching'>
Expand Down
12 changes: 6 additions & 6 deletions packages/clerk-js/src/ui/components/Checkout/parts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,12 @@ export const InvalidPlanScreen = () => {
<LineItems.Group>
<LineItems.Title
title={planFromError.name}
description={planPeriod === 'annual' ? localizationKeys('commerce.billedAnnually') : undefined}
description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}
/>
<LineItems.Description
prefix={planPeriod === 'annual' ? 'x12' : undefined}
text={`${planFromError.currency_symbol}${planPeriod === 'month' ? planFromError.amount_formatted : planFromError.annual_monthly_amount_formatted}`}
suffix={localizationKeys('commerce.checkout.perMonth')}
suffix={localizationKeys('billing.checkout.perMonth')}
/>
</LineItems.Group>
</LineItems.Root>
Expand All @@ -92,8 +92,8 @@ export const InvalidPlanScreen = () => {
colorScheme='info'
title={
isPlanUpgradePossible
? localizationKeys('commerce.cannotSubscribeMonthly')
: localizationKeys('commerce.cannotSubscribeUnrecoverable')
? localizationKeys('billing.cannotSubscribeMonthly')
: localizationKeys('billing.cannotSubscribeUnrecoverable')
}
/>
</Box>
Expand All @@ -113,8 +113,8 @@ export const AddEmailForm = () => {
})}
>
<EmailForm
title={localizationKeys('commerce.checkout.emailForm.title')}
subtitle={localizationKeys('commerce.checkout.emailForm.subtitle')}
title={localizationKeys('billing.checkout.emailForm.title')}
subtitle={localizationKeys('billing.checkout.emailForm.subtitle')}
onSuccess={() => void checkout.start()}
onReset={() => setIsOpen(false)}
disableAutoFocus
Expand Down
6 changes: 3 additions & 3 deletions packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ export const PaymentAttemptPage = () => {
>
<Text
variant='h3'
localizationKey={localizationKeys('commerce.totalDue')}
localizationKey={localizationKeys('billing.totalDue')}
elementDescriptor={descriptors.paymentAttemptFooterLabel}
/>
<Span
Expand Down Expand Up @@ -236,14 +236,14 @@ function PaymentAttemptBody({ subscriptionItem }: { subscriptionItem: BillingSub
borderTop
variant='tertiary'
>
<LineItems.Title title={localizationKeys('commerce.subtotal')} />
<LineItems.Title title={localizationKeys('billing.subtotal')} />
<LineItems.Description
text={`${subscriptionItem.amount?.currencySymbol}${subscriptionItem.amount?.amountFormatted}`}
/>
</LineItems.Group>
{subscriptionItem.credit && subscriptionItem.credit.amount.amount > 0 && (
<LineItems.Group variant='tertiary'>
<LineItems.Title title={localizationKeys('commerce.credit')} />
<LineItems.Title title={localizationKeys('billing.credit')} />
<LineItems.Description
text={`- ${subscriptionItem.credit.amount.currencySymbol}${subscriptionItem.credit.amount.amountFormatted}`}
/>
Expand Down
6 changes: 3 additions & 3 deletions packages/clerk-js/src/ui/components/PaymentMethods/AddPaymentMethod.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,8 @@ const AddPaymentMethodRoot = ({ children, checkout, ...rest }: PropsWithChildren
paymentDescription={t(
localizationKeys(
checkout?.planPeriod === 'month'
? 'commerce.paymentSource.applePayDescription.monthly'
: 'commerce.paymentSource.applePayDescription.annual',
? 'billing.paymentMethod.applePayDescription.monthly'
: 'billing.paymentMethod.applePayDescription.annual',
),
)}
>
Expand Down Expand Up @@ -238,7 +238,7 @@ const AddPaymentMethodForm = ({ children }: PropsWithChildren) => {
isDisabled={!isFormReady}
submitLabel={
submitLabel ??
localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.formButtonPrimary__add`)
localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.formButtonPrimary__add`)
}
onReset={cancelAction}
hideReset={!cancelAction}
Expand Down
Loading
Loading