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
panteliselef 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 all 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 numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment sources to method methods.

@coderabbitaicoderabbitaiBotOct 10, 2025

Copy link
Copy Markdown
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 numberDiff line numberDiff line change
Expand Up@@ -452,7 +452,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 DownExpand Up@@ -584,7 +584,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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff line change
Expand Up@@ -175,7 +175,7 @@ export const PaymentAttemptPage = () => {
>
<Text
variant='h3'
localizationKey={localizationKeys('commerce.totalDue')}
localizationKey={localizationKeys('billing.totalDue')}
Comment thread
panteliselef marked this conversation as resolved.
elementDescriptor={descriptors.paymentAttemptFooterLabel}
/>
<Span
Expand DownExpand 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')} />
Comment thread
panteliselef marked this conversation as resolved.
<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')} />
Comment thread
panteliselef marked this conversation as resolved.
<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 numberDiff line numberDiff 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 DownExpand 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
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

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

panteliselef
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 all 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 numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment sources to method methods.
@coderabbitaicoderabbitaiBotOct 10, 2025

Copy link


Copy Markdown

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 numberDiff line numberDiff line change
Expand Up@@ -452,7 +452,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 DownExpand Up@@ -584,7 +584,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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff line change
Expand Up@@ -175,7 +175,7 @@ export const PaymentAttemptPage = () => {
 >
 <Text
 variant='h3'
 localizationKey={localizationKeys('commerce.totalDue')}
 localizationKey={localizationKeys('billing.totalDue')}
Comment thread
panteliselef marked this conversation as resolved.

 elementDescriptor={descriptors.paymentAttemptFooterLabel}
 />
 <Span
Expand DownExpand 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')} />
Comment thread
panteliselef marked this conversation as resolved.

 <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')} />
Comment thread
panteliselef marked this conversation as resolved.

 <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 numberDiff line numberDiff 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 DownExpand 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

panteliselef
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 all 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 numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment sources to method methods.
@coderabbitaicoderabbitaiBotOct 10, 2025

Copy link


Copy Markdown

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 numberDiff line numberDiff line change
Expand Up@@ -452,7 +452,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 DownExpand Up@@ -584,7 +584,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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff line change
Expand Up@@ -175,7 +175,7 @@ export const PaymentAttemptPage = () => {
 >
 <Text
 variant='h3'
 localizationKey={localizationKeys('commerce.totalDue')}
 localizationKey={localizationKeys('billing.totalDue')}
Comment thread
panteliselef marked this conversation as resolved.

 elementDescriptor={descriptors.paymentAttemptFooterLabel}
 />
 <Span
Expand DownExpand 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')} />
Comment thread
panteliselef marked this conversation as resolved.

 <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')} />
Comment thread
panteliselef marked this conversation as resolved.

 <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 numberDiff line numberDiff 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 DownExpand 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

panteliselef
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 all 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 numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment sources to method methods.
@coderabbitaicoderabbitaiBotOct 10, 2025

Copy link


Copy Markdown

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 numberDiff line numberDiff line change
Expand Up@@ -452,7 +452,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 DownExpand Up@@ -584,7 +584,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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff line change
Expand Up@@ -175,7 +175,7 @@ export const PaymentAttemptPage = () => {
 >
 <Text
 variant='h3'
 localizationKey={localizationKeys('commerce.totalDue')}
 localizationKey={localizationKeys('billing.totalDue')}
Comment thread
panteliselef marked this conversation as resolved.

 elementDescriptor={descriptors.paymentAttemptFooterLabel}
 />
 <Span
Expand DownExpand 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')} />
Comment thread
panteliselef marked this conversation as resolved.

 <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')} />
Comment thread
panteliselef marked this conversation as resolved.

 <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 numberDiff line numberDiff 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 DownExpand 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

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

panteliselef
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 all 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 numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment sources to method methods.
@coderabbitaicoderabbitaiBotOct 10, 2025

Copy link


Copy Markdown

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 numberDiff line numberDiff line change
Expand Up@@ -452,7 +452,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 DownExpand Up@@ -584,7 +584,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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff line change
Expand Up@@ -175,7 +175,7 @@ export const PaymentAttemptPage = () => {
 >
 <Text
 variant='h3'
 localizationKey={localizationKeys('commerce.totalDue')}
 localizationKey={localizationKeys('billing.totalDue')}
Comment thread
panteliselef marked this conversation as resolved.

 elementDescriptor={descriptors.paymentAttemptFooterLabel}
 />
 <Span
Expand DownExpand 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')} />
Comment thread
panteliselef marked this conversation as resolved.

 <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')} />
Comment thread
panteliselef marked this conversation as resolved.

 <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 numberDiff line numberDiff 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 DownExpand 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

panteliselef
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 all 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 numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment sources to method methods.
@coderabbitaicoderabbitaiBotOct 10, 2025

Copy link


Copy Markdown

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 numberDiff line numberDiff line change
Expand Up@@ -452,7 +452,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 DownExpand Up@@ -584,7 +584,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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff line change
Expand Up@@ -175,7 +175,7 @@ export const PaymentAttemptPage = () => {
 >
 <Text
 variant='h3'
 localizationKey={localizationKeys('commerce.totalDue')}
 localizationKey={localizationKeys('billing.totalDue')}
Comment thread
panteliselef marked this conversation as resolved.

 elementDescriptor={descriptors.paymentAttemptFooterLabel}
 />
 <Span
Expand DownExpand 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')} />
Comment thread
panteliselef marked this conversation as resolved.

 <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')} />
Comment thread
panteliselef marked this conversation as resolved.

 <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 numberDiff line numberDiff 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 DownExpand 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

panteliselef
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 all 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 numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment sources to method methods.
@coderabbitaicoderabbitaiBotOct 10, 2025

Copy link


Copy Markdown

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 numberDiff line numberDiff line change
Expand Up@@ -452,7 +452,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 DownExpand Up@@ -584,7 +584,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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff line change
Expand Up@@ -175,7 +175,7 @@ export const PaymentAttemptPage = () => {
 >
 <Text
 variant='h3'
 localizationKey={localizationKeys('commerce.totalDue')}
 localizationKey={localizationKeys('billing.totalDue')}
Comment thread
panteliselef marked this conversation as resolved.

 elementDescriptor={descriptors.paymentAttemptFooterLabel}
 />
 <Span
Expand DownExpand 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')} />
Comment thread
panteliselef marked this conversation as resolved.

 <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')} />
Comment thread
panteliselef marked this conversation as resolved.

 <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 numberDiff line numberDiff 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 DownExpand 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

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

panteliselef
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 all 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 numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment sources to method methods.
@coderabbitaicoderabbitaiBotOct 10, 2025

Copy link


Copy Markdown

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 numberDiff line numberDiff line change
Expand Up@@ -452,7 +452,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 DownExpand Up@@ -584,7 +584,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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff line change
Expand Up@@ -175,7 +175,7 @@ export const PaymentAttemptPage = () => {
 >
 <Text
 variant='h3'
 localizationKey={localizationKeys('commerce.totalDue')}
 localizationKey={localizationKeys('billing.totalDue')}
Comment thread
panteliselef marked this conversation as resolved.

 elementDescriptor={descriptors.paymentAttemptFooterLabel}
 />
 <Span
Expand DownExpand 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')} />
Comment thread
panteliselef marked this conversation as resolved.

 <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')} />
Comment thread
panteliselef marked this conversation as resolved.

 <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 numberDiff line numberDiff 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 DownExpand 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