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 number Diff line number Diff 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 number Diff line number Diff 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 number Diff line number Diff 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 number Diff line number Diff 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 number Diff line number Diff 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 Down Expand 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 Down Expand 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 number Diff line number Diff 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