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

Merged
merged 8 commits into from
Oct 13, 2025
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 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
5d1afe8
Merge branch 'main' into elef/bill-1264-rename-sources-methods-locali…
panteliselef Oct 13, 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
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
24 changes: 11 additions & 13 deletions packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@ const AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void
cancelAction={close}
>
<AddPaymentMethod.FormHeader
text={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
text={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.add`)}
/>
<AddPaymentMethod.FormSubtitle
text={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.addSubtitle`)}
text={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.addSubtitle`)}
/>
<DevOnly>
<TestPaymentMethod />
Expand Down Expand Up @@ -81,20 +81,18 @@ const RemoveScreen = ({

return (
<RemoveResourceForm
title={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.removeResource.title`)}
title={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.title`)}
messageLine1={localizationKeys(
`${localizationRoot}.billingPage.paymentSourcesSection.removeResource.messageLine1`,
`${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.messageLine1`,
{
identifier: ref.current,
},
)}
messageLine2={localizationKeys(
`${localizationRoot}.billingPage.paymentSourcesSection.removeResource.messageLine2`,
)}
messageLine2={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.messageLine2`)}
successMessage={localizationKeys(
`${localizationRoot}.billingPage.paymentSourcesSection.removeResource.successMessage`,
`${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.successMessage`,
{
paymentSource: ref.current,
paymentMethod: ref.current,
},
)}
deleteResource={removePaymentMethod}
Expand Down Expand Up @@ -127,7 +125,7 @@ export const PaymentMethods = withCardStateProvider(() => {

return (
<ProfileSection.Root
title={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.title`)}
title={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.title`)}
centered={false}
id='paymentMethods'
sx={t => ({
Expand Down Expand Up @@ -171,7 +169,7 @@ export const PaymentMethods = withCardStateProvider(() => {
<Action.Trigger value='add'>
<ProfileSection.ArrowButton
id='paymentMethods'
localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.add`)}
/>
</Action.Trigger>
<Action.Open value='add'>
Expand Down Expand Up @@ -204,7 +202,7 @@ const PaymentMethodMenu = ({

const actions = [
{
label: localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.actionLabel__remove`),
label: localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.actionLabel__remove`),
isDestructive: true,
onClick: () => open(`remove-${paymentMethod.id}`),
isDisabled: !paymentMethod.isRemovable,
Expand All @@ -213,7 +211,7 @@ const PaymentMethodMenu = ({

if (!paymentMethod.isDefault) {
actions.unshift({
label: localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.actionLabel__default`),
label: localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.actionLabel__default`),
isDestructive: false,
onClick: () => {
paymentMethod
Expand Down
Loading
Loading