chore(clerk-js,types): Rename descriptors from payment source to method#6951

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 13 commits into from
Oct 9, 2025
Merged

chore(clerk-js,types): Rename descriptors from payment source to method #6951

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
cb47eea
chore(clerk-js,types): Align payment methods terminology
panteliselef Sep 26, 2025
74383e5
update type
panteliselef Sep 26, 2025
4dc4c44
update useCheckout tests
panteliselef Sep 26, 2025
2ae5a17
fix unit tests
panteliselef Sep 26, 2025
8ed4a25
Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…
panteliselef Oct 3, 2025
51ee3d8
update typedocs
panteliselef Oct 3, 2025
d2bd1d5
Merge remote-tracking branch 'origin/elef/bill-1264-rename-payment_so…
panteliselef Oct 9, 2025
a5b9b8b
Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…
panteliselef Oct 9, 2025
5872a78
fix invalid fapi param for confirm
panteliselef Oct 9, 2025
00445e0
Apply suggestion from @panteliselef
panteliselef Oct 9, 2025
1f8930b
add missing types
panteliselef Oct 9, 2025
47b3859
chore: Rename descriptors from payment source to method
panteliselef Oct 9, 2025
e439be3
Merge branch 'main' into elef/bill-1264-rename-descriptors
panteliselef Oct 9, 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
6 changes: 6 additions & 0 deletions .changeset/brave-kiwis-slide.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment source descriptors to use "payment method".
16 changes: 8 additions & 8 deletions packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,17 +9,17 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
sx={{ overflow: 'hidden' }}
gap={2}
align='baseline'
elementDescriptor={descriptors.paymentSourceRow}
elementDescriptor={descriptors.paymentMethodRow}
>
<Icon
icon={paymentSource.paymentType === 'card' ? CreditCard : GenericPayment}
sx={t => ({ alignSelf: 'center', color: t.colors.$colorMutedForeground })}
elementDescriptor={descriptors.paymentSourceRowIcon}
elementDescriptor={descriptors.paymentMethodRowIcon}
/>
<Text
sx={t => ({ color: t.colors.$colorForeground, textTransform: 'capitalize' })}
truncate
elementDescriptor={descriptors.paymentSourceRowType}
elementDescriptor={descriptors.paymentMethodRowType}
>
{/* TODO(@COMMERCE): Localize this */}
{paymentSource.paymentType === 'card' ? paymentSource.cardType : paymentSource.paymentType}
Expand All@@ -28,21 +28,21 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
sx={t => ({ color: t.colors.$colorMutedForeground })}
variant='caption'
truncate
elementDescriptor={descriptors.paymentSourceRowValue}
elementDescriptor={descriptors.paymentMethodRowValue}
>
{paymentSource.paymentType === 'card' ? `⋯ ${paymentSource.last4}` : null}
</Text>
{paymentSource.isDefault && (
<Badge
elementDescriptor={descriptors.paymentSourceRowBadge}
elementId={descriptors.paymentSourceRowBadge.setId('default')}
elementDescriptor={descriptors.paymentMethodRowBadge}
elementId={descriptors.paymentMethodRowBadge.setId('default')}
localizationKey={localizationKeys('badge__default')}
/>
)}
{paymentSource.status === 'expired' && (
<Badge
elementDescriptor={descriptors.paymentSourceRowBadge}
elementId={descriptors.paymentSourceRowBadge.setId('expired')}
elementDescriptor={descriptors.paymentMethodRowBadge}
elementId={descriptors.paymentMethodRowBadge.setId('expired')}
colorScheme='danger'
localizationKey={localizationKeys('badge__expired')}
/>
Expand Down
8 changes: 4 additions & 4 deletions packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -129,7 +129,7 @@ export const PaymentSources = withCardStateProvider(() => {
<ProfileSection.Root
title={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.title`)}
centered={false}
id='paymentSources'
id='paymentMethods'
sx={t => ({
flex: 1,
borderTopWidth: t.borderWidths.$normal,
Expand All@@ -139,7 +139,7 @@ export const PaymentSources = withCardStateProvider(() => {
>
<Action.Root>
<ProfileSection.ItemList
id='paymentSources'
id='paymentMethods'
disableAnimation
>
{isLoading ? (
Expand All@@ -148,7 +148,7 @@ export const PaymentSources = withCardStateProvider(() => {
<>
{sortedPaymentSources.map(paymentSource => (
<Fragment key={paymentSource.id}>
<ProfileSection.Item id='paymentSources'>
<ProfileSection.Item id='paymentMethods'>
<PaymentSourceRow paymentSource={paymentSource} />
<PaymentSourceMenu
paymentSource={paymentSource}
Expand All@@ -170,7 +170,7 @@ export const PaymentSources = withCardStateProvider(() => {
<>
<Action.Trigger value='add'>
<ProfileSection.ArrowButton
id='paymentSources'
id='paymentMethods'
localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
/>
</Action.Trigger>
Expand Down
12 changes: 6 additions & 6 deletions packages/clerk-js/src/ui/customizables/elementDescriptors.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -360,12 +360,12 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
'selectOptionsContainer',
'selectOption',

'paymentSourceRow',
'paymentSourceRowIcon',
'paymentSourceRowText',
'paymentSourceRowType',
'paymentSourceRowValue',
'paymentSourceRowBadge',
'paymentMethodRow',
'paymentMethodRowIcon',
'paymentMethodRowText',
'paymentMethodRowType',
'paymentMethodRowValue',
'paymentMethodRowBadge',

'statementRoot',
'statementHeader',
Expand Down
12 changes: 6 additions & 6 deletions packages/types/src/appearance.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -51,7 +51,7 @@

export type CssColorOrScale = string | ColorScaleWithRequiredBase;
export type CssColorOrAlphaScale = string | AlphaColorScale;
type CssColor = string | TransparentColor | BuiltInColors;

Check warning on line 54 in packages/types/src/appearance.ts

View workflow job for this annotation

GitHub Actions/ Static analysis

"black" | "blue" | "red" | "green" | "grey" | "white" | "yellow" is overridden by string in this union type

Check warning on line 54 in packages/types/src/appearance.ts

View workflow job for this annotation

GitHub Actions/ Static analysis

"transparent" is overridden by string in this union type
type CssLengthUnit = string;

type FontSizeScale = {
Expand DownExpand Up@@ -84,7 +84,7 @@
| 'Trebuchet MS'
| 'Verdana';

export type FontFamily = string | WebSafeFont;

Check warning on line 87 in packages/types/src/appearance.ts

View workflow job for this annotation

GitHub Actions/ Static analysis

"Arial" | "Brush Script MT" | "Courier New" | "Garamond" | "Georgia" | "Helvetica" | "Tahoma" | "Times New Roman" | "Trebuchet MS" | "Verdana" is overridden by string in this union type

type LoadingState = 'loading';
type ErrorState = 'error';
Expand DownExpand Up@@ -493,12 +493,12 @@
selectOptionsContainer: WithOptions<SelectId>;
selectOption: WithOptions<SelectId>;

paymentSourceRow: WithOptions;
paymentSourceRowIcon: WithOptions;
paymentSourceRowText: WithOptions;
paymentSourceRowType: WithOptions;
paymentSourceRowValue: WithOptions;
paymentSourceRowBadge: WithOptions<'default' | 'expired'>;
paymentMethodRow: WithOptions;
paymentMethodRowIcon: WithOptions;
paymentMethodRowText: WithOptions;
paymentMethodRowType: WithOptions;
paymentMethodRowValue: WithOptions;
paymentMethodRowBadge: WithOptions<'default' | 'expired'>;

statementRoot: WithOptions;
statementHeader: WithOptions;
Expand Down
2 changes: 1 addition & 1 deletion packages/types/src/elementIds.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -43,7 +43,7 @@ export type ProfileSectionId =
| 'organizationDomains'
| 'manageVerifiedDomains'
| 'subscriptionsList'
| 'paymentSources';
| 'paymentMethods';
export type ProfilePageId = 'account' | 'security' | 'organizationGeneral' | 'organizationMembers' | 'billing';

export type UserPreviewId = 'userButton' | 'personalWorkspace';
Expand Down
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(clerk-js,types): Rename descriptors from payment source to method#6951

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 13 commits into

from

Oct 9, 2025
 Merged


chore(clerk-js,types): Rename descriptors from payment source to method
#6951
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
cb47eea

chore(clerk-js,types): Align payment methods terminology


panteliselef Sep 26, 2025
74383e5

update type


panteliselef Sep 26, 2025
4dc4c44

update useCheckout tests


panteliselef Sep 26, 2025
2ae5a17

fix unit tests


panteliselef Sep 26, 2025
8ed4a25

Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…


panteliselef Oct 3, 2025
51ee3d8

update typedocs


panteliselef Oct 3, 2025
d2bd1d5

Merge remote-tracking branch 'origin/elef/bill-1264-rename-payment_so…


panteliselef Oct 9, 2025
a5b9b8b

Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…


panteliselef Oct 9, 2025
5872a78

fix invalid fapi param for confirm


panteliselef Oct 9, 2025
00445e0

Apply suggestion from @panteliselef


panteliselef Oct 9, 2025
1f8930b

add missing types


panteliselef Oct 9, 2025
47b3859

chore: Rename descriptors from payment source to method


panteliselef Oct 9, 2025
e439be3

Merge branch 'main' into elef/bill-1264-rename-descriptors


panteliselef Oct 9, 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


6 changes: 6 additions & 0 deletions
.changeset/brave-kiwis-slide.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment source descriptors to use "payment method". 

16 changes: 8 additions & 8 deletions
packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,17 +9,17 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
 sx={{ overflow: 'hidden' }}
 gap={2}
 align='baseline'
 elementDescriptor={descriptors.paymentSourceRow}
 elementDescriptor={descriptors.paymentMethodRow}
 >
 <Icon
 icon={paymentSource.paymentType === 'card' ? CreditCard : GenericPayment}
 sx={t => ({ alignSelf: 'center', color: t.colors.$colorMutedForeground })}
 elementDescriptor={descriptors.paymentSourceRowIcon}
 elementDescriptor={descriptors.paymentMethodRowIcon}
 />
 <Text
 sx={t => ({ color: t.colors.$colorForeground, textTransform: 'capitalize' })}
 truncate
 elementDescriptor={descriptors.paymentSourceRowType}
 elementDescriptor={descriptors.paymentMethodRowType}
 >
 {/* TODO(@COMMERCE): Localize this */}
 {paymentSource.paymentType === 'card' ? paymentSource.cardType : paymentSource.paymentType}
Expand All@@ -28,21 +28,21 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
 sx={t => ({ color: t.colors.$colorMutedForeground })}
 variant='caption'
 truncate
 elementDescriptor={descriptors.paymentSourceRowValue}
 elementDescriptor={descriptors.paymentMethodRowValue}
 >
 {paymentSource.paymentType === 'card' ? `⋯ ${paymentSource.last4}` : null}
 </Text>
 {paymentSource.isDefault && (
 <Badge
 elementDescriptor={descriptors.paymentSourceRowBadge}
 elementId={descriptors.paymentSourceRowBadge.setId('default')}
 elementDescriptor={descriptors.paymentMethodRowBadge}
 elementId={descriptors.paymentMethodRowBadge.setId('default')}
 localizationKey={localizationKeys('badge__default')}
 />
 )}
 {paymentSource.status === 'expired' && (
 <Badge
 elementDescriptor={descriptors.paymentSourceRowBadge}
 elementId={descriptors.paymentSourceRowBadge.setId('expired')}
 elementDescriptor={descriptors.paymentMethodRowBadge}
 elementId={descriptors.paymentMethodRowBadge.setId('expired')}
 colorScheme='danger'
 localizationKey={localizationKeys('badge__expired')}
 />
Expand Down

8 changes: 4 additions & 4 deletions
packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -129,7 +129,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <ProfileSection.Root
 title={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.title`)}
 centered={false}
 id='paymentSources'
 id='paymentMethods'
 sx={t => ({
 flex: 1,
 borderTopWidth: t.borderWidths.$normal,
Expand All@@ -139,7 +139,7 @@ export const PaymentSources = withCardStateProvider(() => {
 >
 <Action.Root>
 <ProfileSection.ItemList
 id='paymentSources'
 id='paymentMethods'
 disableAnimation
 >
 {isLoading ? (
Expand All@@ -148,7 +148,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <>
 {sortedPaymentSources.map(paymentSource => (
 <Fragment key={paymentSource.id}>
 <ProfileSection.Item id='paymentSources'>
 <ProfileSection.Item id='paymentMethods'>
 <PaymentSourceRow paymentSource={paymentSource} />
 <PaymentSourceMenu
 paymentSource={paymentSource}
Expand All@@ -170,7 +170,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <>
 <Action.Trigger value='add'>
 <ProfileSection.ArrowButton
 id='paymentSources'
 id='paymentMethods'
 localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
 />
 </Action.Trigger>
Expand Down

12 changes: 6 additions & 6 deletions
packages/clerk-js/src/ui/customizables/elementDescriptors.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -360,12 +360,12 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 'selectOptionsContainer',
 'selectOption',

 'paymentSourceRow',
 'paymentSourceRowIcon',
 'paymentSourceRowText',
 'paymentSourceRowType',
 'paymentSourceRowValue',
 'paymentSourceRowBadge',
 'paymentMethodRow',
 'paymentMethodRowIcon',
 'paymentMethodRowText',
 'paymentMethodRowType',
 'paymentMethodRowValue',
 'paymentMethodRowBadge',

 'statementRoot',
 'statementHeader',
Expand Down

12 changes: 6 additions & 6 deletions
packages/types/src/appearance.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -51,7 +51,7 @@

export type CssColorOrScale = string | ColorScaleWithRequiredBase;
export type CssColorOrAlphaScale = string | AlphaColorScale;
type CssColor = string | TransparentColor | BuiltInColors;

Check warning
on line 54
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"black" | "blue" | "red" | "green" | "grey" | "white" | "yellow" is overridden by string in this union type 

Check warning
on line 54
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"transparent" is overridden by string in this union type 
type CssLengthUnit = string;

type FontSizeScale = {
Expand DownExpand Up@@ -84,7 +84,7 @@
 | 'Trebuchet MS'
 | 'Verdana';

export type FontFamily = string | WebSafeFont;

Check warning
on line 87
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"Arial" | "Brush Script MT" | "Courier New" | "Garamond" | "Georgia" | "Helvetica" | "Tahoma" | "Times New Roman" | "Trebuchet MS" | "Verdana" is overridden by string in this union type

type LoadingState = 'loading';
type ErrorState = 'error';
Expand DownExpand Up@@ -493,12 +493,12 @@
 selectOptionsContainer: WithOptions<SelectId>;
 selectOption: WithOptions<SelectId>;

paymentSourceRow: WithOptions;
paymentSourceRowIcon: WithOptions;
paymentSourceRowText: WithOptions;
paymentSourceRowType: WithOptions;
paymentSourceRowValue: WithOptions;
paymentSourceRowBadge: WithOptions<'default' | 'expired'>;
paymentMethodRow: WithOptions;
paymentMethodRowIcon: WithOptions;
paymentMethodRowText: WithOptions;
paymentMethodRowType: WithOptions;
paymentMethodRowValue: WithOptions;
paymentMethodRowBadge: WithOptions<'default' | 'expired'>;

 statementRoot: WithOptions;
 statementHeader: WithOptions;
Expand Down

2 changes: 1 addition & 1 deletion
packages/types/src/elementIds.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,7 +43,7 @@ export type ProfileSectionId =
 | 'organizationDomains'
 | 'manageVerifiedDomains'
 | 'subscriptionsList'
 | 'paymentSources';
 | 'paymentMethods';
export type ProfilePageId = 'account' | 'security' | 'organizationGeneral' | 'organizationMembers' | 'billing';

export type UserPreviewId = 'userButton' | 'personalWorkspace';
Expand Down
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(clerk-js,types): Rename descriptors from payment source to method#6951

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 13 commits into

from

Oct 9, 2025
 Merged


chore(clerk-js,types): Rename descriptors from payment source to method
#6951
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
cb47eea

chore(clerk-js,types): Align payment methods terminology


panteliselef Sep 26, 2025
74383e5

update type


panteliselef Sep 26, 2025
4dc4c44

update useCheckout tests


panteliselef Sep 26, 2025
2ae5a17

fix unit tests


panteliselef Sep 26, 2025
8ed4a25

Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…


panteliselef Oct 3, 2025
51ee3d8

update typedocs


panteliselef Oct 3, 2025
d2bd1d5

Merge remote-tracking branch 'origin/elef/bill-1264-rename-payment_so…


panteliselef Oct 9, 2025
a5b9b8b

Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…


panteliselef Oct 9, 2025
5872a78

fix invalid fapi param for confirm


panteliselef Oct 9, 2025
00445e0

Apply suggestion from @panteliselef


panteliselef Oct 9, 2025
1f8930b

add missing types


panteliselef Oct 9, 2025
47b3859

chore: Rename descriptors from payment source to method


panteliselef Oct 9, 2025
e439be3

Merge branch 'main' into elef/bill-1264-rename-descriptors


panteliselef Oct 9, 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


6 changes: 6 additions & 0 deletions
.changeset/brave-kiwis-slide.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment source descriptors to use "payment method". 

16 changes: 8 additions & 8 deletions
packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,17 +9,17 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
 sx={{ overflow: 'hidden' }}
 gap={2}
 align='baseline'
 elementDescriptor={descriptors.paymentSourceRow}
 elementDescriptor={descriptors.paymentMethodRow}
 >
 <Icon
 icon={paymentSource.paymentType === 'card' ? CreditCard : GenericPayment}
 sx={t => ({ alignSelf: 'center', color: t.colors.$colorMutedForeground })}
 elementDescriptor={descriptors.paymentSourceRowIcon}
 elementDescriptor={descriptors.paymentMethodRowIcon}
 />
 <Text
 sx={t => ({ color: t.colors.$colorForeground, textTransform: 'capitalize' })}
 truncate
 elementDescriptor={descriptors.paymentSourceRowType}
 elementDescriptor={descriptors.paymentMethodRowType}
 >
 {/* TODO(@COMMERCE): Localize this */}
 {paymentSource.paymentType === 'card' ? paymentSource.cardType : paymentSource.paymentType}
Expand All@@ -28,21 +28,21 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
 sx={t => ({ color: t.colors.$colorMutedForeground })}
 variant='caption'
 truncate
 elementDescriptor={descriptors.paymentSourceRowValue}
 elementDescriptor={descriptors.paymentMethodRowValue}
 >
 {paymentSource.paymentType === 'card' ? `⋯ ${paymentSource.last4}` : null}
 </Text>
 {paymentSource.isDefault && (
 <Badge
 elementDescriptor={descriptors.paymentSourceRowBadge}
 elementId={descriptors.paymentSourceRowBadge.setId('default')}
 elementDescriptor={descriptors.paymentMethodRowBadge}
 elementId={descriptors.paymentMethodRowBadge.setId('default')}
 localizationKey={localizationKeys('badge__default')}
 />
 )}
 {paymentSource.status === 'expired' && (
 <Badge
 elementDescriptor={descriptors.paymentSourceRowBadge}
 elementId={descriptors.paymentSourceRowBadge.setId('expired')}
 elementDescriptor={descriptors.paymentMethodRowBadge}
 elementId={descriptors.paymentMethodRowBadge.setId('expired')}
 colorScheme='danger'
 localizationKey={localizationKeys('badge__expired')}
 />
Expand Down

8 changes: 4 additions & 4 deletions
packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -129,7 +129,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <ProfileSection.Root
 title={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.title`)}
 centered={false}
 id='paymentSources'
 id='paymentMethods'
 sx={t => ({
 flex: 1,
 borderTopWidth: t.borderWidths.$normal,
Expand All@@ -139,7 +139,7 @@ export const PaymentSources = withCardStateProvider(() => {
 >
 <Action.Root>
 <ProfileSection.ItemList
 id='paymentSources'
 id='paymentMethods'
 disableAnimation
 >
 {isLoading ? (
Expand All@@ -148,7 +148,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <>
 {sortedPaymentSources.map(paymentSource => (
 <Fragment key={paymentSource.id}>
 <ProfileSection.Item id='paymentSources'>
 <ProfileSection.Item id='paymentMethods'>
 <PaymentSourceRow paymentSource={paymentSource} />
 <PaymentSourceMenu
 paymentSource={paymentSource}
Expand All@@ -170,7 +170,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <>
 <Action.Trigger value='add'>
 <ProfileSection.ArrowButton
 id='paymentSources'
 id='paymentMethods'
 localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
 />
 </Action.Trigger>
Expand Down

12 changes: 6 additions & 6 deletions
packages/clerk-js/src/ui/customizables/elementDescriptors.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -360,12 +360,12 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 'selectOptionsContainer',
 'selectOption',

 'paymentSourceRow',
 'paymentSourceRowIcon',
 'paymentSourceRowText',
 'paymentSourceRowType',
 'paymentSourceRowValue',
 'paymentSourceRowBadge',
 'paymentMethodRow',
 'paymentMethodRowIcon',
 'paymentMethodRowText',
 'paymentMethodRowType',
 'paymentMethodRowValue',
 'paymentMethodRowBadge',

 'statementRoot',
 'statementHeader',
Expand Down

12 changes: 6 additions & 6 deletions
packages/types/src/appearance.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -51,7 +51,7 @@

export type CssColorOrScale = string | ColorScaleWithRequiredBase;
export type CssColorOrAlphaScale = string | AlphaColorScale;
type CssColor = string | TransparentColor | BuiltInColors;

Check warning
on line 54
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"black" | "blue" | "red" | "green" | "grey" | "white" | "yellow" is overridden by string in this union type 

Check warning
on line 54
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"transparent" is overridden by string in this union type 
type CssLengthUnit = string;

type FontSizeScale = {
Expand DownExpand Up@@ -84,7 +84,7 @@
 | 'Trebuchet MS'
 | 'Verdana';

export type FontFamily = string | WebSafeFont;

Check warning
on line 87
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"Arial" | "Brush Script MT" | "Courier New" | "Garamond" | "Georgia" | "Helvetica" | "Tahoma" | "Times New Roman" | "Trebuchet MS" | "Verdana" is overridden by string in this union type

type LoadingState = 'loading';
type ErrorState = 'error';
Expand DownExpand Up@@ -493,12 +493,12 @@
 selectOptionsContainer: WithOptions<SelectId>;
 selectOption: WithOptions<SelectId>;

paymentSourceRow: WithOptions;
paymentSourceRowIcon: WithOptions;
paymentSourceRowText: WithOptions;
paymentSourceRowType: WithOptions;
paymentSourceRowValue: WithOptions;
paymentSourceRowBadge: WithOptions<'default' | 'expired'>;
paymentMethodRow: WithOptions;
paymentMethodRowIcon: WithOptions;
paymentMethodRowText: WithOptions;
paymentMethodRowType: WithOptions;
paymentMethodRowValue: WithOptions;
paymentMethodRowBadge: WithOptions<'default' | 'expired'>;

 statementRoot: WithOptions;
 statementHeader: WithOptions;
Expand Down

2 changes: 1 addition & 1 deletion
packages/types/src/elementIds.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,7 +43,7 @@ export type ProfileSectionId =
 | 'organizationDomains'
 | 'manageVerifiedDomains'
 | 'subscriptionsList'
 | 'paymentSources';
 | 'paymentMethods';
export type ProfilePageId = 'account' | 'security' | 'organizationGeneral' | 'organizationMembers' | 'billing';

export type UserPreviewId = 'userButton' | 'personalWorkspace';
Expand Down
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(clerk-js,types): Rename descriptors from payment source to method#6951

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 13 commits into

from

Oct 9, 2025
 Merged


chore(clerk-js,types): Rename descriptors from payment source to method
#6951
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
cb47eea

chore(clerk-js,types): Align payment methods terminology


panteliselef Sep 26, 2025
74383e5

update type


panteliselef Sep 26, 2025
4dc4c44

update useCheckout tests


panteliselef Sep 26, 2025
2ae5a17

fix unit tests


panteliselef Sep 26, 2025
8ed4a25

Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…


panteliselef Oct 3, 2025
51ee3d8

update typedocs


panteliselef Oct 3, 2025
d2bd1d5

Merge remote-tracking branch 'origin/elef/bill-1264-rename-payment_so…


panteliselef Oct 9, 2025
a5b9b8b

Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…


panteliselef Oct 9, 2025
5872a78

fix invalid fapi param for confirm


panteliselef Oct 9, 2025
00445e0

Apply suggestion from @panteliselef


panteliselef Oct 9, 2025
1f8930b

add missing types


panteliselef Oct 9, 2025
47b3859

chore: Rename descriptors from payment source to method


panteliselef Oct 9, 2025
e439be3

Merge branch 'main' into elef/bill-1264-rename-descriptors


panteliselef Oct 9, 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


6 changes: 6 additions & 0 deletions
.changeset/brave-kiwis-slide.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment source descriptors to use "payment method". 

16 changes: 8 additions & 8 deletions
packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,17 +9,17 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
 sx={{ overflow: 'hidden' }}
 gap={2}
 align='baseline'
 elementDescriptor={descriptors.paymentSourceRow}
 elementDescriptor={descriptors.paymentMethodRow}
 >
 <Icon
 icon={paymentSource.paymentType === 'card' ? CreditCard : GenericPayment}
 sx={t => ({ alignSelf: 'center', color: t.colors.$colorMutedForeground })}
 elementDescriptor={descriptors.paymentSourceRowIcon}
 elementDescriptor={descriptors.paymentMethodRowIcon}
 />
 <Text
 sx={t => ({ color: t.colors.$colorForeground, textTransform: 'capitalize' })}
 truncate
 elementDescriptor={descriptors.paymentSourceRowType}
 elementDescriptor={descriptors.paymentMethodRowType}
 >
 {/* TODO(@COMMERCE): Localize this */}
 {paymentSource.paymentType === 'card' ? paymentSource.cardType : paymentSource.paymentType}
Expand All@@ -28,21 +28,21 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
 sx={t => ({ color: t.colors.$colorMutedForeground })}
 variant='caption'
 truncate
 elementDescriptor={descriptors.paymentSourceRowValue}
 elementDescriptor={descriptors.paymentMethodRowValue}
 >
 {paymentSource.paymentType === 'card' ? `⋯ ${paymentSource.last4}` : null}
 </Text>
 {paymentSource.isDefault && (
 <Badge
 elementDescriptor={descriptors.paymentSourceRowBadge}
 elementId={descriptors.paymentSourceRowBadge.setId('default')}
 elementDescriptor={descriptors.paymentMethodRowBadge}
 elementId={descriptors.paymentMethodRowBadge.setId('default')}
 localizationKey={localizationKeys('badge__default')}
 />
 )}
 {paymentSource.status === 'expired' && (
 <Badge
 elementDescriptor={descriptors.paymentSourceRowBadge}
 elementId={descriptors.paymentSourceRowBadge.setId('expired')}
 elementDescriptor={descriptors.paymentMethodRowBadge}
 elementId={descriptors.paymentMethodRowBadge.setId('expired')}
 colorScheme='danger'
 localizationKey={localizationKeys('badge__expired')}
 />
Expand Down

8 changes: 4 additions & 4 deletions
packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -129,7 +129,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <ProfileSection.Root
 title={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.title`)}
 centered={false}
 id='paymentSources'
 id='paymentMethods'
 sx={t => ({
 flex: 1,
 borderTopWidth: t.borderWidths.$normal,
Expand All@@ -139,7 +139,7 @@ export const PaymentSources = withCardStateProvider(() => {
 >
 <Action.Root>
 <ProfileSection.ItemList
 id='paymentSources'
 id='paymentMethods'
 disableAnimation
 >
 {isLoading ? (
Expand All@@ -148,7 +148,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <>
 {sortedPaymentSources.map(paymentSource => (
 <Fragment key={paymentSource.id}>
 <ProfileSection.Item id='paymentSources'>
 <ProfileSection.Item id='paymentMethods'>
 <PaymentSourceRow paymentSource={paymentSource} />
 <PaymentSourceMenu
 paymentSource={paymentSource}
Expand All@@ -170,7 +170,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <>
 <Action.Trigger value='add'>
 <ProfileSection.ArrowButton
 id='paymentSources'
 id='paymentMethods'
 localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
 />
 </Action.Trigger>
Expand Down

12 changes: 6 additions & 6 deletions
packages/clerk-js/src/ui/customizables/elementDescriptors.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -360,12 +360,12 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 'selectOptionsContainer',
 'selectOption',

 'paymentSourceRow',
 'paymentSourceRowIcon',
 'paymentSourceRowText',
 'paymentSourceRowType',
 'paymentSourceRowValue',
 'paymentSourceRowBadge',
 'paymentMethodRow',
 'paymentMethodRowIcon',
 'paymentMethodRowText',
 'paymentMethodRowType',
 'paymentMethodRowValue',
 'paymentMethodRowBadge',

 'statementRoot',
 'statementHeader',
Expand Down

12 changes: 6 additions & 6 deletions
packages/types/src/appearance.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -51,7 +51,7 @@

export type CssColorOrScale = string | ColorScaleWithRequiredBase;
export type CssColorOrAlphaScale = string | AlphaColorScale;
type CssColor = string | TransparentColor | BuiltInColors;

Check warning
on line 54
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"black" | "blue" | "red" | "green" | "grey" | "white" | "yellow" is overridden by string in this union type 

Check warning
on line 54
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"transparent" is overridden by string in this union type 
type CssLengthUnit = string;

type FontSizeScale = {
Expand DownExpand Up@@ -84,7 +84,7 @@
 | 'Trebuchet MS'
 | 'Verdana';

export type FontFamily = string | WebSafeFont;

Check warning
on line 87
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"Arial" | "Brush Script MT" | "Courier New" | "Garamond" | "Georgia" | "Helvetica" | "Tahoma" | "Times New Roman" | "Trebuchet MS" | "Verdana" is overridden by string in this union type

type LoadingState = 'loading';
type ErrorState = 'error';
Expand DownExpand Up@@ -493,12 +493,12 @@
 selectOptionsContainer: WithOptions<SelectId>;
 selectOption: WithOptions<SelectId>;

paymentSourceRow: WithOptions;
paymentSourceRowIcon: WithOptions;
paymentSourceRowText: WithOptions;
paymentSourceRowType: WithOptions;
paymentSourceRowValue: WithOptions;
paymentSourceRowBadge: WithOptions<'default' | 'expired'>;
paymentMethodRow: WithOptions;
paymentMethodRowIcon: WithOptions;
paymentMethodRowText: WithOptions;
paymentMethodRowType: WithOptions;
paymentMethodRowValue: WithOptions;
paymentMethodRowBadge: WithOptions<'default' | 'expired'>;

 statementRoot: WithOptions;
 statementHeader: WithOptions;
Expand Down

2 changes: 1 addition & 1 deletion
packages/types/src/elementIds.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,7 +43,7 @@ export type ProfileSectionId =
 | 'organizationDomains'
 | 'manageVerifiedDomains'
 | 'subscriptionsList'
 | 'paymentSources';
 | 'paymentMethods';
export type ProfilePageId = 'account' | 'security' | 'organizationGeneral' | 'organizationMembers' | 'billing';

export type UserPreviewId = 'userButton' | 'personalWorkspace';
Expand Down
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(clerk-js,types): Rename descriptors from payment source to method#6951

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 13 commits into

from

Oct 9, 2025
 Merged


chore(clerk-js,types): Rename descriptors from payment source to method
#6951
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
cb47eea

chore(clerk-js,types): Align payment methods terminology


panteliselef Sep 26, 2025
74383e5

update type


panteliselef Sep 26, 2025
4dc4c44

update useCheckout tests


panteliselef Sep 26, 2025
2ae5a17

fix unit tests


panteliselef Sep 26, 2025
8ed4a25

Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…


panteliselef Oct 3, 2025
51ee3d8

update typedocs


panteliselef Oct 3, 2025
d2bd1d5

Merge remote-tracking branch 'origin/elef/bill-1264-rename-payment_so…


panteliselef Oct 9, 2025
a5b9b8b

Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…


panteliselef Oct 9, 2025
5872a78

fix invalid fapi param for confirm


panteliselef Oct 9, 2025
00445e0

Apply suggestion from @panteliselef


panteliselef Oct 9, 2025
1f8930b

add missing types


panteliselef Oct 9, 2025
47b3859

chore: Rename descriptors from payment source to method


panteliselef Oct 9, 2025
e439be3

Merge branch 'main' into elef/bill-1264-rename-descriptors


panteliselef Oct 9, 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


6 changes: 6 additions & 0 deletions
.changeset/brave-kiwis-slide.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment source descriptors to use "payment method". 

16 changes: 8 additions & 8 deletions
packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,17 +9,17 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
 sx={{ overflow: 'hidden' }}
 gap={2}
 align='baseline'
 elementDescriptor={descriptors.paymentSourceRow}
 elementDescriptor={descriptors.paymentMethodRow}
 >
 <Icon
 icon={paymentSource.paymentType === 'card' ? CreditCard : GenericPayment}
 sx={t => ({ alignSelf: 'center', color: t.colors.$colorMutedForeground })}
 elementDescriptor={descriptors.paymentSourceRowIcon}
 elementDescriptor={descriptors.paymentMethodRowIcon}
 />
 <Text
 sx={t => ({ color: t.colors.$colorForeground, textTransform: 'capitalize' })}
 truncate
 elementDescriptor={descriptors.paymentSourceRowType}
 elementDescriptor={descriptors.paymentMethodRowType}
 >
 {/* TODO(@COMMERCE): Localize this */}
 {paymentSource.paymentType === 'card' ? paymentSource.cardType : paymentSource.paymentType}
Expand All@@ -28,21 +28,21 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
 sx={t => ({ color: t.colors.$colorMutedForeground })}
 variant='caption'
 truncate
 elementDescriptor={descriptors.paymentSourceRowValue}
 elementDescriptor={descriptors.paymentMethodRowValue}
 >
 {paymentSource.paymentType === 'card' ? `⋯ ${paymentSource.last4}` : null}
 </Text>
 {paymentSource.isDefault && (
 <Badge
 elementDescriptor={descriptors.paymentSourceRowBadge}
 elementId={descriptors.paymentSourceRowBadge.setId('default')}
 elementDescriptor={descriptors.paymentMethodRowBadge}
 elementId={descriptors.paymentMethodRowBadge.setId('default')}
 localizationKey={localizationKeys('badge__default')}
 />
 )}
 {paymentSource.status === 'expired' && (
 <Badge
 elementDescriptor={descriptors.paymentSourceRowBadge}
 elementId={descriptors.paymentSourceRowBadge.setId('expired')}
 elementDescriptor={descriptors.paymentMethodRowBadge}
 elementId={descriptors.paymentMethodRowBadge.setId('expired')}
 colorScheme='danger'
 localizationKey={localizationKeys('badge__expired')}
 />
Expand Down

8 changes: 4 additions & 4 deletions
packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -129,7 +129,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <ProfileSection.Root
 title={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.title`)}
 centered={false}
 id='paymentSources'
 id='paymentMethods'
 sx={t => ({
 flex: 1,
 borderTopWidth: t.borderWidths.$normal,
Expand All@@ -139,7 +139,7 @@ export const PaymentSources = withCardStateProvider(() => {
 >
 <Action.Root>
 <ProfileSection.ItemList
 id='paymentSources'
 id='paymentMethods'
 disableAnimation
 >
 {isLoading ? (
Expand All@@ -148,7 +148,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <>
 {sortedPaymentSources.map(paymentSource => (
 <Fragment key={paymentSource.id}>
 <ProfileSection.Item id='paymentSources'>
 <ProfileSection.Item id='paymentMethods'>
 <PaymentSourceRow paymentSource={paymentSource} />
 <PaymentSourceMenu
 paymentSource={paymentSource}
Expand All@@ -170,7 +170,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <>
 <Action.Trigger value='add'>
 <ProfileSection.ArrowButton
 id='paymentSources'
 id='paymentMethods'
 localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
 />
 </Action.Trigger>
Expand Down

12 changes: 6 additions & 6 deletions
packages/clerk-js/src/ui/customizables/elementDescriptors.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -360,12 +360,12 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 'selectOptionsContainer',
 'selectOption',

 'paymentSourceRow',
 'paymentSourceRowIcon',
 'paymentSourceRowText',
 'paymentSourceRowType',
 'paymentSourceRowValue',
 'paymentSourceRowBadge',
 'paymentMethodRow',
 'paymentMethodRowIcon',
 'paymentMethodRowText',
 'paymentMethodRowType',
 'paymentMethodRowValue',
 'paymentMethodRowBadge',

 'statementRoot',
 'statementHeader',
Expand Down

12 changes: 6 additions & 6 deletions
packages/types/src/appearance.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -51,7 +51,7 @@

export type CssColorOrScale = string | ColorScaleWithRequiredBase;
export type CssColorOrAlphaScale = string | AlphaColorScale;
type CssColor = string | TransparentColor | BuiltInColors;

Check warning
on line 54
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"black" | "blue" | "red" | "green" | "grey" | "white" | "yellow" is overridden by string in this union type 

Check warning
on line 54
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"transparent" is overridden by string in this union type 
type CssLengthUnit = string;

type FontSizeScale = {
Expand DownExpand Up@@ -84,7 +84,7 @@
 | 'Trebuchet MS'
 | 'Verdana';

export type FontFamily = string | WebSafeFont;

Check warning
on line 87
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"Arial" | "Brush Script MT" | "Courier New" | "Garamond" | "Georgia" | "Helvetica" | "Tahoma" | "Times New Roman" | "Trebuchet MS" | "Verdana" is overridden by string in this union type

type LoadingState = 'loading';
type ErrorState = 'error';
Expand DownExpand Up@@ -493,12 +493,12 @@
 selectOptionsContainer: WithOptions<SelectId>;
 selectOption: WithOptions<SelectId>;

paymentSourceRow: WithOptions;
paymentSourceRowIcon: WithOptions;
paymentSourceRowText: WithOptions;
paymentSourceRowType: WithOptions;
paymentSourceRowValue: WithOptions;
paymentSourceRowBadge: WithOptions<'default' | 'expired'>;
paymentMethodRow: WithOptions;
paymentMethodRowIcon: WithOptions;
paymentMethodRowText: WithOptions;
paymentMethodRowType: WithOptions;
paymentMethodRowValue: WithOptions;
paymentMethodRowBadge: WithOptions<'default' | 'expired'>;

 statementRoot: WithOptions;
 statementHeader: WithOptions;
Expand Down

2 changes: 1 addition & 1 deletion
packages/types/src/elementIds.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,7 +43,7 @@ export type ProfileSectionId =
 | 'organizationDomains'
 | 'manageVerifiedDomains'
 | 'subscriptionsList'
 | 'paymentSources';
 | 'paymentMethods';
export type ProfilePageId = 'account' | 'security' | 'organizationGeneral' | 'organizationMembers' | 'billing';

export type UserPreviewId = 'userButton' | 'personalWorkspace';
Expand Down
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(clerk-js,types): Rename descriptors from payment source to method#6951

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 13 commits into

from

Oct 9, 2025
 Merged


chore(clerk-js,types): Rename descriptors from payment source to method
#6951
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
cb47eea

chore(clerk-js,types): Align payment methods terminology


panteliselef Sep 26, 2025
74383e5

update type


panteliselef Sep 26, 2025
4dc4c44

update useCheckout tests


panteliselef Sep 26, 2025
2ae5a17

fix unit tests


panteliselef Sep 26, 2025
8ed4a25

Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…


panteliselef Oct 3, 2025
51ee3d8

update typedocs


panteliselef Oct 3, 2025
d2bd1d5

Merge remote-tracking branch 'origin/elef/bill-1264-rename-payment_so…


panteliselef Oct 9, 2025
a5b9b8b

Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…


panteliselef Oct 9, 2025
5872a78

fix invalid fapi param for confirm


panteliselef Oct 9, 2025
00445e0

Apply suggestion from @panteliselef


panteliselef Oct 9, 2025
1f8930b

add missing types


panteliselef Oct 9, 2025
47b3859

chore: Rename descriptors from payment source to method


panteliselef Oct 9, 2025
e439be3

Merge branch 'main' into elef/bill-1264-rename-descriptors


panteliselef Oct 9, 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


6 changes: 6 additions & 0 deletions
.changeset/brave-kiwis-slide.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment source descriptors to use "payment method". 

16 changes: 8 additions & 8 deletions
packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,17 +9,17 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
 sx={{ overflow: 'hidden' }}
 gap={2}
 align='baseline'
 elementDescriptor={descriptors.paymentSourceRow}
 elementDescriptor={descriptors.paymentMethodRow}
 >
 <Icon
 icon={paymentSource.paymentType === 'card' ? CreditCard : GenericPayment}
 sx={t => ({ alignSelf: 'center', color: t.colors.$colorMutedForeground })}
 elementDescriptor={descriptors.paymentSourceRowIcon}
 elementDescriptor={descriptors.paymentMethodRowIcon}
 />
 <Text
 sx={t => ({ color: t.colors.$colorForeground, textTransform: 'capitalize' })}
 truncate
 elementDescriptor={descriptors.paymentSourceRowType}
 elementDescriptor={descriptors.paymentMethodRowType}
 >
 {/* TODO(@COMMERCE): Localize this */}
 {paymentSource.paymentType === 'card' ? paymentSource.cardType : paymentSource.paymentType}
Expand All@@ -28,21 +28,21 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
 sx={t => ({ color: t.colors.$colorMutedForeground })}
 variant='caption'
 truncate
 elementDescriptor={descriptors.paymentSourceRowValue}
 elementDescriptor={descriptors.paymentMethodRowValue}
 >
 {paymentSource.paymentType === 'card' ? `⋯ ${paymentSource.last4}` : null}
 </Text>
 {paymentSource.isDefault && (
 <Badge
 elementDescriptor={descriptors.paymentSourceRowBadge}
 elementId={descriptors.paymentSourceRowBadge.setId('default')}
 elementDescriptor={descriptors.paymentMethodRowBadge}
 elementId={descriptors.paymentMethodRowBadge.setId('default')}
 localizationKey={localizationKeys('badge__default')}
 />
 )}
 {paymentSource.status === 'expired' && (
 <Badge
 elementDescriptor={descriptors.paymentSourceRowBadge}
 elementId={descriptors.paymentSourceRowBadge.setId('expired')}
 elementDescriptor={descriptors.paymentMethodRowBadge}
 elementId={descriptors.paymentMethodRowBadge.setId('expired')}
 colorScheme='danger'
 localizationKey={localizationKeys('badge__expired')}
 />
Expand Down

8 changes: 4 additions & 4 deletions
packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -129,7 +129,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <ProfileSection.Root
 title={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.title`)}
 centered={false}
 id='paymentSources'
 id='paymentMethods'
 sx={t => ({
 flex: 1,
 borderTopWidth: t.borderWidths.$normal,
Expand All@@ -139,7 +139,7 @@ export const PaymentSources = withCardStateProvider(() => {
 >
 <Action.Root>
 <ProfileSection.ItemList
 id='paymentSources'
 id='paymentMethods'
 disableAnimation
 >
 {isLoading ? (
Expand All@@ -148,7 +148,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <>
 {sortedPaymentSources.map(paymentSource => (
 <Fragment key={paymentSource.id}>
 <ProfileSection.Item id='paymentSources'>
 <ProfileSection.Item id='paymentMethods'>
 <PaymentSourceRow paymentSource={paymentSource} />
 <PaymentSourceMenu
 paymentSource={paymentSource}
Expand All@@ -170,7 +170,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <>
 <Action.Trigger value='add'>
 <ProfileSection.ArrowButton
 id='paymentSources'
 id='paymentMethods'
 localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
 />
 </Action.Trigger>
Expand Down

12 changes: 6 additions & 6 deletions
packages/clerk-js/src/ui/customizables/elementDescriptors.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -360,12 +360,12 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 'selectOptionsContainer',
 'selectOption',

 'paymentSourceRow',
 'paymentSourceRowIcon',
 'paymentSourceRowText',
 'paymentSourceRowType',
 'paymentSourceRowValue',
 'paymentSourceRowBadge',
 'paymentMethodRow',
 'paymentMethodRowIcon',
 'paymentMethodRowText',
 'paymentMethodRowType',
 'paymentMethodRowValue',
 'paymentMethodRowBadge',

 'statementRoot',
 'statementHeader',
Expand Down

12 changes: 6 additions & 6 deletions
packages/types/src/appearance.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -51,7 +51,7 @@

export type CssColorOrScale = string | ColorScaleWithRequiredBase;
export type CssColorOrAlphaScale = string | AlphaColorScale;
type CssColor = string | TransparentColor | BuiltInColors;

Check warning
on line 54
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"black" | "blue" | "red" | "green" | "grey" | "white" | "yellow" is overridden by string in this union type 

Check warning
on line 54
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"transparent" is overridden by string in this union type 
type CssLengthUnit = string;

type FontSizeScale = {
Expand DownExpand Up@@ -84,7 +84,7 @@
 | 'Trebuchet MS'
 | 'Verdana';

export type FontFamily = string | WebSafeFont;

Check warning
on line 87
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"Arial" | "Brush Script MT" | "Courier New" | "Garamond" | "Georgia" | "Helvetica" | "Tahoma" | "Times New Roman" | "Trebuchet MS" | "Verdana" is overridden by string in this union type

type LoadingState = 'loading';
type ErrorState = 'error';
Expand DownExpand Up@@ -493,12 +493,12 @@
 selectOptionsContainer: WithOptions<SelectId>;
 selectOption: WithOptions<SelectId>;

paymentSourceRow: WithOptions;
paymentSourceRowIcon: WithOptions;
paymentSourceRowText: WithOptions;
paymentSourceRowType: WithOptions;
paymentSourceRowValue: WithOptions;
paymentSourceRowBadge: WithOptions<'default' | 'expired'>;
paymentMethodRow: WithOptions;
paymentMethodRowIcon: WithOptions;
paymentMethodRowText: WithOptions;
paymentMethodRowType: WithOptions;
paymentMethodRowValue: WithOptions;
paymentMethodRowBadge: WithOptions<'default' | 'expired'>;

 statementRoot: WithOptions;
 statementHeader: WithOptions;
Expand Down

2 changes: 1 addition & 1 deletion
packages/types/src/elementIds.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,7 +43,7 @@ export type ProfileSectionId =
 | 'organizationDomains'
 | 'manageVerifiedDomains'
 | 'subscriptionsList'
 | 'paymentSources';
 | 'paymentMethods';
export type ProfilePageId = 'account' | 'security' | 'organizationGeneral' | 'organizationMembers' | 'billing';

export type UserPreviewId = 'userButton' | 'personalWorkspace';
Expand Down
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(clerk-js,types): Rename descriptors from payment source to method#6951

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 13 commits into

from

Oct 9, 2025
 Merged


chore(clerk-js,types): Rename descriptors from payment source to method
#6951
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
cb47eea

chore(clerk-js,types): Align payment methods terminology


panteliselef Sep 26, 2025
74383e5

update type


panteliselef Sep 26, 2025
4dc4c44

update useCheckout tests


panteliselef Sep 26, 2025
2ae5a17

fix unit tests


panteliselef Sep 26, 2025
8ed4a25

Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…


panteliselef Oct 3, 2025
51ee3d8

update typedocs


panteliselef Oct 3, 2025
d2bd1d5

Merge remote-tracking branch 'origin/elef/bill-1264-rename-payment_so…


panteliselef Oct 9, 2025
a5b9b8b

Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…


panteliselef Oct 9, 2025
5872a78

fix invalid fapi param for confirm


panteliselef Oct 9, 2025
00445e0

Apply suggestion from @panteliselef


panteliselef Oct 9, 2025
1f8930b

add missing types


panteliselef Oct 9, 2025
47b3859

chore: Rename descriptors from payment source to method


panteliselef Oct 9, 2025
e439be3

Merge branch 'main' into elef/bill-1264-rename-descriptors


panteliselef Oct 9, 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


6 changes: 6 additions & 0 deletions
.changeset/brave-kiwis-slide.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment source descriptors to use "payment method". 

16 changes: 8 additions & 8 deletions
packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,17 +9,17 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
 sx={{ overflow: 'hidden' }}
 gap={2}
 align='baseline'
 elementDescriptor={descriptors.paymentSourceRow}
 elementDescriptor={descriptors.paymentMethodRow}
 >
 <Icon
 icon={paymentSource.paymentType === 'card' ? CreditCard : GenericPayment}
 sx={t => ({ alignSelf: 'center', color: t.colors.$colorMutedForeground })}
 elementDescriptor={descriptors.paymentSourceRowIcon}
 elementDescriptor={descriptors.paymentMethodRowIcon}
 />
 <Text
 sx={t => ({ color: t.colors.$colorForeground, textTransform: 'capitalize' })}
 truncate
 elementDescriptor={descriptors.paymentSourceRowType}
 elementDescriptor={descriptors.paymentMethodRowType}
 >
 {/* TODO(@COMMERCE): Localize this */}
 {paymentSource.paymentType === 'card' ? paymentSource.cardType : paymentSource.paymentType}
Expand All@@ -28,21 +28,21 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
 sx={t => ({ color: t.colors.$colorMutedForeground })}
 variant='caption'
 truncate
 elementDescriptor={descriptors.paymentSourceRowValue}
 elementDescriptor={descriptors.paymentMethodRowValue}
 >
 {paymentSource.paymentType === 'card' ? `⋯ ${paymentSource.last4}` : null}
 </Text>
 {paymentSource.isDefault && (
 <Badge
 elementDescriptor={descriptors.paymentSourceRowBadge}
 elementId={descriptors.paymentSourceRowBadge.setId('default')}
 elementDescriptor={descriptors.paymentMethodRowBadge}
 elementId={descriptors.paymentMethodRowBadge.setId('default')}
 localizationKey={localizationKeys('badge__default')}
 />
 )}
 {paymentSource.status === 'expired' && (
 <Badge
 elementDescriptor={descriptors.paymentSourceRowBadge}
 elementId={descriptors.paymentSourceRowBadge.setId('expired')}
 elementDescriptor={descriptors.paymentMethodRowBadge}
 elementId={descriptors.paymentMethodRowBadge.setId('expired')}
 colorScheme='danger'
 localizationKey={localizationKeys('badge__expired')}
 />
Expand Down

8 changes: 4 additions & 4 deletions
packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -129,7 +129,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <ProfileSection.Root
 title={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.title`)}
 centered={false}
 id='paymentSources'
 id='paymentMethods'
 sx={t => ({
 flex: 1,
 borderTopWidth: t.borderWidths.$normal,
Expand All@@ -139,7 +139,7 @@ export const PaymentSources = withCardStateProvider(() => {
 >
 <Action.Root>
 <ProfileSection.ItemList
 id='paymentSources'
 id='paymentMethods'
 disableAnimation
 >
 {isLoading ? (
Expand All@@ -148,7 +148,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <>
 {sortedPaymentSources.map(paymentSource => (
 <Fragment key={paymentSource.id}>
 <ProfileSection.Item id='paymentSources'>
 <ProfileSection.Item id='paymentMethods'>
 <PaymentSourceRow paymentSource={paymentSource} />
 <PaymentSourceMenu
 paymentSource={paymentSource}
Expand All@@ -170,7 +170,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <>
 <Action.Trigger value='add'>
 <ProfileSection.ArrowButton
 id='paymentSources'
 id='paymentMethods'
 localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
 />
 </Action.Trigger>
Expand Down

12 changes: 6 additions & 6 deletions
packages/clerk-js/src/ui/customizables/elementDescriptors.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -360,12 +360,12 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 'selectOptionsContainer',
 'selectOption',

 'paymentSourceRow',
 'paymentSourceRowIcon',
 'paymentSourceRowText',
 'paymentSourceRowType',
 'paymentSourceRowValue',
 'paymentSourceRowBadge',
 'paymentMethodRow',
 'paymentMethodRowIcon',
 'paymentMethodRowText',
 'paymentMethodRowType',
 'paymentMethodRowValue',
 'paymentMethodRowBadge',

 'statementRoot',
 'statementHeader',
Expand Down

12 changes: 6 additions & 6 deletions
packages/types/src/appearance.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -51,7 +51,7 @@

export type CssColorOrScale = string | ColorScaleWithRequiredBase;
export type CssColorOrAlphaScale = string | AlphaColorScale;
type CssColor = string | TransparentColor | BuiltInColors;

Check warning
on line 54
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"black" | "blue" | "red" | "green" | "grey" | "white" | "yellow" is overridden by string in this union type 

Check warning
on line 54
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"transparent" is overridden by string in this union type 
type CssLengthUnit = string;

type FontSizeScale = {
Expand DownExpand Up@@ -84,7 +84,7 @@
 | 'Trebuchet MS'
 | 'Verdana';

export type FontFamily = string | WebSafeFont;

Check warning
on line 87
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"Arial" | "Brush Script MT" | "Courier New" | "Garamond" | "Georgia" | "Helvetica" | "Tahoma" | "Times New Roman" | "Trebuchet MS" | "Verdana" is overridden by string in this union type

type LoadingState = 'loading';
type ErrorState = 'error';
Expand DownExpand Up@@ -493,12 +493,12 @@
 selectOptionsContainer: WithOptions<SelectId>;
 selectOption: WithOptions<SelectId>;

paymentSourceRow: WithOptions;
paymentSourceRowIcon: WithOptions;
paymentSourceRowText: WithOptions;
paymentSourceRowType: WithOptions;
paymentSourceRowValue: WithOptions;
paymentSourceRowBadge: WithOptions<'default' | 'expired'>;
paymentMethodRow: WithOptions;
paymentMethodRowIcon: WithOptions;
paymentMethodRowText: WithOptions;
paymentMethodRowType: WithOptions;
paymentMethodRowValue: WithOptions;
paymentMethodRowBadge: WithOptions<'default' | 'expired'>;

 statementRoot: WithOptions;
 statementHeader: WithOptions;
Expand Down

2 changes: 1 addition & 1 deletion
packages/types/src/elementIds.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,7 +43,7 @@ export type ProfileSectionId =
 | 'organizationDomains'
 | 'manageVerifiedDomains'
 | 'subscriptionsList'
 | 'paymentSources';
 | 'paymentMethods';
export type ProfilePageId = 'account' | 'security' | 'organizationGeneral' | 'organizationMembers' | 'billing';

export type UserPreviewId = 'userButton' | 'personalWorkspace';
Expand Down
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(clerk-js,types): Rename descriptors from payment source to method#6951

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 13 commits into

from

Oct 9, 2025
 Merged


chore(clerk-js,types): Rename descriptors from payment source to method
#6951
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
cb47eea

chore(clerk-js,types): Align payment methods terminology


panteliselef Sep 26, 2025
74383e5

update type


panteliselef Sep 26, 2025
4dc4c44

update useCheckout tests


panteliselef Sep 26, 2025
2ae5a17

fix unit tests


panteliselef Sep 26, 2025
8ed4a25

Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…


panteliselef Oct 3, 2025
51ee3d8

update typedocs


panteliselef Oct 3, 2025
d2bd1d5

Merge remote-tracking branch 'origin/elef/bill-1264-rename-payment_so…


panteliselef Oct 9, 2025
a5b9b8b

Merge branch 'main' into elef/bill-1264-rename-payment_sources-paymen…


panteliselef Oct 9, 2025
5872a78

fix invalid fapi param for confirm


panteliselef Oct 9, 2025
00445e0

Apply suggestion from @panteliselef


panteliselef Oct 9, 2025
1f8930b

add missing types


panteliselef Oct 9, 2025
47b3859

chore: Rename descriptors from payment source to method


panteliselef Oct 9, 2025
e439be3

Merge branch 'main' into elef/bill-1264-rename-descriptors


panteliselef Oct 9, 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


6 changes: 6 additions & 0 deletions
.changeset/brave-kiwis-slide.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': minor
'@clerk/types': minor
---

[Billing Beta] Rename payment source descriptors to use "payment method". 

16 changes: 8 additions & 8 deletions
packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,17 +9,17 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
 sx={{ overflow: 'hidden' }}
 gap={2}
 align='baseline'
 elementDescriptor={descriptors.paymentSourceRow}
 elementDescriptor={descriptors.paymentMethodRow}
 >
 <Icon
 icon={paymentSource.paymentType === 'card' ? CreditCard : GenericPayment}
 sx={t => ({ alignSelf: 'center', color: t.colors.$colorMutedForeground })}
 elementDescriptor={descriptors.paymentSourceRowIcon}
 elementDescriptor={descriptors.paymentMethodRowIcon}
 />
 <Text
 sx={t => ({ color: t.colors.$colorForeground, textTransform: 'capitalize' })}
 truncate
 elementDescriptor={descriptors.paymentSourceRowType}
 elementDescriptor={descriptors.paymentMethodRowType}
 >
 {/* TODO(@COMMERCE): Localize this */}
 {paymentSource.paymentType === 'card' ? paymentSource.cardType : paymentSource.paymentType}
Expand All@@ -28,21 +28,21 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: BillingPaym
 sx={t => ({ color: t.colors.$colorMutedForeground })}
 variant='caption'
 truncate
 elementDescriptor={descriptors.paymentSourceRowValue}
 elementDescriptor={descriptors.paymentMethodRowValue}
 >
 {paymentSource.paymentType === 'card' ? `⋯ ${paymentSource.last4}` : null}
 </Text>
 {paymentSource.isDefault && (
 <Badge
 elementDescriptor={descriptors.paymentSourceRowBadge}
 elementId={descriptors.paymentSourceRowBadge.setId('default')}
 elementDescriptor={descriptors.paymentMethodRowBadge}
 elementId={descriptors.paymentMethodRowBadge.setId('default')}
 localizationKey={localizationKeys('badge__default')}
 />
 )}
 {paymentSource.status === 'expired' && (
 <Badge
 elementDescriptor={descriptors.paymentSourceRowBadge}
 elementId={descriptors.paymentSourceRowBadge.setId('expired')}
 elementDescriptor={descriptors.paymentMethodRowBadge}
 elementId={descriptors.paymentMethodRowBadge.setId('expired')}
 colorScheme='danger'
 localizationKey={localizationKeys('badge__expired')}
 />
Expand Down

8 changes: 4 additions & 4 deletions
packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -129,7 +129,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <ProfileSection.Root
 title={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.title`)}
 centered={false}
 id='paymentSources'
 id='paymentMethods'
 sx={t => ({
 flex: 1,
 borderTopWidth: t.borderWidths.$normal,
Expand All@@ -139,7 +139,7 @@ export const PaymentSources = withCardStateProvider(() => {
 >
 <Action.Root>
 <ProfileSection.ItemList
 id='paymentSources'
 id='paymentMethods'
 disableAnimation
 >
 {isLoading ? (
Expand All@@ -148,7 +148,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <>
 {sortedPaymentSources.map(paymentSource => (
 <Fragment key={paymentSource.id}>
 <ProfileSection.Item id='paymentSources'>
 <ProfileSection.Item id='paymentMethods'>
 <PaymentSourceRow paymentSource={paymentSource} />
 <PaymentSourceMenu
 paymentSource={paymentSource}
Expand All@@ -170,7 +170,7 @@ export const PaymentSources = withCardStateProvider(() => {
 <>
 <Action.Trigger value='add'>
 <ProfileSection.ArrowButton
 id='paymentSources'
 id='paymentMethods'
 localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
 />
 </Action.Trigger>
Expand Down

12 changes: 6 additions & 6 deletions
packages/clerk-js/src/ui/customizables/elementDescriptors.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -360,12 +360,12 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 'selectOptionsContainer',
 'selectOption',

 'paymentSourceRow',
 'paymentSourceRowIcon',
 'paymentSourceRowText',
 'paymentSourceRowType',
 'paymentSourceRowValue',
 'paymentSourceRowBadge',
 'paymentMethodRow',
 'paymentMethodRowIcon',
 'paymentMethodRowText',
 'paymentMethodRowType',
 'paymentMethodRowValue',
 'paymentMethodRowBadge',

 'statementRoot',
 'statementHeader',
Expand Down

12 changes: 6 additions & 6 deletions
packages/types/src/appearance.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -51,7 +51,7 @@

export type CssColorOrScale = string | ColorScaleWithRequiredBase;
export type CssColorOrAlphaScale = string | AlphaColorScale;
type CssColor = string | TransparentColor | BuiltInColors;

Check warning
on line 54
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"black" | "blue" | "red" | "green" | "grey" | "white" | "yellow" is overridden by string in this union type 

Check warning
on line 54
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"transparent" is overridden by string in this union type 
type CssLengthUnit = string;

type FontSizeScale = {
Expand DownExpand Up@@ -84,7 +84,7 @@
 | 'Trebuchet MS'
 | 'Verdana';

export type FontFamily = string | WebSafeFont;

Check warning
on line 87
in packages/types/src/appearance.ts

View workflow job for this annotation
GitHub Actions/ Static analysis
"Arial" | "Brush Script MT" | "Courier New" | "Garamond" | "Georgia" | "Helvetica" | "Tahoma" | "Times New Roman" | "Trebuchet MS" | "Verdana" is overridden by string in this union type

type LoadingState = 'loading';
type ErrorState = 'error';
Expand DownExpand Up@@ -493,12 +493,12 @@
 selectOptionsContainer: WithOptions<SelectId>;
 selectOption: WithOptions<SelectId>;

paymentSourceRow: WithOptions;
paymentSourceRowIcon: WithOptions;
paymentSourceRowText: WithOptions;
paymentSourceRowType: WithOptions;
paymentSourceRowValue: WithOptions;
paymentSourceRowBadge: WithOptions<'default' | 'expired'>;
paymentMethodRow: WithOptions;
paymentMethodRowIcon: WithOptions;
paymentMethodRowText: WithOptions;
paymentMethodRowType: WithOptions;
paymentMethodRowValue: WithOptions;
paymentMethodRowBadge: WithOptions<'default' | 'expired'>;

 statementRoot: WithOptions;
 statementHeader: WithOptions;
Expand Down

2 changes: 1 addition & 1 deletion
packages/types/src/elementIds.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,7 +43,7 @@ export type ProfileSectionId =
 | 'organizationDomains'
 | 'manageVerifiedDomains'
 | 'subscriptionsList'
 | 'paymentSources';
 | 'paymentMethods';
export type ProfilePageId = 'account' | 'security' | 'organizationGeneral' | 'organizationMembers' | 'billing';

export type UserPreviewId = 'userButton' | 'personalWorkspace';
Expand Down
Loading