chore(shared,clerk-js): Align for payer type across billing APIs#6423

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 2 commits into from
Jul 29, 2025
Merged

chore(shared,clerk-js): Align for payer type across billing APIs #6423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4f125ce
chore(shared,clerk-js): Align `for` payer type across billing APIs
panteliselef Jul 29, 2025
01fc05c
update typedocs
panteliselef Jul 29, 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
9 changes: 9 additions & 0 deletions .changeset/some-parents-begin.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
---
'@clerk/clerk-js': minor
'@clerk/shared': minor
'@clerk/types': minor
---

[Billing Beta]: Replace `org` for `organization` as payer type for billing APIs.

This applies for all billing APIs, except the resources classes that represent data from Frontend API.
3 changes: 2 additions & 1 deletion .typedoc/__tests__/__snapshots__/file-structure.test.ts.snap
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -32,7 +32,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
"types/commerce-initialized-payment-source-resource.mdx",
"types/commerce-money-json.mdx",
"types/commerce-money.mdx",
"types/commerce-payer-type.mdx",
"types/commerce-payer-resource-type.mdx",
"types/commerce-payment-charge-type.mdx",
"types/commerce-payment-json.mdx",
"types/commerce-payment-resource.mdx",
Expand DownExpand Up@@ -66,6 +66,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
"types/experimental_checkout-button-props.mdx",
"types/experimental_plan-details-button-props.mdx",
"types/experimental_subscription-details-button-props.mdx",
"types/for-payer-type.mdx",
"types/get-payment-attempts-params.mdx",
"types/get-payment-sources-params.mdx",
"types/get-plans-params.mdx",
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -34,7 +34,7 @@ import {
export class CommerceBilling implements CommerceBillingNamespace {
getPlans = async (params?: GetPlansParams): Promise<ClerkPaginatedResponse<CommercePlanResource>> => {
const { for: forParam, ...safeParams } = params || {};
const searchParams = { ...safeParams, payer_type: forParam || 'user' };
const searchParams = { ...safeParams, payer_type: forParam === 'organization' ? 'org' : 'user' };
return await BaseResource._fetch({
path: `/commerce/plans`,
method: 'GET',
Expand Down
9 changes: 7 additions & 2 deletions packages/clerk-js/src/core/resources/CommercePlan.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
import type { CommercePayerType, CommercePlanJSON, CommercePlanJSONSnapshot, CommercePlanResource } from '@clerk/types';
import type {
CommercePayerResourceType,
CommercePlanJSON,
CommercePlanJSONSnapshot,
CommercePlanResource,
} from '@clerk/types';

import { BaseResource, CommerceFeature } from './internal';

Expand All@@ -17,7 +22,7 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
isDefault!: boolean;
isRecurring!: boolean;
hasBaseFee!: boolean;
forPayerType!: CommercePayerType;
forPayerType!: CommercePayerResourceType;
publiclyVisible!: boolean;
slug!: string;
avatarUrl!: string;
Expand Down
5 changes: 3 additions & 2 deletions packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -115,7 +115,7 @@ export const CheckoutForm = withCardStateProvider(() => {

const useCheckoutMutations = () => {
const { organization } = useOrganization();
const { subscriberType, onSubscriptionComplete } = useCheckoutContext();
const { for: _for, onSubscriptionComplete } = useCheckoutContext();
const { checkout } = useCheckout();
const { id, confirm } = checkout;
const card = useCardState();
Expand All@@ -130,7 +130,8 @@ const useCheckoutMutations = () => {

const { data, error } = await confirm({
...params,
...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
// TODO(@COMMERCE): Come back to this, this should not be needed
...(_for === 'organization' ? { orgId: organization?.id } : {}),
});

if (error) {
Expand Down
6 changes: 3 additions & 3 deletions packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,18 +10,18 @@ const Initiator = () => {
const { checkout } = useCheckout();

useEffect(() => {
checkout.start().catch(() => null);
void checkout.start();
return checkout.clear;
}, []);
return null;
};

const Root = ({ children }: { children: React.ReactNode }) => {
const { planId, planPeriod, subscriberType } = useCheckoutContext();
const { planId, planPeriod, for: _for } = useCheckoutContext();

return (
<CheckoutProvider
for={subscriberType === 'org' ? 'organization' : undefined}
for={_for}
planId={
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
planId!
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/components/Checkout/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ export const Checkout = (props: __internal_CheckoutProps) => {
return (
<Flow.Root flow='checkout'>
<Flow.Part>
<SubscriberTypeContext.Provider value={props.subscriberType || 'user'}>
<SubscriberTypeContext.Provider value={props.for || 'user'}>
<CheckoutContext.Provider
value={{
componentName: 'Checkout',
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -83,7 +83,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {

export const OrganizationBillingPage = () => {
return (
<SubscriberTypeContext.Provider value='org'>
<SubscriberTypeContext.Provider value='organization'>
<OrganizationBillingPageInternal />
</SubscriberTypeContext.Provider>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPaymentAttemptPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { PaymentAttemptPage } from '../PaymentAttempts';

export const OrganizationPaymentAttemptPage = () => {
return (
<SubscriberTypeContext.Provider value='org'>
<SubscriberTypeContext.Provider value='organization'>
<PaymentAttemptPage />
</SubscriberTypeContext.Provider>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -53,7 +53,7 @@ const OrganizationPlansPageInternal = () => {

export const OrganizationPlansPage = () => {
return (
<SubscriberTypeContext.Provider value='org'>
<SubscriberTypeContext.Provider value='organization'>
<OrganizationPlansPageInternal />
</SubscriberTypeContext.Provider>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationStatementPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { StatementPage } from '../Statements';

export const OrganizationStatementPage = () => {
return (
<SubscriberTypeContext.Provider value='org'>
<SubscriberTypeContext.Provider value='organization'>
<StatementPage />
</SubscriberTypeContext.Provider>
);
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@@ -25,7 +25,7 @@ const AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void
const localizationRoot = useSubscriberTypeLocalizationRoot();

const onAddPaymentSourceSuccess = async (context: { gateway: 'stripe'; paymentToken: string }) => {
const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;
await resource?.addPaymentSource(context);
onSuccess();
close();
Expand DownExpand Up@@ -72,7 +72,7 @@ const RemoveScreen = ({

const removePaymentSource = async () => {
await paymentSource
.remove({ orgId: subscriberType === 'org' ? organization?.id : undefined })
.remove({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
.then(revalidate)
.catch((error: Error) => {
handleError(error, [], card.setError);
Expand DownExpand Up@@ -108,7 +108,7 @@ export const PaymentSources = withCardStateProvider(() => {
const clerk = useClerk();
const subscriberType = useSubscriberTypeContext();
const localizationRoot = useSubscriberTypeLocalizationRoot();
const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;

const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods();

Expand DownExpand Up@@ -209,7 +209,7 @@ const PaymentSourceMenu = ({
isDestructive: false,
onClick: () => {
paymentSource
.makeDefault({ orgId: subscriberType === 'org' ? organization?.id : undefined })
.makeDefault({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
.then(revalidate)
.catch((error: Error) => {
handleError(error, [], card.setError);
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ const PlanDetailsInternal = ({
const hasFeatures = features.length > 0;

return (
<SubscriberTypeContext.Provider value={plan.forPayerType}>
<SubscriberTypeContext.Provider value={plan.forPayerType === 'org' ? 'organization' : 'user'}>
<Drawer.Header
sx={t =>
!hasFeatures
Expand Down
6 changes: 3 additions & 3 deletions packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -189,7 +189,7 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
setLoading();

await selectedSubscription
.cancel({ orgId: subscriberType === 'org' ? organization?.id : undefined })
.cancel({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
.then(() => {
onSubscriptionCancel?.();
if (setIsOpen) {
Expand DownExpand Up@@ -381,7 +381,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
openCheckout({
planId: subscription.plan.id,
planPeriod: subscription.planPeriod === 'month' ? 'annual' : 'month',
subscriberType,
for: subscriberType,
});
},
}
Expand All@@ -403,7 +403,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
openCheckout({
planId: subscription.plan.id,
planPeriod: subscription.planPeriod,
subscriberType,
for: subscriberType,
});
},
}
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -197,7 +197,7 @@ export function SubscriptionsList({
)}

{(commerceSettings.billing.user.hasPaidPlans && subscriberType === 'user') ||
(commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'org') ? (
(commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'organization') ? (
<ProfileSection.ArrowButton
id='subscriptionsList'
textLocalizationKey={subscriptionItems.length > 0 ? arrowButtonText : arrowButtonEmptyText}
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -92,7 +92,7 @@ export function ComponentContextProvider({
);
case 'PricingTable':
return (
<SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'org' : 'user'}>
<SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'organization' : 'user'}>
<PricingTableContext.Provider value={{ componentName, ...(props as PricingTableProps) }}>
{children}
</PricingTableContext.Provider>
Expand Down
19 changes: 0 additions & 19 deletions packages/clerk-js/src/ui/contexts/components/Checkout.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,12 +5,6 @@ import { isAllowedRedirect } from '../../../utils';
import type { CheckoutCtx } from '../../types';
import { useOptions } from '../OptionsContext';

function invariant(cond: any, msg: string): asserts cond {
if (!cond) {
throw Error(msg);
}
}

export const CheckoutContext = createContext<CheckoutCtx | null>(null);

export const useCheckoutContext = () => {
Expand All@@ -35,22 +29,9 @@ export const useCheckoutContext = () => {

const { componentName, ...ctx } = context;

const subscriber = () => {
if (ctx.subscriberType === 'org' && clerk.organization) {
invariant(clerk.organization, 'Clerk: subscriberType is "org" but no active organization was found');

return clerk.organization;
}

invariant(clerk.user, 'Clerk: no active user found');

return clerk.user;
};

return {
...ctx,
componentName,
newSubscriptionRedirectUrl,
subscriber,
};
};
12 changes: 6 additions & 6 deletions packages/clerk-js/src/ui/contexts/components/Plans.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,7 +25,7 @@ import { useSubscriberTypeContext } from './SubscriberType';
export const usePaymentMethods = () => {
const subscriberType = useSubscriberTypeContext();
return __experimental_usePaymentMethods({
for: subscriberType === 'org' ? 'organization' : 'user',
for: subscriberType,
initialPage: 1,
pageSize: 10,
keepPreviousData: true,
Expand All@@ -35,7 +35,7 @@ export const usePaymentMethods = () => {
export const usePaymentAttempts = () => {
const subscriberType = useSubscriberTypeContext();
return __experimental_usePaymentAttempts({
for: subscriberType === 'org' ? 'organization' : 'user',
for: subscriberType,
initialPage: 1,
pageSize: 10,
keepPreviousData: true,
Expand All@@ -45,7 +45,7 @@ export const usePaymentAttempts = () => {
export const useStatements = (params?: { mode: 'cache' }) => {
const subscriberType = useSubscriberTypeContext();
return __experimental_useStatements({
for: subscriberType === 'org' ? 'organization' : 'user',
for: subscriberType,
initialPage: 1,
pageSize: 10,
keepPreviousData: true,
Expand All@@ -56,7 +56,7 @@ export const useStatements = (params?: { mode: 'cache' }) => {
export const useSubscription = () => {
const subscriberType = useSubscriberTypeContext();
const subscription = __experimental_useSubscription({
for: subscriberType === 'org' ? 'organization' : 'user',
for: subscriberType,
keepPreviousData: true,
});
const subscriptionItems = useMemo(
Expand All@@ -74,7 +74,7 @@ export const usePlans = (params?: { mode: 'cache' }) => {
const subscriberType = useSubscriberTypeContext();

return __experimental_usePlans({
for: subscriberType === 'org' ? 'organization' : 'user',
for: subscriberType,
initialPage: 1,
pageSize: 50,
keepPreviousData: true,
Expand DownExpand Up@@ -303,7 +303,7 @@ export const usePlansContext = () => {
planId: plan.id,
// if the plan doesn't support annual, use monthly
planPeriod: planPeriod === 'annual' && plan.annualMonthlyAmount === 0 ? 'month' : planPeriod,
subscriberType,
for: subscriberType,
onSubscriptionComplete: () => {
revalidateAll();
},
Expand Down
6 changes: 3 additions & 3 deletions packages/clerk-js/src/ui/contexts/components/SubscriberType.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
import type { CommercePayerType } from '@clerk/types';
import type { ForPayerType } from '@clerk/types';
import { createContext, useContext } from 'react';

const DEFAUlT = 'user';
export const SubscriberTypeContext = createContext<CommercePayerType | undefined>(DEFAUlT);
export const SubscriberTypeContext = createContext<ForPayerType | undefined>(DEFAUlT);

export const useSubscriberTypeContext = (): CommercePayerType => useContext(SubscriberTypeContext) || DEFAUlT;
export const useSubscriberTypeContext = (): ForPayerType => useContext(SubscriberTypeContext) || DEFAUlT;

export const useSubscriberTypeLocalizationRoot = () => {
const subscriberType = useSubscriberTypeContext();
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -40,7 +40,7 @@ export function MountedCheckoutDrawer({
<Checkout
planId={checkoutDrawer.props.planId}
planPeriod={checkoutDrawer.props.planPeriod}
subscriberType={checkoutDrawer.props.subscriberType}
for={checkoutDrawer.props.for}
onSubscriptionComplete={checkoutDrawer.props.onSubscriptionComplete}
portalRoot={checkoutDrawer.props.portalRoot}
appearance={checkoutDrawer.props.appearance}
Expand Down
6 changes: 3 additions & 3 deletions packages/react/src/components/CheckoutButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ export const CheckoutButton = withClerk(
const {
planId,
planPeriod,
subscriberType,
for: _for,
onSubscriptionComplete,
newSubscriptionRedirectUrl,
checkoutProps,
Expand All@@ -62,7 +62,7 @@ export const CheckoutButton = withClerk(
throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
}

if (orgId === null && subscriberType === 'org') {
if (orgId === null && _for === 'organization') {
throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
}

Expand All@@ -77,7 +77,7 @@ export const CheckoutButton = withClerk(
return clerk.__internal_openCheckout({
planId,
planPeriod,
subscriberType,
for: _for,
onSubscriptionComplete,
newSubscriptionRedirectUrl,
...checkoutProps,
Expand Down
6 changes: 3 additions & 3 deletions packages/react/src/components/SubscriptionDetailsButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -46,7 +46,7 @@ export const SubscriptionDetailsButton = withClerk(
children,
...props
}: WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>) => {
const { for: forProp, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
children = normalizeWithDefaultValue(children, 'Subscription details');
const child = assertSingleChild(children)('SubscriptionDetailsButton');

Expand All@@ -56,7 +56,7 @@ export const SubscriptionDetailsButton = withClerk(
throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
}

if (orgId === null && forProp === 'org') {
if (orgId === null && _for === 'organization') {
throw new Error(
'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
);
Expand All@@ -68,7 +68,7 @@ export const SubscriptionDetailsButton = withClerk(
}

return clerk.__internal_openSubscriptionDetails({
for: forProp,
for: _for,
onSubscriptionCancel,
...subscriptionDetailsProps,
});
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(shared,clerk-js): Align for payer type across billing APIs#6423

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

from

Jul 29, 2025
 Merged


chore(shared,clerk-js): Align for payer type across billing APIs
#6423
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
4f125ce

chore(shared,clerk-js): Align `for` payer type across billing APIs


panteliselef Jul 29, 2025
01fc05c

update typedocs


panteliselef Jul 29, 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


9 changes: 9 additions & 0 deletions
.changeset/some-parents-begin.md

View file


Open in desktop

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

[Billing Beta]: Replace `org` for `organization` as payer type for billing APIs.

This applies for all billing APIs, except the resources classes that represent data from Frontend API.

3 changes: 2 additions & 1 deletion
.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -32,7 +32,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
 "types/commerce-initialized-payment-source-resource.mdx",
 "types/commerce-money-json.mdx",
 "types/commerce-money.mdx",
 "types/commerce-payer-type.mdx",
 "types/commerce-payer-resource-type.mdx",
 "types/commerce-payment-charge-type.mdx",
 "types/commerce-payment-json.mdx",
 "types/commerce-payment-resource.mdx",
Expand DownExpand Up@@ -66,6 +66,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
 "types/experimental_checkout-button-props.mdx",
 "types/experimental_plan-details-button-props.mdx",
 "types/experimental_subscription-details-button-props.mdx",
 "types/for-payer-type.mdx",
 "types/get-payment-attempts-params.mdx",
 "types/get-payment-sources-params.mdx",
 "types/get-plans-params.mdx",
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -34,7 +34,7 @@ import {
export class CommerceBilling implements CommerceBillingNamespace {
 getPlans = async (params?: GetPlansParams): Promise<ClerkPaginatedResponse<CommercePlanResource>> => {
 const { for: forParam, ...safeParams } = params || {};
 const searchParams = { ...safeParams, payer_type: forParam || 'user' };
 const searchParams = { ...safeParams, payer_type: forParam === 'organization' ? 'org' : 'user' };
 return await BaseResource._fetch({
 path: `/commerce/plans`,
 method: 'GET',
Expand Down

9 changes: 7 additions & 2 deletions
packages/clerk-js/src/core/resources/CommercePlan.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
import type { CommercePayerType, CommercePlanJSON, CommercePlanJSONSnapshot, CommercePlanResource } from '@clerk/types';
import type {
 CommercePayerResourceType,
 CommercePlanJSON,
 CommercePlanJSONSnapshot,
 CommercePlanResource,
} from '@clerk/types';

import { BaseResource, CommerceFeature } from './internal';

Expand All@@ -17,7 +22,7 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
 isDefault!: boolean;
 isRecurring!: boolean;
 hasBaseFee!: boolean;
 forPayerType!: CommercePayerType;
 forPayerType!: CommercePayerResourceType;
 publiclyVisible!: boolean;
 slug!: string;
 avatarUrl!: string;
Expand Down

5 changes: 3 additions & 2 deletions
packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -115,7 +115,7 @@ export const CheckoutForm = withCardStateProvider(() => {

const useCheckoutMutations = () => {
 const { organization } = useOrganization();
 const { subscriberType, onSubscriptionComplete } = useCheckoutContext();
 const { for: _for, onSubscriptionComplete } = useCheckoutContext();
 const { checkout } = useCheckout();
 const { id, confirm } = checkout;
 const card = useCardState();
Expand All@@ -130,7 +130,8 @@ const useCheckoutMutations = () => {

 const { data, error } = await confirm({
 ...params,
 ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
 // TODO(@COMMERCE): Come back to this, this should not be needed
 ...(_for === 'organization' ? { orgId: organization?.id } : {}),
 });

 if (error) {
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,18 +10,18 @@ const Initiator = () => {
 const { checkout } = useCheckout();

 useEffect(() => {
 checkout.start().catch(() => null);
void checkout.start();
 return checkout.clear;
 }, []);
 return null;
};

const Root = ({ children }: { children: React.ReactNode }) => {
 const { planId, planPeriod, subscriberType } = useCheckoutContext();
 const { planId, planPeriod, for: _for } = useCheckoutContext();

 return (
 <CheckoutProvider
 for={subscriberType === 'org' ? 'organization' : undefined}
 for={_for}
 planId={
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 planId!
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Checkout/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ export const Checkout = (props: __internal_CheckoutProps) => {
 return (
 <Flow.Root flow='checkout'>
 <Flow.Part>
 <SubscriberTypeContext.Provider value={props.subscriberType || 'user'}>
 <SubscriberTypeContext.Provider value={props.for || 'user'}>
 <CheckoutContext.Provider
 value={{
 componentName: 'Checkout',
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -83,7 +83,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {

export const OrganizationBillingPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <OrganizationBillingPageInternal />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPaymentAttemptPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { PaymentAttemptPage } from '../PaymentAttempts';

export const OrganizationPaymentAttemptPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <PaymentAttemptPage />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -53,7 +53,7 @@ const OrganizationPlansPageInternal = () => {

export const OrganizationPlansPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <OrganizationPlansPageInternal />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationStatementPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { StatementPage } from '../Statements';

export const OrganizationStatementPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <StatementPage />
 </SubscriberTypeContext.Provider>
 );
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@@ -25,7 +25,7 @@ const AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void
 const localizationRoot = useSubscriberTypeLocalizationRoot();

 const onAddPaymentSourceSuccess = async (context: { gateway: 'stripe'; paymentToken: string }) => {
 const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;
 await resource?.addPaymentSource(context);
 onSuccess();
 close();
Expand DownExpand Up@@ -72,7 +72,7 @@ const RemoveScreen = ({

 const removePaymentSource = async () => {
 await paymentSource
 .remove({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .remove({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(revalidate)
 .catch((error: Error) => {
 handleError(error, [], card.setError);
Expand DownExpand Up@@ -108,7 +108,7 @@ export const PaymentSources = withCardStateProvider(() => {
 const clerk = useClerk();
 const subscriberType = useSubscriberTypeContext();
 const localizationRoot = useSubscriberTypeLocalizationRoot();
 const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;

 const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods();

Expand DownExpand Up@@ -209,7 +209,7 @@ const PaymentSourceMenu = ({
 isDestructive: false,
 onClick: () => {
 paymentSource
 .makeDefault({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .makeDefault({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(revalidate)
 .catch((error: Error) => {
 handleError(error, [], card.setError);
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ const PlanDetailsInternal = ({
 const hasFeatures = features.length > 0;

 return (
 <SubscriberTypeContext.Provider value={plan.forPayerType}>
 <SubscriberTypeContext.Provider value={plan.forPayerType === 'org' ? 'organization' : 'user'}>
 <Drawer.Header
 sx={t =>
 !hasFeatures
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -189,7 +189,7 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
 setLoading();

 await selectedSubscription
 .cancel({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .cancel({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(() => {
 onSubscriptionCancel?.();
 if (setIsOpen) {
Expand DownExpand Up@@ -381,7 +381,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
 openCheckout({
 planId: subscription.plan.id,
 planPeriod: subscription.planPeriod === 'month' ? 'annual' : 'month',
 subscriberType,
for: subscriberType,
 });
 },
 }
Expand All@@ -403,7 +403,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
 openCheckout({
 planId: subscription.plan.id,
 planPeriod: subscription.planPeriod,
 subscriberType,
for: subscriberType,
 });
 },
 }
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -197,7 +197,7 @@ export function SubscriptionsList({
 )}

 {(commerceSettings.billing.user.hasPaidPlans && subscriberType === 'user') ||
 (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'org') ? (
 (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'organization') ? (
 <ProfileSection.ArrowButton
 id='subscriptionsList'
 textLocalizationKey={subscriptionItems.length > 0 ? arrowButtonText : arrowButtonEmptyText}
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -92,7 +92,7 @@ export function ComponentContextProvider({
 );
 case 'PricingTable':
 return (
 <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'org' : 'user'}>
 <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'organization' : 'user'}>
 <PricingTableContext.Provider value={{ componentName, ...(props as PricingTableProps) }}>
 {children}
 </PricingTableContext.Provider>
Expand Down

19 changes: 0 additions & 19 deletions
packages/clerk-js/src/ui/contexts/components/Checkout.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,12 +5,6 @@ import { isAllowedRedirect } from '../../../utils';
import type { CheckoutCtx } from '../../types';
import { useOptions } from '../OptionsContext';

function invariant(cond: any, msg: string): asserts cond {
 if (!cond) {
 throw Error(msg);
 }
}

export const CheckoutContext = createContext<CheckoutCtx | null>(null);

export const useCheckoutContext = () => {
Expand All@@ -35,22 +29,9 @@ export const useCheckoutContext = () => {

 const { componentName, ...ctx } = context;

 const subscriber = () => {
 if (ctx.subscriberType === 'org' && clerk.organization) {
 invariant(clerk.organization, 'Clerk: subscriberType is "org" but no active organization was found');

 return clerk.organization;
 }

 invariant(clerk.user, 'Clerk: no active user found');

 return clerk.user;
 };

 return {
 ...ctx,
 componentName,
 newSubscriptionRedirectUrl,
 subscriber,
 };
};

12 changes: 6 additions & 6 deletions
packages/clerk-js/src/ui/contexts/components/Plans.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,7 +25,7 @@ import { useSubscriberTypeContext } from './SubscriberType';
export const usePaymentMethods = () => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_usePaymentMethods({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -35,7 +35,7 @@ export const usePaymentMethods = () => {
export const usePaymentAttempts = () => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_usePaymentAttempts({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -45,7 +45,7 @@ export const usePaymentAttempts = () => {
export const useStatements = (params?: { mode: 'cache' }) => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_useStatements({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -56,7 +56,7 @@ export const useStatements = (params?: { mode: 'cache' }) => {
export const useSubscription = () => {
 const subscriberType = useSubscriberTypeContext();
 const subscription = __experimental_useSubscription({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 keepPreviousData: true,
 });
 const subscriptionItems = useMemo(
Expand All@@ -74,7 +74,7 @@ export const usePlans = (params?: { mode: 'cache' }) => {
 const subscriberType = useSubscriberTypeContext();

 return __experimental_usePlans({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 50,
 keepPreviousData: true,
Expand DownExpand Up@@ -303,7 +303,7 @@ export const usePlansContext = () => {
 planId: plan.id,
 // if the plan doesn't support annual, use monthly
 planPeriod: planPeriod === 'annual' && plan.annualMonthlyAmount === 0 ? 'month' : planPeriod,
 subscriberType,
for: subscriberType,
 onSubscriptionComplete: () => {
 revalidateAll();
 },
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/contexts/components/SubscriberType.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
import type { CommercePayerType } from '@clerk/types';
import type { ForPayerType } from '@clerk/types';
import { createContext, useContext } from 'react';

const DEFAUlT = 'user';
export const SubscriberTypeContext = createContext<CommercePayerType | undefined>(DEFAUlT);
export const SubscriberTypeContext = createContext<ForPayerType | undefined>(DEFAUlT);

export const useSubscriberTypeContext = (): CommercePayerType => useContext(SubscriberTypeContext) || DEFAUlT;
export const useSubscriberTypeContext = (): ForPayerType => useContext(SubscriberTypeContext) || DEFAUlT;

export const useSubscriberTypeLocalizationRoot = () => {
 const subscriberType = useSubscriberTypeContext();
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -40,7 +40,7 @@ export function MountedCheckoutDrawer({
 <Checkout
 planId={checkoutDrawer.props.planId}
 planPeriod={checkoutDrawer.props.planPeriod}
subscriberType={checkoutDrawer.props.subscriberType}
for={checkoutDrawer.props.for}
 onSubscriptionComplete={checkoutDrawer.props.onSubscriptionComplete}
 portalRoot={checkoutDrawer.props.portalRoot}
 appearance={checkoutDrawer.props.appearance}
Expand Down

6 changes: 3 additions & 3 deletions
packages/react/src/components/CheckoutButton.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ export const CheckoutButton = withClerk(
 const {
 planId,
 planPeriod,
subscriberType,
for: _for,
 onSubscriptionComplete,
 newSubscriptionRedirectUrl,
 checkoutProps,
Expand All@@ -62,7 +62,7 @@ export const CheckoutButton = withClerk(
 throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
 }

 if (orgId === null && subscriberType === 'org') {
 if (orgId === null && _for === 'organization') {
 throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
 }

Expand All@@ -77,7 +77,7 @@ export const CheckoutButton = withClerk(
 return clerk.__internal_openCheckout({
 planId,
 planPeriod,
subscriberType,
for: _for,
 onSubscriptionComplete,
 newSubscriptionRedirectUrl,
 ...checkoutProps,
Expand Down

6 changes: 3 additions & 3 deletions
packages/react/src/components/SubscriptionDetailsButton.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -46,7 +46,7 @@ export const SubscriptionDetailsButton = withClerk(
 children,
 ...props
 }: WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>) => {
 const { for: forProp, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
 const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
 children = normalizeWithDefaultValue(children, 'Subscription details');
 const child = assertSingleChild(children)('SubscriptionDetailsButton');

Expand All@@ -56,7 +56,7 @@ export const SubscriptionDetailsButton = withClerk(
 throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
 }

 if (orgId === null && forProp === 'org') {
 if (orgId === null && _for === 'organization') {
 throw new Error(
 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
 );
Expand All@@ -68,7 +68,7 @@ export const SubscriptionDetailsButton = withClerk(
 }

 return clerk.__internal_openSubscriptionDetails({
 for: forProp,
 for: _for,
 onSubscriptionCancel,
 ...subscriptionDetailsProps,
 });
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(shared,clerk-js): Align for payer type across billing APIs#6423

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

from

Jul 29, 2025
 Merged


chore(shared,clerk-js): Align for payer type across billing APIs
#6423
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
4f125ce

chore(shared,clerk-js): Align `for` payer type across billing APIs


panteliselef Jul 29, 2025
01fc05c

update typedocs


panteliselef Jul 29, 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


9 changes: 9 additions & 0 deletions
.changeset/some-parents-begin.md

View file


Open in desktop

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

[Billing Beta]: Replace `org` for `organization` as payer type for billing APIs.

This applies for all billing APIs, except the resources classes that represent data from Frontend API.

3 changes: 2 additions & 1 deletion
.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -32,7 +32,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
 "types/commerce-initialized-payment-source-resource.mdx",
 "types/commerce-money-json.mdx",
 "types/commerce-money.mdx",
 "types/commerce-payer-type.mdx",
 "types/commerce-payer-resource-type.mdx",
 "types/commerce-payment-charge-type.mdx",
 "types/commerce-payment-json.mdx",
 "types/commerce-payment-resource.mdx",
Expand DownExpand Up@@ -66,6 +66,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
 "types/experimental_checkout-button-props.mdx",
 "types/experimental_plan-details-button-props.mdx",
 "types/experimental_subscription-details-button-props.mdx",
 "types/for-payer-type.mdx",
 "types/get-payment-attempts-params.mdx",
 "types/get-payment-sources-params.mdx",
 "types/get-plans-params.mdx",
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -34,7 +34,7 @@ import {
export class CommerceBilling implements CommerceBillingNamespace {
 getPlans = async (params?: GetPlansParams): Promise<ClerkPaginatedResponse<CommercePlanResource>> => {
 const { for: forParam, ...safeParams } = params || {};
 const searchParams = { ...safeParams, payer_type: forParam || 'user' };
 const searchParams = { ...safeParams, payer_type: forParam === 'organization' ? 'org' : 'user' };
 return await BaseResource._fetch({
 path: `/commerce/plans`,
 method: 'GET',
Expand Down

9 changes: 7 additions & 2 deletions
packages/clerk-js/src/core/resources/CommercePlan.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
import type { CommercePayerType, CommercePlanJSON, CommercePlanJSONSnapshot, CommercePlanResource } from '@clerk/types';
import type {
 CommercePayerResourceType,
 CommercePlanJSON,
 CommercePlanJSONSnapshot,
 CommercePlanResource,
} from '@clerk/types';

import { BaseResource, CommerceFeature } from './internal';

Expand All@@ -17,7 +22,7 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
 isDefault!: boolean;
 isRecurring!: boolean;
 hasBaseFee!: boolean;
 forPayerType!: CommercePayerType;
 forPayerType!: CommercePayerResourceType;
 publiclyVisible!: boolean;
 slug!: string;
 avatarUrl!: string;
Expand Down

5 changes: 3 additions & 2 deletions
packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -115,7 +115,7 @@ export const CheckoutForm = withCardStateProvider(() => {

const useCheckoutMutations = () => {
 const { organization } = useOrganization();
 const { subscriberType, onSubscriptionComplete } = useCheckoutContext();
 const { for: _for, onSubscriptionComplete } = useCheckoutContext();
 const { checkout } = useCheckout();
 const { id, confirm } = checkout;
 const card = useCardState();
Expand All@@ -130,7 +130,8 @@ const useCheckoutMutations = () => {

 const { data, error } = await confirm({
 ...params,
 ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
 // TODO(@COMMERCE): Come back to this, this should not be needed
 ...(_for === 'organization' ? { orgId: organization?.id } : {}),
 });

 if (error) {
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,18 +10,18 @@ const Initiator = () => {
 const { checkout } = useCheckout();

 useEffect(() => {
 checkout.start().catch(() => null);
void checkout.start();
 return checkout.clear;
 }, []);
 return null;
};

const Root = ({ children }: { children: React.ReactNode }) => {
 const { planId, planPeriod, subscriberType } = useCheckoutContext();
 const { planId, planPeriod, for: _for } = useCheckoutContext();

 return (
 <CheckoutProvider
 for={subscriberType === 'org' ? 'organization' : undefined}
 for={_for}
 planId={
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 planId!
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Checkout/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ export const Checkout = (props: __internal_CheckoutProps) => {
 return (
 <Flow.Root flow='checkout'>
 <Flow.Part>
 <SubscriberTypeContext.Provider value={props.subscriberType || 'user'}>
 <SubscriberTypeContext.Provider value={props.for || 'user'}>
 <CheckoutContext.Provider
 value={{
 componentName: 'Checkout',
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -83,7 +83,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {

export const OrganizationBillingPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <OrganizationBillingPageInternal />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPaymentAttemptPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { PaymentAttemptPage } from '../PaymentAttempts';

export const OrganizationPaymentAttemptPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <PaymentAttemptPage />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -53,7 +53,7 @@ const OrganizationPlansPageInternal = () => {

export const OrganizationPlansPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <OrganizationPlansPageInternal />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationStatementPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { StatementPage } from '../Statements';

export const OrganizationStatementPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <StatementPage />
 </SubscriberTypeContext.Provider>
 );
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@@ -25,7 +25,7 @@ const AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void
 const localizationRoot = useSubscriberTypeLocalizationRoot();

 const onAddPaymentSourceSuccess = async (context: { gateway: 'stripe'; paymentToken: string }) => {
 const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;
 await resource?.addPaymentSource(context);
 onSuccess();
 close();
Expand DownExpand Up@@ -72,7 +72,7 @@ const RemoveScreen = ({

 const removePaymentSource = async () => {
 await paymentSource
 .remove({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .remove({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(revalidate)
 .catch((error: Error) => {
 handleError(error, [], card.setError);
Expand DownExpand Up@@ -108,7 +108,7 @@ export const PaymentSources = withCardStateProvider(() => {
 const clerk = useClerk();
 const subscriberType = useSubscriberTypeContext();
 const localizationRoot = useSubscriberTypeLocalizationRoot();
 const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;

 const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods();

Expand DownExpand Up@@ -209,7 +209,7 @@ const PaymentSourceMenu = ({
 isDestructive: false,
 onClick: () => {
 paymentSource
 .makeDefault({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .makeDefault({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(revalidate)
 .catch((error: Error) => {
 handleError(error, [], card.setError);
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ const PlanDetailsInternal = ({
 const hasFeatures = features.length > 0;

 return (
 <SubscriberTypeContext.Provider value={plan.forPayerType}>
 <SubscriberTypeContext.Provider value={plan.forPayerType === 'org' ? 'organization' : 'user'}>
 <Drawer.Header
 sx={t =>
 !hasFeatures
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -189,7 +189,7 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
 setLoading();

 await selectedSubscription
 .cancel({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .cancel({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(() => {
 onSubscriptionCancel?.();
 if (setIsOpen) {
Expand DownExpand Up@@ -381,7 +381,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
 openCheckout({
 planId: subscription.plan.id,
 planPeriod: subscription.planPeriod === 'month' ? 'annual' : 'month',
 subscriberType,
for: subscriberType,
 });
 },
 }
Expand All@@ -403,7 +403,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
 openCheckout({
 planId: subscription.plan.id,
 planPeriod: subscription.planPeriod,
 subscriberType,
for: subscriberType,
 });
 },
 }
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -197,7 +197,7 @@ export function SubscriptionsList({
 )}

 {(commerceSettings.billing.user.hasPaidPlans && subscriberType === 'user') ||
 (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'org') ? (
 (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'organization') ? (
 <ProfileSection.ArrowButton
 id='subscriptionsList'
 textLocalizationKey={subscriptionItems.length > 0 ? arrowButtonText : arrowButtonEmptyText}
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -92,7 +92,7 @@ export function ComponentContextProvider({
 );
 case 'PricingTable':
 return (
 <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'org' : 'user'}>
 <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'organization' : 'user'}>
 <PricingTableContext.Provider value={{ componentName, ...(props as PricingTableProps) }}>
 {children}
 </PricingTableContext.Provider>
Expand Down

19 changes: 0 additions & 19 deletions
packages/clerk-js/src/ui/contexts/components/Checkout.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,12 +5,6 @@ import { isAllowedRedirect } from '../../../utils';
import type { CheckoutCtx } from '../../types';
import { useOptions } from '../OptionsContext';

function invariant(cond: any, msg: string): asserts cond {
 if (!cond) {
 throw Error(msg);
 }
}

export const CheckoutContext = createContext<CheckoutCtx | null>(null);

export const useCheckoutContext = () => {
Expand All@@ -35,22 +29,9 @@ export const useCheckoutContext = () => {

 const { componentName, ...ctx } = context;

 const subscriber = () => {
 if (ctx.subscriberType === 'org' && clerk.organization) {
 invariant(clerk.organization, 'Clerk: subscriberType is "org" but no active organization was found');

 return clerk.organization;
 }

 invariant(clerk.user, 'Clerk: no active user found');

 return clerk.user;
 };

 return {
 ...ctx,
 componentName,
 newSubscriptionRedirectUrl,
 subscriber,
 };
};

12 changes: 6 additions & 6 deletions
packages/clerk-js/src/ui/contexts/components/Plans.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,7 +25,7 @@ import { useSubscriberTypeContext } from './SubscriberType';
export const usePaymentMethods = () => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_usePaymentMethods({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -35,7 +35,7 @@ export const usePaymentMethods = () => {
export const usePaymentAttempts = () => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_usePaymentAttempts({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -45,7 +45,7 @@ export const usePaymentAttempts = () => {
export const useStatements = (params?: { mode: 'cache' }) => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_useStatements({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -56,7 +56,7 @@ export const useStatements = (params?: { mode: 'cache' }) => {
export const useSubscription = () => {
 const subscriberType = useSubscriberTypeContext();
 const subscription = __experimental_useSubscription({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 keepPreviousData: true,
 });
 const subscriptionItems = useMemo(
Expand All@@ -74,7 +74,7 @@ export const usePlans = (params?: { mode: 'cache' }) => {
 const subscriberType = useSubscriberTypeContext();

 return __experimental_usePlans({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 50,
 keepPreviousData: true,
Expand DownExpand Up@@ -303,7 +303,7 @@ export const usePlansContext = () => {
 planId: plan.id,
 // if the plan doesn't support annual, use monthly
 planPeriod: planPeriod === 'annual' && plan.annualMonthlyAmount === 0 ? 'month' : planPeriod,
 subscriberType,
for: subscriberType,
 onSubscriptionComplete: () => {
 revalidateAll();
 },
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/contexts/components/SubscriberType.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
import type { CommercePayerType } from '@clerk/types';
import type { ForPayerType } from '@clerk/types';
import { createContext, useContext } from 'react';

const DEFAUlT = 'user';
export const SubscriberTypeContext = createContext<CommercePayerType | undefined>(DEFAUlT);
export const SubscriberTypeContext = createContext<ForPayerType | undefined>(DEFAUlT);

export const useSubscriberTypeContext = (): CommercePayerType => useContext(SubscriberTypeContext) || DEFAUlT;
export const useSubscriberTypeContext = (): ForPayerType => useContext(SubscriberTypeContext) || DEFAUlT;

export const useSubscriberTypeLocalizationRoot = () => {
 const subscriberType = useSubscriberTypeContext();
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -40,7 +40,7 @@ export function MountedCheckoutDrawer({
 <Checkout
 planId={checkoutDrawer.props.planId}
 planPeriod={checkoutDrawer.props.planPeriod}
subscriberType={checkoutDrawer.props.subscriberType}
for={checkoutDrawer.props.for}
 onSubscriptionComplete={checkoutDrawer.props.onSubscriptionComplete}
 portalRoot={checkoutDrawer.props.portalRoot}
 appearance={checkoutDrawer.props.appearance}
Expand Down

6 changes: 3 additions & 3 deletions
packages/react/src/components/CheckoutButton.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ export const CheckoutButton = withClerk(
 const {
 planId,
 planPeriod,
subscriberType,
for: _for,
 onSubscriptionComplete,
 newSubscriptionRedirectUrl,
 checkoutProps,
Expand All@@ -62,7 +62,7 @@ export const CheckoutButton = withClerk(
 throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
 }

 if (orgId === null && subscriberType === 'org') {
 if (orgId === null && _for === 'organization') {
 throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
 }

Expand All@@ -77,7 +77,7 @@ export const CheckoutButton = withClerk(
 return clerk.__internal_openCheckout({
 planId,
 planPeriod,
subscriberType,
for: _for,
 onSubscriptionComplete,
 newSubscriptionRedirectUrl,
 ...checkoutProps,
Expand Down

6 changes: 3 additions & 3 deletions
packages/react/src/components/SubscriptionDetailsButton.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -46,7 +46,7 @@ export const SubscriptionDetailsButton = withClerk(
 children,
 ...props
 }: WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>) => {
 const { for: forProp, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
 const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
 children = normalizeWithDefaultValue(children, 'Subscription details');
 const child = assertSingleChild(children)('SubscriptionDetailsButton');

Expand All@@ -56,7 +56,7 @@ export const SubscriptionDetailsButton = withClerk(
 throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
 }

 if (orgId === null && forProp === 'org') {
 if (orgId === null && _for === 'organization') {
 throw new Error(
 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
 );
Expand All@@ -68,7 +68,7 @@ export const SubscriptionDetailsButton = withClerk(
 }

 return clerk.__internal_openSubscriptionDetails({
 for: forProp,
 for: _for,
 onSubscriptionCancel,
 ...subscriptionDetailsProps,
 });
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(shared,clerk-js): Align for payer type across billing APIs#6423

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

from

Jul 29, 2025
 Merged


chore(shared,clerk-js): Align for payer type across billing APIs
#6423
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
4f125ce

chore(shared,clerk-js): Align `for` payer type across billing APIs


panteliselef Jul 29, 2025
01fc05c

update typedocs


panteliselef Jul 29, 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


9 changes: 9 additions & 0 deletions
.changeset/some-parents-begin.md

View file


Open in desktop

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

[Billing Beta]: Replace `org` for `organization` as payer type for billing APIs.

This applies for all billing APIs, except the resources classes that represent data from Frontend API.

3 changes: 2 additions & 1 deletion
.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -32,7 +32,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
 "types/commerce-initialized-payment-source-resource.mdx",
 "types/commerce-money-json.mdx",
 "types/commerce-money.mdx",
 "types/commerce-payer-type.mdx",
 "types/commerce-payer-resource-type.mdx",
 "types/commerce-payment-charge-type.mdx",
 "types/commerce-payment-json.mdx",
 "types/commerce-payment-resource.mdx",
Expand DownExpand Up@@ -66,6 +66,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
 "types/experimental_checkout-button-props.mdx",
 "types/experimental_plan-details-button-props.mdx",
 "types/experimental_subscription-details-button-props.mdx",
 "types/for-payer-type.mdx",
 "types/get-payment-attempts-params.mdx",
 "types/get-payment-sources-params.mdx",
 "types/get-plans-params.mdx",
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -34,7 +34,7 @@ import {
export class CommerceBilling implements CommerceBillingNamespace {
 getPlans = async (params?: GetPlansParams): Promise<ClerkPaginatedResponse<CommercePlanResource>> => {
 const { for: forParam, ...safeParams } = params || {};
 const searchParams = { ...safeParams, payer_type: forParam || 'user' };
 const searchParams = { ...safeParams, payer_type: forParam === 'organization' ? 'org' : 'user' };
 return await BaseResource._fetch({
 path: `/commerce/plans`,
 method: 'GET',
Expand Down

9 changes: 7 additions & 2 deletions
packages/clerk-js/src/core/resources/CommercePlan.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
import type { CommercePayerType, CommercePlanJSON, CommercePlanJSONSnapshot, CommercePlanResource } from '@clerk/types';
import type {
 CommercePayerResourceType,
 CommercePlanJSON,
 CommercePlanJSONSnapshot,
 CommercePlanResource,
} from '@clerk/types';

import { BaseResource, CommerceFeature } from './internal';

Expand All@@ -17,7 +22,7 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
 isDefault!: boolean;
 isRecurring!: boolean;
 hasBaseFee!: boolean;
 forPayerType!: CommercePayerType;
 forPayerType!: CommercePayerResourceType;
 publiclyVisible!: boolean;
 slug!: string;
 avatarUrl!: string;
Expand Down

5 changes: 3 additions & 2 deletions
packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -115,7 +115,7 @@ export const CheckoutForm = withCardStateProvider(() => {

const useCheckoutMutations = () => {
 const { organization } = useOrganization();
 const { subscriberType, onSubscriptionComplete } = useCheckoutContext();
 const { for: _for, onSubscriptionComplete } = useCheckoutContext();
 const { checkout } = useCheckout();
 const { id, confirm } = checkout;
 const card = useCardState();
Expand All@@ -130,7 +130,8 @@ const useCheckoutMutations = () => {

 const { data, error } = await confirm({
 ...params,
 ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
 // TODO(@COMMERCE): Come back to this, this should not be needed
 ...(_for === 'organization' ? { orgId: organization?.id } : {}),
 });

 if (error) {
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,18 +10,18 @@ const Initiator = () => {
 const { checkout } = useCheckout();

 useEffect(() => {
 checkout.start().catch(() => null);
void checkout.start();
 return checkout.clear;
 }, []);
 return null;
};

const Root = ({ children }: { children: React.ReactNode }) => {
 const { planId, planPeriod, subscriberType } = useCheckoutContext();
 const { planId, planPeriod, for: _for } = useCheckoutContext();

 return (
 <CheckoutProvider
 for={subscriberType === 'org' ? 'organization' : undefined}
 for={_for}
 planId={
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 planId!
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Checkout/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ export const Checkout = (props: __internal_CheckoutProps) => {
 return (
 <Flow.Root flow='checkout'>
 <Flow.Part>
 <SubscriberTypeContext.Provider value={props.subscriberType || 'user'}>
 <SubscriberTypeContext.Provider value={props.for || 'user'}>
 <CheckoutContext.Provider
 value={{
 componentName: 'Checkout',
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -83,7 +83,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {

export const OrganizationBillingPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <OrganizationBillingPageInternal />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPaymentAttemptPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { PaymentAttemptPage } from '../PaymentAttempts';

export const OrganizationPaymentAttemptPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <PaymentAttemptPage />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -53,7 +53,7 @@ const OrganizationPlansPageInternal = () => {

export const OrganizationPlansPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <OrganizationPlansPageInternal />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationStatementPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { StatementPage } from '../Statements';

export const OrganizationStatementPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <StatementPage />
 </SubscriberTypeContext.Provider>
 );
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@@ -25,7 +25,7 @@ const AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void
 const localizationRoot = useSubscriberTypeLocalizationRoot();

 const onAddPaymentSourceSuccess = async (context: { gateway: 'stripe'; paymentToken: string }) => {
 const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;
 await resource?.addPaymentSource(context);
 onSuccess();
 close();
Expand DownExpand Up@@ -72,7 +72,7 @@ const RemoveScreen = ({

 const removePaymentSource = async () => {
 await paymentSource
 .remove({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .remove({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(revalidate)
 .catch((error: Error) => {
 handleError(error, [], card.setError);
Expand DownExpand Up@@ -108,7 +108,7 @@ export const PaymentSources = withCardStateProvider(() => {
 const clerk = useClerk();
 const subscriberType = useSubscriberTypeContext();
 const localizationRoot = useSubscriberTypeLocalizationRoot();
 const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;

 const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods();

Expand DownExpand Up@@ -209,7 +209,7 @@ const PaymentSourceMenu = ({
 isDestructive: false,
 onClick: () => {
 paymentSource
 .makeDefault({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .makeDefault({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(revalidate)
 .catch((error: Error) => {
 handleError(error, [], card.setError);
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ const PlanDetailsInternal = ({
 const hasFeatures = features.length > 0;

 return (
 <SubscriberTypeContext.Provider value={plan.forPayerType}>
 <SubscriberTypeContext.Provider value={plan.forPayerType === 'org' ? 'organization' : 'user'}>
 <Drawer.Header
 sx={t =>
 !hasFeatures
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -189,7 +189,7 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
 setLoading();

 await selectedSubscription
 .cancel({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .cancel({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(() => {
 onSubscriptionCancel?.();
 if (setIsOpen) {
Expand DownExpand Up@@ -381,7 +381,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
 openCheckout({
 planId: subscription.plan.id,
 planPeriod: subscription.planPeriod === 'month' ? 'annual' : 'month',
 subscriberType,
for: subscriberType,
 });
 },
 }
Expand All@@ -403,7 +403,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
 openCheckout({
 planId: subscription.plan.id,
 planPeriod: subscription.planPeriod,
 subscriberType,
for: subscriberType,
 });
 },
 }
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -197,7 +197,7 @@ export function SubscriptionsList({
 )}

 {(commerceSettings.billing.user.hasPaidPlans && subscriberType === 'user') ||
 (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'org') ? (
 (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'organization') ? (
 <ProfileSection.ArrowButton
 id='subscriptionsList'
 textLocalizationKey={subscriptionItems.length > 0 ? arrowButtonText : arrowButtonEmptyText}
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -92,7 +92,7 @@ export function ComponentContextProvider({
 );
 case 'PricingTable':
 return (
 <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'org' : 'user'}>
 <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'organization' : 'user'}>
 <PricingTableContext.Provider value={{ componentName, ...(props as PricingTableProps) }}>
 {children}
 </PricingTableContext.Provider>
Expand Down

19 changes: 0 additions & 19 deletions
packages/clerk-js/src/ui/contexts/components/Checkout.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,12 +5,6 @@ import { isAllowedRedirect } from '../../../utils';
import type { CheckoutCtx } from '../../types';
import { useOptions } from '../OptionsContext';

function invariant(cond: any, msg: string): asserts cond {
 if (!cond) {
 throw Error(msg);
 }
}

export const CheckoutContext = createContext<CheckoutCtx | null>(null);

export const useCheckoutContext = () => {
Expand All@@ -35,22 +29,9 @@ export const useCheckoutContext = () => {

 const { componentName, ...ctx } = context;

 const subscriber = () => {
 if (ctx.subscriberType === 'org' && clerk.organization) {
 invariant(clerk.organization, 'Clerk: subscriberType is "org" but no active organization was found');

 return clerk.organization;
 }

 invariant(clerk.user, 'Clerk: no active user found');

 return clerk.user;
 };

 return {
 ...ctx,
 componentName,
 newSubscriptionRedirectUrl,
 subscriber,
 };
};

12 changes: 6 additions & 6 deletions
packages/clerk-js/src/ui/contexts/components/Plans.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,7 +25,7 @@ import { useSubscriberTypeContext } from './SubscriberType';
export const usePaymentMethods = () => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_usePaymentMethods({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -35,7 +35,7 @@ export const usePaymentMethods = () => {
export const usePaymentAttempts = () => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_usePaymentAttempts({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -45,7 +45,7 @@ export const usePaymentAttempts = () => {
export const useStatements = (params?: { mode: 'cache' }) => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_useStatements({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -56,7 +56,7 @@ export const useStatements = (params?: { mode: 'cache' }) => {
export const useSubscription = () => {
 const subscriberType = useSubscriberTypeContext();
 const subscription = __experimental_useSubscription({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 keepPreviousData: true,
 });
 const subscriptionItems = useMemo(
Expand All@@ -74,7 +74,7 @@ export const usePlans = (params?: { mode: 'cache' }) => {
 const subscriberType = useSubscriberTypeContext();

 return __experimental_usePlans({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 50,
 keepPreviousData: true,
Expand DownExpand Up@@ -303,7 +303,7 @@ export const usePlansContext = () => {
 planId: plan.id,
 // if the plan doesn't support annual, use monthly
 planPeriod: planPeriod === 'annual' && plan.annualMonthlyAmount === 0 ? 'month' : planPeriod,
 subscriberType,
for: subscriberType,
 onSubscriptionComplete: () => {
 revalidateAll();
 },
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/contexts/components/SubscriberType.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
import type { CommercePayerType } from '@clerk/types';
import type { ForPayerType } from '@clerk/types';
import { createContext, useContext } from 'react';

const DEFAUlT = 'user';
export const SubscriberTypeContext = createContext<CommercePayerType | undefined>(DEFAUlT);
export const SubscriberTypeContext = createContext<ForPayerType | undefined>(DEFAUlT);

export const useSubscriberTypeContext = (): CommercePayerType => useContext(SubscriberTypeContext) || DEFAUlT;
export const useSubscriberTypeContext = (): ForPayerType => useContext(SubscriberTypeContext) || DEFAUlT;

export const useSubscriberTypeLocalizationRoot = () => {
 const subscriberType = useSubscriberTypeContext();
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -40,7 +40,7 @@ export function MountedCheckoutDrawer({
 <Checkout
 planId={checkoutDrawer.props.planId}
 planPeriod={checkoutDrawer.props.planPeriod}
subscriberType={checkoutDrawer.props.subscriberType}
for={checkoutDrawer.props.for}
 onSubscriptionComplete={checkoutDrawer.props.onSubscriptionComplete}
 portalRoot={checkoutDrawer.props.portalRoot}
 appearance={checkoutDrawer.props.appearance}
Expand Down

6 changes: 3 additions & 3 deletions
packages/react/src/components/CheckoutButton.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ export const CheckoutButton = withClerk(
 const {
 planId,
 planPeriod,
subscriberType,
for: _for,
 onSubscriptionComplete,
 newSubscriptionRedirectUrl,
 checkoutProps,
Expand All@@ -62,7 +62,7 @@ export const CheckoutButton = withClerk(
 throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
 }

 if (orgId === null && subscriberType === 'org') {
 if (orgId === null && _for === 'organization') {
 throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
 }

Expand All@@ -77,7 +77,7 @@ export const CheckoutButton = withClerk(
 return clerk.__internal_openCheckout({
 planId,
 planPeriod,
subscriberType,
for: _for,
 onSubscriptionComplete,
 newSubscriptionRedirectUrl,
 ...checkoutProps,
Expand Down

6 changes: 3 additions & 3 deletions
packages/react/src/components/SubscriptionDetailsButton.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -46,7 +46,7 @@ export const SubscriptionDetailsButton = withClerk(
 children,
 ...props
 }: WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>) => {
 const { for: forProp, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
 const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
 children = normalizeWithDefaultValue(children, 'Subscription details');
 const child = assertSingleChild(children)('SubscriptionDetailsButton');

Expand All@@ -56,7 +56,7 @@ export const SubscriptionDetailsButton = withClerk(
 throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
 }

 if (orgId === null && forProp === 'org') {
 if (orgId === null && _for === 'organization') {
 throw new Error(
 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
 );
Expand All@@ -68,7 +68,7 @@ export const SubscriptionDetailsButton = withClerk(
 }

 return clerk.__internal_openSubscriptionDetails({
 for: forProp,
 for: _for,
 onSubscriptionCancel,
 ...subscriptionDetailsProps,
 });
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(shared,clerk-js): Align for payer type across billing APIs#6423

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

from

Jul 29, 2025
 Merged


chore(shared,clerk-js): Align for payer type across billing APIs
#6423
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
4f125ce

chore(shared,clerk-js): Align `for` payer type across billing APIs


panteliselef Jul 29, 2025
01fc05c

update typedocs


panteliselef Jul 29, 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


9 changes: 9 additions & 0 deletions
.changeset/some-parents-begin.md

View file


Open in desktop

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

[Billing Beta]: Replace `org` for `organization` as payer type for billing APIs.

This applies for all billing APIs, except the resources classes that represent data from Frontend API.

3 changes: 2 additions & 1 deletion
.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -32,7 +32,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
 "types/commerce-initialized-payment-source-resource.mdx",
 "types/commerce-money-json.mdx",
 "types/commerce-money.mdx",
 "types/commerce-payer-type.mdx",
 "types/commerce-payer-resource-type.mdx",
 "types/commerce-payment-charge-type.mdx",
 "types/commerce-payment-json.mdx",
 "types/commerce-payment-resource.mdx",
Expand DownExpand Up@@ -66,6 +66,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
 "types/experimental_checkout-button-props.mdx",
 "types/experimental_plan-details-button-props.mdx",
 "types/experimental_subscription-details-button-props.mdx",
 "types/for-payer-type.mdx",
 "types/get-payment-attempts-params.mdx",
 "types/get-payment-sources-params.mdx",
 "types/get-plans-params.mdx",
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -34,7 +34,7 @@ import {
export class CommerceBilling implements CommerceBillingNamespace {
 getPlans = async (params?: GetPlansParams): Promise<ClerkPaginatedResponse<CommercePlanResource>> => {
 const { for: forParam, ...safeParams } = params || {};
 const searchParams = { ...safeParams, payer_type: forParam || 'user' };
 const searchParams = { ...safeParams, payer_type: forParam === 'organization' ? 'org' : 'user' };
 return await BaseResource._fetch({
 path: `/commerce/plans`,
 method: 'GET',
Expand Down

9 changes: 7 additions & 2 deletions
packages/clerk-js/src/core/resources/CommercePlan.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
import type { CommercePayerType, CommercePlanJSON, CommercePlanJSONSnapshot, CommercePlanResource } from '@clerk/types';
import type {
 CommercePayerResourceType,
 CommercePlanJSON,
 CommercePlanJSONSnapshot,
 CommercePlanResource,
} from '@clerk/types';

import { BaseResource, CommerceFeature } from './internal';

Expand All@@ -17,7 +22,7 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
 isDefault!: boolean;
 isRecurring!: boolean;
 hasBaseFee!: boolean;
 forPayerType!: CommercePayerType;
 forPayerType!: CommercePayerResourceType;
 publiclyVisible!: boolean;
 slug!: string;
 avatarUrl!: string;
Expand Down

5 changes: 3 additions & 2 deletions
packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -115,7 +115,7 @@ export const CheckoutForm = withCardStateProvider(() => {

const useCheckoutMutations = () => {
 const { organization } = useOrganization();
 const { subscriberType, onSubscriptionComplete } = useCheckoutContext();
 const { for: _for, onSubscriptionComplete } = useCheckoutContext();
 const { checkout } = useCheckout();
 const { id, confirm } = checkout;
 const card = useCardState();
Expand All@@ -130,7 +130,8 @@ const useCheckoutMutations = () => {

 const { data, error } = await confirm({
 ...params,
 ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
 // TODO(@COMMERCE): Come back to this, this should not be needed
 ...(_for === 'organization' ? { orgId: organization?.id } : {}),
 });

 if (error) {
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,18 +10,18 @@ const Initiator = () => {
 const { checkout } = useCheckout();

 useEffect(() => {
 checkout.start().catch(() => null);
void checkout.start();
 return checkout.clear;
 }, []);
 return null;
};

const Root = ({ children }: { children: React.ReactNode }) => {
 const { planId, planPeriod, subscriberType } = useCheckoutContext();
 const { planId, planPeriod, for: _for } = useCheckoutContext();

 return (
 <CheckoutProvider
 for={subscriberType === 'org' ? 'organization' : undefined}
 for={_for}
 planId={
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 planId!
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Checkout/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ export const Checkout = (props: __internal_CheckoutProps) => {
 return (
 <Flow.Root flow='checkout'>
 <Flow.Part>
 <SubscriberTypeContext.Provider value={props.subscriberType || 'user'}>
 <SubscriberTypeContext.Provider value={props.for || 'user'}>
 <CheckoutContext.Provider
 value={{
 componentName: 'Checkout',
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -83,7 +83,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {

export const OrganizationBillingPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <OrganizationBillingPageInternal />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPaymentAttemptPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { PaymentAttemptPage } from '../PaymentAttempts';

export const OrganizationPaymentAttemptPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <PaymentAttemptPage />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -53,7 +53,7 @@ const OrganizationPlansPageInternal = () => {

export const OrganizationPlansPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <OrganizationPlansPageInternal />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationStatementPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { StatementPage } from '../Statements';

export const OrganizationStatementPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <StatementPage />
 </SubscriberTypeContext.Provider>
 );
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@@ -25,7 +25,7 @@ const AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void
 const localizationRoot = useSubscriberTypeLocalizationRoot();

 const onAddPaymentSourceSuccess = async (context: { gateway: 'stripe'; paymentToken: string }) => {
 const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;
 await resource?.addPaymentSource(context);
 onSuccess();
 close();
Expand DownExpand Up@@ -72,7 +72,7 @@ const RemoveScreen = ({

 const removePaymentSource = async () => {
 await paymentSource
 .remove({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .remove({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(revalidate)
 .catch((error: Error) => {
 handleError(error, [], card.setError);
Expand DownExpand Up@@ -108,7 +108,7 @@ export const PaymentSources = withCardStateProvider(() => {
 const clerk = useClerk();
 const subscriberType = useSubscriberTypeContext();
 const localizationRoot = useSubscriberTypeLocalizationRoot();
 const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;

 const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods();

Expand DownExpand Up@@ -209,7 +209,7 @@ const PaymentSourceMenu = ({
 isDestructive: false,
 onClick: () => {
 paymentSource
 .makeDefault({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .makeDefault({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(revalidate)
 .catch((error: Error) => {
 handleError(error, [], card.setError);
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ const PlanDetailsInternal = ({
 const hasFeatures = features.length > 0;

 return (
 <SubscriberTypeContext.Provider value={plan.forPayerType}>
 <SubscriberTypeContext.Provider value={plan.forPayerType === 'org' ? 'organization' : 'user'}>
 <Drawer.Header
 sx={t =>
 !hasFeatures
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -189,7 +189,7 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
 setLoading();

 await selectedSubscription
 .cancel({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .cancel({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(() => {
 onSubscriptionCancel?.();
 if (setIsOpen) {
Expand DownExpand Up@@ -381,7 +381,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
 openCheckout({
 planId: subscription.plan.id,
 planPeriod: subscription.planPeriod === 'month' ? 'annual' : 'month',
 subscriberType,
for: subscriberType,
 });
 },
 }
Expand All@@ -403,7 +403,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
 openCheckout({
 planId: subscription.plan.id,
 planPeriod: subscription.planPeriod,
 subscriberType,
for: subscriberType,
 });
 },
 }
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -197,7 +197,7 @@ export function SubscriptionsList({
 )}

 {(commerceSettings.billing.user.hasPaidPlans && subscriberType === 'user') ||
 (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'org') ? (
 (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'organization') ? (
 <ProfileSection.ArrowButton
 id='subscriptionsList'
 textLocalizationKey={subscriptionItems.length > 0 ? arrowButtonText : arrowButtonEmptyText}
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -92,7 +92,7 @@ export function ComponentContextProvider({
 );
 case 'PricingTable':
 return (
 <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'org' : 'user'}>
 <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'organization' : 'user'}>
 <PricingTableContext.Provider value={{ componentName, ...(props as PricingTableProps) }}>
 {children}
 </PricingTableContext.Provider>
Expand Down

19 changes: 0 additions & 19 deletions
packages/clerk-js/src/ui/contexts/components/Checkout.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,12 +5,6 @@ import { isAllowedRedirect } from '../../../utils';
import type { CheckoutCtx } from '../../types';
import { useOptions } from '../OptionsContext';

function invariant(cond: any, msg: string): asserts cond {
 if (!cond) {
 throw Error(msg);
 }
}

export const CheckoutContext = createContext<CheckoutCtx | null>(null);

export const useCheckoutContext = () => {
Expand All@@ -35,22 +29,9 @@ export const useCheckoutContext = () => {

 const { componentName, ...ctx } = context;

 const subscriber = () => {
 if (ctx.subscriberType === 'org' && clerk.organization) {
 invariant(clerk.organization, 'Clerk: subscriberType is "org" but no active organization was found');

 return clerk.organization;
 }

 invariant(clerk.user, 'Clerk: no active user found');

 return clerk.user;
 };

 return {
 ...ctx,
 componentName,
 newSubscriptionRedirectUrl,
 subscriber,
 };
};

12 changes: 6 additions & 6 deletions
packages/clerk-js/src/ui/contexts/components/Plans.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,7 +25,7 @@ import { useSubscriberTypeContext } from './SubscriberType';
export const usePaymentMethods = () => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_usePaymentMethods({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -35,7 +35,7 @@ export const usePaymentMethods = () => {
export const usePaymentAttempts = () => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_usePaymentAttempts({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -45,7 +45,7 @@ export const usePaymentAttempts = () => {
export const useStatements = (params?: { mode: 'cache' }) => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_useStatements({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -56,7 +56,7 @@ export const useStatements = (params?: { mode: 'cache' }) => {
export const useSubscription = () => {
 const subscriberType = useSubscriberTypeContext();
 const subscription = __experimental_useSubscription({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 keepPreviousData: true,
 });
 const subscriptionItems = useMemo(
Expand All@@ -74,7 +74,7 @@ export const usePlans = (params?: { mode: 'cache' }) => {
 const subscriberType = useSubscriberTypeContext();

 return __experimental_usePlans({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 50,
 keepPreviousData: true,
Expand DownExpand Up@@ -303,7 +303,7 @@ export const usePlansContext = () => {
 planId: plan.id,
 // if the plan doesn't support annual, use monthly
 planPeriod: planPeriod === 'annual' && plan.annualMonthlyAmount === 0 ? 'month' : planPeriod,
 subscriberType,
for: subscriberType,
 onSubscriptionComplete: () => {
 revalidateAll();
 },
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/contexts/components/SubscriberType.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
import type { CommercePayerType } from '@clerk/types';
import type { ForPayerType } from '@clerk/types';
import { createContext, useContext } from 'react';

const DEFAUlT = 'user';
export const SubscriberTypeContext = createContext<CommercePayerType | undefined>(DEFAUlT);
export const SubscriberTypeContext = createContext<ForPayerType | undefined>(DEFAUlT);

export const useSubscriberTypeContext = (): CommercePayerType => useContext(SubscriberTypeContext) || DEFAUlT;
export const useSubscriberTypeContext = (): ForPayerType => useContext(SubscriberTypeContext) || DEFAUlT;

export const useSubscriberTypeLocalizationRoot = () => {
 const subscriberType = useSubscriberTypeContext();
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -40,7 +40,7 @@ export function MountedCheckoutDrawer({
 <Checkout
 planId={checkoutDrawer.props.planId}
 planPeriod={checkoutDrawer.props.planPeriod}
subscriberType={checkoutDrawer.props.subscriberType}
for={checkoutDrawer.props.for}
 onSubscriptionComplete={checkoutDrawer.props.onSubscriptionComplete}
 portalRoot={checkoutDrawer.props.portalRoot}
 appearance={checkoutDrawer.props.appearance}
Expand Down

6 changes: 3 additions & 3 deletions
packages/react/src/components/CheckoutButton.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ export const CheckoutButton = withClerk(
 const {
 planId,
 planPeriod,
subscriberType,
for: _for,
 onSubscriptionComplete,
 newSubscriptionRedirectUrl,
 checkoutProps,
Expand All@@ -62,7 +62,7 @@ export const CheckoutButton = withClerk(
 throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
 }

 if (orgId === null && subscriberType === 'org') {
 if (orgId === null && _for === 'organization') {
 throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
 }

Expand All@@ -77,7 +77,7 @@ export const CheckoutButton = withClerk(
 return clerk.__internal_openCheckout({
 planId,
 planPeriod,
subscriberType,
for: _for,
 onSubscriptionComplete,
 newSubscriptionRedirectUrl,
 ...checkoutProps,
Expand Down

6 changes: 3 additions & 3 deletions
packages/react/src/components/SubscriptionDetailsButton.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -46,7 +46,7 @@ export const SubscriptionDetailsButton = withClerk(
 children,
 ...props
 }: WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>) => {
 const { for: forProp, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
 const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
 children = normalizeWithDefaultValue(children, 'Subscription details');
 const child = assertSingleChild(children)('SubscriptionDetailsButton');

Expand All@@ -56,7 +56,7 @@ export const SubscriptionDetailsButton = withClerk(
 throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
 }

 if (orgId === null && forProp === 'org') {
 if (orgId === null && _for === 'organization') {
 throw new Error(
 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
 );
Expand All@@ -68,7 +68,7 @@ export const SubscriptionDetailsButton = withClerk(
 }

 return clerk.__internal_openSubscriptionDetails({
 for: forProp,
 for: _for,
 onSubscriptionCancel,
 ...subscriptionDetailsProps,
 });
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(shared,clerk-js): Align for payer type across billing APIs#6423

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

from

Jul 29, 2025
 Merged


chore(shared,clerk-js): Align for payer type across billing APIs
#6423
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
4f125ce

chore(shared,clerk-js): Align `for` payer type across billing APIs


panteliselef Jul 29, 2025
01fc05c

update typedocs


panteliselef Jul 29, 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


9 changes: 9 additions & 0 deletions
.changeset/some-parents-begin.md

View file


Open in desktop

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

[Billing Beta]: Replace `org` for `organization` as payer type for billing APIs.

This applies for all billing APIs, except the resources classes that represent data from Frontend API.

3 changes: 2 additions & 1 deletion
.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -32,7 +32,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
 "types/commerce-initialized-payment-source-resource.mdx",
 "types/commerce-money-json.mdx",
 "types/commerce-money.mdx",
 "types/commerce-payer-type.mdx",
 "types/commerce-payer-resource-type.mdx",
 "types/commerce-payment-charge-type.mdx",
 "types/commerce-payment-json.mdx",
 "types/commerce-payment-resource.mdx",
Expand DownExpand Up@@ -66,6 +66,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
 "types/experimental_checkout-button-props.mdx",
 "types/experimental_plan-details-button-props.mdx",
 "types/experimental_subscription-details-button-props.mdx",
 "types/for-payer-type.mdx",
 "types/get-payment-attempts-params.mdx",
 "types/get-payment-sources-params.mdx",
 "types/get-plans-params.mdx",
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -34,7 +34,7 @@ import {
export class CommerceBilling implements CommerceBillingNamespace {
 getPlans = async (params?: GetPlansParams): Promise<ClerkPaginatedResponse<CommercePlanResource>> => {
 const { for: forParam, ...safeParams } = params || {};
 const searchParams = { ...safeParams, payer_type: forParam || 'user' };
 const searchParams = { ...safeParams, payer_type: forParam === 'organization' ? 'org' : 'user' };
 return await BaseResource._fetch({
 path: `/commerce/plans`,
 method: 'GET',
Expand Down

9 changes: 7 additions & 2 deletions
packages/clerk-js/src/core/resources/CommercePlan.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
import type { CommercePayerType, CommercePlanJSON, CommercePlanJSONSnapshot, CommercePlanResource } from '@clerk/types';
import type {
 CommercePayerResourceType,
 CommercePlanJSON,
 CommercePlanJSONSnapshot,
 CommercePlanResource,
} from '@clerk/types';

import { BaseResource, CommerceFeature } from './internal';

Expand All@@ -17,7 +22,7 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
 isDefault!: boolean;
 isRecurring!: boolean;
 hasBaseFee!: boolean;
 forPayerType!: CommercePayerType;
 forPayerType!: CommercePayerResourceType;
 publiclyVisible!: boolean;
 slug!: string;
 avatarUrl!: string;
Expand Down

5 changes: 3 additions & 2 deletions
packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -115,7 +115,7 @@ export const CheckoutForm = withCardStateProvider(() => {

const useCheckoutMutations = () => {
 const { organization } = useOrganization();
 const { subscriberType, onSubscriptionComplete } = useCheckoutContext();
 const { for: _for, onSubscriptionComplete } = useCheckoutContext();
 const { checkout } = useCheckout();
 const { id, confirm } = checkout;
 const card = useCardState();
Expand All@@ -130,7 +130,8 @@ const useCheckoutMutations = () => {

 const { data, error } = await confirm({
 ...params,
 ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
 // TODO(@COMMERCE): Come back to this, this should not be needed
 ...(_for === 'organization' ? { orgId: organization?.id } : {}),
 });

 if (error) {
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,18 +10,18 @@ const Initiator = () => {
 const { checkout } = useCheckout();

 useEffect(() => {
 checkout.start().catch(() => null);
void checkout.start();
 return checkout.clear;
 }, []);
 return null;
};

const Root = ({ children }: { children: React.ReactNode }) => {
 const { planId, planPeriod, subscriberType } = useCheckoutContext();
 const { planId, planPeriod, for: _for } = useCheckoutContext();

 return (
 <CheckoutProvider
 for={subscriberType === 'org' ? 'organization' : undefined}
 for={_for}
 planId={
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 planId!
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Checkout/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ export const Checkout = (props: __internal_CheckoutProps) => {
 return (
 <Flow.Root flow='checkout'>
 <Flow.Part>
 <SubscriberTypeContext.Provider value={props.subscriberType || 'user'}>
 <SubscriberTypeContext.Provider value={props.for || 'user'}>
 <CheckoutContext.Provider
 value={{
 componentName: 'Checkout',
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -83,7 +83,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {

export const OrganizationBillingPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <OrganizationBillingPageInternal />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPaymentAttemptPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { PaymentAttemptPage } from '../PaymentAttempts';

export const OrganizationPaymentAttemptPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <PaymentAttemptPage />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -53,7 +53,7 @@ const OrganizationPlansPageInternal = () => {

export const OrganizationPlansPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <OrganizationPlansPageInternal />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationStatementPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { StatementPage } from '../Statements';

export const OrganizationStatementPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <StatementPage />
 </SubscriberTypeContext.Provider>
 );
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@@ -25,7 +25,7 @@ const AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void
 const localizationRoot = useSubscriberTypeLocalizationRoot();

 const onAddPaymentSourceSuccess = async (context: { gateway: 'stripe'; paymentToken: string }) => {
 const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;
 await resource?.addPaymentSource(context);
 onSuccess();
 close();
Expand DownExpand Up@@ -72,7 +72,7 @@ const RemoveScreen = ({

 const removePaymentSource = async () => {
 await paymentSource
 .remove({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .remove({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(revalidate)
 .catch((error: Error) => {
 handleError(error, [], card.setError);
Expand DownExpand Up@@ -108,7 +108,7 @@ export const PaymentSources = withCardStateProvider(() => {
 const clerk = useClerk();
 const subscriberType = useSubscriberTypeContext();
 const localizationRoot = useSubscriberTypeLocalizationRoot();
 const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;

 const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods();

Expand DownExpand Up@@ -209,7 +209,7 @@ const PaymentSourceMenu = ({
 isDestructive: false,
 onClick: () => {
 paymentSource
 .makeDefault({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .makeDefault({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(revalidate)
 .catch((error: Error) => {
 handleError(error, [], card.setError);
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ const PlanDetailsInternal = ({
 const hasFeatures = features.length > 0;

 return (
 <SubscriberTypeContext.Provider value={plan.forPayerType}>
 <SubscriberTypeContext.Provider value={plan.forPayerType === 'org' ? 'organization' : 'user'}>
 <Drawer.Header
 sx={t =>
 !hasFeatures
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -189,7 +189,7 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
 setLoading();

 await selectedSubscription
 .cancel({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .cancel({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(() => {
 onSubscriptionCancel?.();
 if (setIsOpen) {
Expand DownExpand Up@@ -381,7 +381,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
 openCheckout({
 planId: subscription.plan.id,
 planPeriod: subscription.planPeriod === 'month' ? 'annual' : 'month',
 subscriberType,
for: subscriberType,
 });
 },
 }
Expand All@@ -403,7 +403,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
 openCheckout({
 planId: subscription.plan.id,
 planPeriod: subscription.planPeriod,
 subscriberType,
for: subscriberType,
 });
 },
 }
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -197,7 +197,7 @@ export function SubscriptionsList({
 )}

 {(commerceSettings.billing.user.hasPaidPlans && subscriberType === 'user') ||
 (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'org') ? (
 (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'organization') ? (
 <ProfileSection.ArrowButton
 id='subscriptionsList'
 textLocalizationKey={subscriptionItems.length > 0 ? arrowButtonText : arrowButtonEmptyText}
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -92,7 +92,7 @@ export function ComponentContextProvider({
 );
 case 'PricingTable':
 return (
 <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'org' : 'user'}>
 <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'organization' : 'user'}>
 <PricingTableContext.Provider value={{ componentName, ...(props as PricingTableProps) }}>
 {children}
 </PricingTableContext.Provider>
Expand Down

19 changes: 0 additions & 19 deletions
packages/clerk-js/src/ui/contexts/components/Checkout.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,12 +5,6 @@ import { isAllowedRedirect } from '../../../utils';
import type { CheckoutCtx } from '../../types';
import { useOptions } from '../OptionsContext';

function invariant(cond: any, msg: string): asserts cond {
 if (!cond) {
 throw Error(msg);
 }
}

export const CheckoutContext = createContext<CheckoutCtx | null>(null);

export const useCheckoutContext = () => {
Expand All@@ -35,22 +29,9 @@ export const useCheckoutContext = () => {

 const { componentName, ...ctx } = context;

 const subscriber = () => {
 if (ctx.subscriberType === 'org' && clerk.organization) {
 invariant(clerk.organization, 'Clerk: subscriberType is "org" but no active organization was found');

 return clerk.organization;
 }

 invariant(clerk.user, 'Clerk: no active user found');

 return clerk.user;
 };

 return {
 ...ctx,
 componentName,
 newSubscriptionRedirectUrl,
 subscriber,
 };
};

12 changes: 6 additions & 6 deletions
packages/clerk-js/src/ui/contexts/components/Plans.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,7 +25,7 @@ import { useSubscriberTypeContext } from './SubscriberType';
export const usePaymentMethods = () => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_usePaymentMethods({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -35,7 +35,7 @@ export const usePaymentMethods = () => {
export const usePaymentAttempts = () => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_usePaymentAttempts({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -45,7 +45,7 @@ export const usePaymentAttempts = () => {
export const useStatements = (params?: { mode: 'cache' }) => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_useStatements({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -56,7 +56,7 @@ export const useStatements = (params?: { mode: 'cache' }) => {
export const useSubscription = () => {
 const subscriberType = useSubscriberTypeContext();
 const subscription = __experimental_useSubscription({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 keepPreviousData: true,
 });
 const subscriptionItems = useMemo(
Expand All@@ -74,7 +74,7 @@ export const usePlans = (params?: { mode: 'cache' }) => {
 const subscriberType = useSubscriberTypeContext();

 return __experimental_usePlans({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 50,
 keepPreviousData: true,
Expand DownExpand Up@@ -303,7 +303,7 @@ export const usePlansContext = () => {
 planId: plan.id,
 // if the plan doesn't support annual, use monthly
 planPeriod: planPeriod === 'annual' && plan.annualMonthlyAmount === 0 ? 'month' : planPeriod,
 subscriberType,
for: subscriberType,
 onSubscriptionComplete: () => {
 revalidateAll();
 },
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/contexts/components/SubscriberType.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
import type { CommercePayerType } from '@clerk/types';
import type { ForPayerType } from '@clerk/types';
import { createContext, useContext } from 'react';

const DEFAUlT = 'user';
export const SubscriberTypeContext = createContext<CommercePayerType | undefined>(DEFAUlT);
export const SubscriberTypeContext = createContext<ForPayerType | undefined>(DEFAUlT);

export const useSubscriberTypeContext = (): CommercePayerType => useContext(SubscriberTypeContext) || DEFAUlT;
export const useSubscriberTypeContext = (): ForPayerType => useContext(SubscriberTypeContext) || DEFAUlT;

export const useSubscriberTypeLocalizationRoot = () => {
 const subscriberType = useSubscriberTypeContext();
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -40,7 +40,7 @@ export function MountedCheckoutDrawer({
 <Checkout
 planId={checkoutDrawer.props.planId}
 planPeriod={checkoutDrawer.props.planPeriod}
subscriberType={checkoutDrawer.props.subscriberType}
for={checkoutDrawer.props.for}
 onSubscriptionComplete={checkoutDrawer.props.onSubscriptionComplete}
 portalRoot={checkoutDrawer.props.portalRoot}
 appearance={checkoutDrawer.props.appearance}
Expand Down

6 changes: 3 additions & 3 deletions
packages/react/src/components/CheckoutButton.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ export const CheckoutButton = withClerk(
 const {
 planId,
 planPeriod,
subscriberType,
for: _for,
 onSubscriptionComplete,
 newSubscriptionRedirectUrl,
 checkoutProps,
Expand All@@ -62,7 +62,7 @@ export const CheckoutButton = withClerk(
 throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
 }

 if (orgId === null && subscriberType === 'org') {
 if (orgId === null && _for === 'organization') {
 throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
 }

Expand All@@ -77,7 +77,7 @@ export const CheckoutButton = withClerk(
 return clerk.__internal_openCheckout({
 planId,
 planPeriod,
subscriberType,
for: _for,
 onSubscriptionComplete,
 newSubscriptionRedirectUrl,
 ...checkoutProps,
Expand Down

6 changes: 3 additions & 3 deletions
packages/react/src/components/SubscriptionDetailsButton.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -46,7 +46,7 @@ export const SubscriptionDetailsButton = withClerk(
 children,
 ...props
 }: WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>) => {
 const { for: forProp, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
 const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
 children = normalizeWithDefaultValue(children, 'Subscription details');
 const child = assertSingleChild(children)('SubscriptionDetailsButton');

Expand All@@ -56,7 +56,7 @@ export const SubscriptionDetailsButton = withClerk(
 throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
 }

 if (orgId === null && forProp === 'org') {
 if (orgId === null && _for === 'organization') {
 throw new Error(
 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
 );
Expand All@@ -68,7 +68,7 @@ export const SubscriptionDetailsButton = withClerk(
 }

 return clerk.__internal_openSubscriptionDetails({
 for: forProp,
 for: _for,
 onSubscriptionCancel,
 ...subscriptionDetailsProps,
 });
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(shared,clerk-js): Align for payer type across billing APIs#6423

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

from

Jul 29, 2025
 Merged


chore(shared,clerk-js): Align for payer type across billing APIs
#6423
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
4f125ce

chore(shared,clerk-js): Align `for` payer type across billing APIs


panteliselef Jul 29, 2025
01fc05c

update typedocs


panteliselef Jul 29, 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


9 changes: 9 additions & 0 deletions
.changeset/some-parents-begin.md

View file


Open in desktop

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

[Billing Beta]: Replace `org` for `organization` as payer type for billing APIs.

This applies for all billing APIs, except the resources classes that represent data from Frontend API.

3 changes: 2 additions & 1 deletion
.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -32,7 +32,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
 "types/commerce-initialized-payment-source-resource.mdx",
 "types/commerce-money-json.mdx",
 "types/commerce-money.mdx",
 "types/commerce-payer-type.mdx",
 "types/commerce-payer-resource-type.mdx",
 "types/commerce-payment-charge-type.mdx",
 "types/commerce-payment-json.mdx",
 "types/commerce-payment-resource.mdx",
Expand DownExpand Up@@ -66,6 +66,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
 "types/experimental_checkout-button-props.mdx",
 "types/experimental_plan-details-button-props.mdx",
 "types/experimental_subscription-details-button-props.mdx",
 "types/for-payer-type.mdx",
 "types/get-payment-attempts-params.mdx",
 "types/get-payment-sources-params.mdx",
 "types/get-plans-params.mdx",
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -34,7 +34,7 @@ import {
export class CommerceBilling implements CommerceBillingNamespace {
 getPlans = async (params?: GetPlansParams): Promise<ClerkPaginatedResponse<CommercePlanResource>> => {
 const { for: forParam, ...safeParams } = params || {};
 const searchParams = { ...safeParams, payer_type: forParam || 'user' };
 const searchParams = { ...safeParams, payer_type: forParam === 'organization' ? 'org' : 'user' };
 return await BaseResource._fetch({
 path: `/commerce/plans`,
 method: 'GET',
Expand Down

9 changes: 7 additions & 2 deletions
packages/clerk-js/src/core/resources/CommercePlan.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
import type { CommercePayerType, CommercePlanJSON, CommercePlanJSONSnapshot, CommercePlanResource } from '@clerk/types';
import type {
 CommercePayerResourceType,
 CommercePlanJSON,
 CommercePlanJSONSnapshot,
 CommercePlanResource,
} from '@clerk/types';

import { BaseResource, CommerceFeature } from './internal';

Expand All@@ -17,7 +22,7 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
 isDefault!: boolean;
 isRecurring!: boolean;
 hasBaseFee!: boolean;
 forPayerType!: CommercePayerType;
 forPayerType!: CommercePayerResourceType;
 publiclyVisible!: boolean;
 slug!: string;
 avatarUrl!: string;
Expand Down

5 changes: 3 additions & 2 deletions
packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -115,7 +115,7 @@ export const CheckoutForm = withCardStateProvider(() => {

const useCheckoutMutations = () => {
 const { organization } = useOrganization();
 const { subscriberType, onSubscriptionComplete } = useCheckoutContext();
 const { for: _for, onSubscriptionComplete } = useCheckoutContext();
 const { checkout } = useCheckout();
 const { id, confirm } = checkout;
 const card = useCardState();
Expand All@@ -130,7 +130,8 @@ const useCheckoutMutations = () => {

 const { data, error } = await confirm({
 ...params,
 ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
 // TODO(@COMMERCE): Come back to this, this should not be needed
 ...(_for === 'organization' ? { orgId: organization?.id } : {}),
 });

 if (error) {
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,18 +10,18 @@ const Initiator = () => {
 const { checkout } = useCheckout();

 useEffect(() => {
 checkout.start().catch(() => null);
void checkout.start();
 return checkout.clear;
 }, []);
 return null;
};

const Root = ({ children }: { children: React.ReactNode }) => {
 const { planId, planPeriod, subscriberType } = useCheckoutContext();
 const { planId, planPeriod, for: _for } = useCheckoutContext();

 return (
 <CheckoutProvider
 for={subscriberType === 'org' ? 'organization' : undefined}
 for={_for}
 planId={
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 planId!
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Checkout/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ export const Checkout = (props: __internal_CheckoutProps) => {
 return (
 <Flow.Root flow='checkout'>
 <Flow.Part>
 <SubscriberTypeContext.Provider value={props.subscriberType || 'user'}>
 <SubscriberTypeContext.Provider value={props.for || 'user'}>
 <CheckoutContext.Provider
 value={{
 componentName: 'Checkout',
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -83,7 +83,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {

export const OrganizationBillingPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <OrganizationBillingPageInternal />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPaymentAttemptPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { PaymentAttemptPage } from '../PaymentAttempts';

export const OrganizationPaymentAttemptPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <PaymentAttemptPage />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -53,7 +53,7 @@ const OrganizationPlansPageInternal = () => {

export const OrganizationPlansPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <OrganizationPlansPageInternal />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationStatementPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { StatementPage } from '../Statements';

export const OrganizationStatementPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <StatementPage />
 </SubscriberTypeContext.Provider>
 );
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@@ -25,7 +25,7 @@ const AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void
 const localizationRoot = useSubscriberTypeLocalizationRoot();

 const onAddPaymentSourceSuccess = async (context: { gateway: 'stripe'; paymentToken: string }) => {
 const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;
 await resource?.addPaymentSource(context);
 onSuccess();
 close();
Expand DownExpand Up@@ -72,7 +72,7 @@ const RemoveScreen = ({

 const removePaymentSource = async () => {
 await paymentSource
 .remove({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .remove({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(revalidate)
 .catch((error: Error) => {
 handleError(error, [], card.setError);
Expand DownExpand Up@@ -108,7 +108,7 @@ export const PaymentSources = withCardStateProvider(() => {
 const clerk = useClerk();
 const subscriberType = useSubscriberTypeContext();
 const localizationRoot = useSubscriberTypeLocalizationRoot();
 const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;

 const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods();

Expand DownExpand Up@@ -209,7 +209,7 @@ const PaymentSourceMenu = ({
 isDestructive: false,
 onClick: () => {
 paymentSource
 .makeDefault({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .makeDefault({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(revalidate)
 .catch((error: Error) => {
 handleError(error, [], card.setError);
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ const PlanDetailsInternal = ({
 const hasFeatures = features.length > 0;

 return (
 <SubscriberTypeContext.Provider value={plan.forPayerType}>
 <SubscriberTypeContext.Provider value={plan.forPayerType === 'org' ? 'organization' : 'user'}>
 <Drawer.Header
 sx={t =>
 !hasFeatures
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -189,7 +189,7 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
 setLoading();

 await selectedSubscription
 .cancel({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .cancel({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(() => {
 onSubscriptionCancel?.();
 if (setIsOpen) {
Expand DownExpand Up@@ -381,7 +381,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
 openCheckout({
 planId: subscription.plan.id,
 planPeriod: subscription.planPeriod === 'month' ? 'annual' : 'month',
 subscriberType,
for: subscriberType,
 });
 },
 }
Expand All@@ -403,7 +403,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
 openCheckout({
 planId: subscription.plan.id,
 planPeriod: subscription.planPeriod,
 subscriberType,
for: subscriberType,
 });
 },
 }
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -197,7 +197,7 @@ export function SubscriptionsList({
 )}

 {(commerceSettings.billing.user.hasPaidPlans && subscriberType === 'user') ||
 (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'org') ? (
 (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'organization') ? (
 <ProfileSection.ArrowButton
 id='subscriptionsList'
 textLocalizationKey={subscriptionItems.length > 0 ? arrowButtonText : arrowButtonEmptyText}
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -92,7 +92,7 @@ export function ComponentContextProvider({
 );
 case 'PricingTable':
 return (
 <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'org' : 'user'}>
 <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'organization' : 'user'}>
 <PricingTableContext.Provider value={{ componentName, ...(props as PricingTableProps) }}>
 {children}
 </PricingTableContext.Provider>
Expand Down

19 changes: 0 additions & 19 deletions
packages/clerk-js/src/ui/contexts/components/Checkout.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,12 +5,6 @@ import { isAllowedRedirect } from '../../../utils';
import type { CheckoutCtx } from '../../types';
import { useOptions } from '../OptionsContext';

function invariant(cond: any, msg: string): asserts cond {
 if (!cond) {
 throw Error(msg);
 }
}

export const CheckoutContext = createContext<CheckoutCtx | null>(null);

export const useCheckoutContext = () => {
Expand All@@ -35,22 +29,9 @@ export const useCheckoutContext = () => {

 const { componentName, ...ctx } = context;

 const subscriber = () => {
 if (ctx.subscriberType === 'org' && clerk.organization) {
 invariant(clerk.organization, 'Clerk: subscriberType is "org" but no active organization was found');

 return clerk.organization;
 }

 invariant(clerk.user, 'Clerk: no active user found');

 return clerk.user;
 };

 return {
 ...ctx,
 componentName,
 newSubscriptionRedirectUrl,
 subscriber,
 };
};

12 changes: 6 additions & 6 deletions
packages/clerk-js/src/ui/contexts/components/Plans.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,7 +25,7 @@ import { useSubscriberTypeContext } from './SubscriberType';
export const usePaymentMethods = () => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_usePaymentMethods({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -35,7 +35,7 @@ export const usePaymentMethods = () => {
export const usePaymentAttempts = () => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_usePaymentAttempts({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -45,7 +45,7 @@ export const usePaymentAttempts = () => {
export const useStatements = (params?: { mode: 'cache' }) => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_useStatements({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -56,7 +56,7 @@ export const useStatements = (params?: { mode: 'cache' }) => {
export const useSubscription = () => {
 const subscriberType = useSubscriberTypeContext();
 const subscription = __experimental_useSubscription({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 keepPreviousData: true,
 });
 const subscriptionItems = useMemo(
Expand All@@ -74,7 +74,7 @@ export const usePlans = (params?: { mode: 'cache' }) => {
 const subscriberType = useSubscriberTypeContext();

 return __experimental_usePlans({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 50,
 keepPreviousData: true,
Expand DownExpand Up@@ -303,7 +303,7 @@ export const usePlansContext = () => {
 planId: plan.id,
 // if the plan doesn't support annual, use monthly
 planPeriod: planPeriod === 'annual' && plan.annualMonthlyAmount === 0 ? 'month' : planPeriod,
 subscriberType,
for: subscriberType,
 onSubscriptionComplete: () => {
 revalidateAll();
 },
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/contexts/components/SubscriberType.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
import type { CommercePayerType } from '@clerk/types';
import type { ForPayerType } from '@clerk/types';
import { createContext, useContext } from 'react';

const DEFAUlT = 'user';
export const SubscriberTypeContext = createContext<CommercePayerType | undefined>(DEFAUlT);
export const SubscriberTypeContext = createContext<ForPayerType | undefined>(DEFAUlT);

export const useSubscriberTypeContext = (): CommercePayerType => useContext(SubscriberTypeContext) || DEFAUlT;
export const useSubscriberTypeContext = (): ForPayerType => useContext(SubscriberTypeContext) || DEFAUlT;

export const useSubscriberTypeLocalizationRoot = () => {
 const subscriberType = useSubscriberTypeContext();
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -40,7 +40,7 @@ export function MountedCheckoutDrawer({
 <Checkout
 planId={checkoutDrawer.props.planId}
 planPeriod={checkoutDrawer.props.planPeriod}
subscriberType={checkoutDrawer.props.subscriberType}
for={checkoutDrawer.props.for}
 onSubscriptionComplete={checkoutDrawer.props.onSubscriptionComplete}
 portalRoot={checkoutDrawer.props.portalRoot}
 appearance={checkoutDrawer.props.appearance}
Expand Down

6 changes: 3 additions & 3 deletions
packages/react/src/components/CheckoutButton.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ export const CheckoutButton = withClerk(
 const {
 planId,
 planPeriod,
subscriberType,
for: _for,
 onSubscriptionComplete,
 newSubscriptionRedirectUrl,
 checkoutProps,
Expand All@@ -62,7 +62,7 @@ export const CheckoutButton = withClerk(
 throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
 }

 if (orgId === null && subscriberType === 'org') {
 if (orgId === null && _for === 'organization') {
 throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
 }

Expand All@@ -77,7 +77,7 @@ export const CheckoutButton = withClerk(
 return clerk.__internal_openCheckout({
 planId,
 planPeriod,
subscriberType,
for: _for,
 onSubscriptionComplete,
 newSubscriptionRedirectUrl,
 ...checkoutProps,
Expand Down

6 changes: 3 additions & 3 deletions
packages/react/src/components/SubscriptionDetailsButton.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -46,7 +46,7 @@ export const SubscriptionDetailsButton = withClerk(
 children,
 ...props
 }: WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>) => {
 const { for: forProp, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
 const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
 children = normalizeWithDefaultValue(children, 'Subscription details');
 const child = assertSingleChild(children)('SubscriptionDetailsButton');

Expand All@@ -56,7 +56,7 @@ export const SubscriptionDetailsButton = withClerk(
 throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
 }

 if (orgId === null && forProp === 'org') {
 if (orgId === null && _for === 'organization') {
 throw new Error(
 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
 );
Expand All@@ -68,7 +68,7 @@ export const SubscriptionDetailsButton = withClerk(
 }

 return clerk.__internal_openSubscriptionDetails({
 for: forProp,
 for: _for,
 onSubscriptionCancel,
 ...subscriptionDetailsProps,
 });
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(shared,clerk-js): Align for payer type across billing APIs#6423

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

from

Jul 29, 2025
 Merged


chore(shared,clerk-js): Align for payer type across billing APIs
#6423
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
4f125ce

chore(shared,clerk-js): Align `for` payer type across billing APIs


panteliselef Jul 29, 2025
01fc05c

update typedocs


panteliselef Jul 29, 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


9 changes: 9 additions & 0 deletions
.changeset/some-parents-begin.md

View file


Open in desktop

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

[Billing Beta]: Replace `org` for `organization` as payer type for billing APIs.

This applies for all billing APIs, except the resources classes that represent data from Frontend API.

3 changes: 2 additions & 1 deletion
.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -32,7 +32,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
 "types/commerce-initialized-payment-source-resource.mdx",
 "types/commerce-money-json.mdx",
 "types/commerce-money.mdx",
 "types/commerce-payer-type.mdx",
 "types/commerce-payer-resource-type.mdx",
 "types/commerce-payment-charge-type.mdx",
 "types/commerce-payment-json.mdx",
 "types/commerce-payment-resource.mdx",
Expand DownExpand Up@@ -66,6 +66,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
 "types/experimental_checkout-button-props.mdx",
 "types/experimental_plan-details-button-props.mdx",
 "types/experimental_subscription-details-button-props.mdx",
 "types/for-payer-type.mdx",
 "types/get-payment-attempts-params.mdx",
 "types/get-payment-sources-params.mdx",
 "types/get-plans-params.mdx",
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -34,7 +34,7 @@ import {
export class CommerceBilling implements CommerceBillingNamespace {
 getPlans = async (params?: GetPlansParams): Promise<ClerkPaginatedResponse<CommercePlanResource>> => {
 const { for: forParam, ...safeParams } = params || {};
 const searchParams = { ...safeParams, payer_type: forParam || 'user' };
 const searchParams = { ...safeParams, payer_type: forParam === 'organization' ? 'org' : 'user' };
 return await BaseResource._fetch({
 path: `/commerce/plans`,
 method: 'GET',
Expand Down

9 changes: 7 additions & 2 deletions
packages/clerk-js/src/core/resources/CommercePlan.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
import type { CommercePayerType, CommercePlanJSON, CommercePlanJSONSnapshot, CommercePlanResource } from '@clerk/types';
import type {
 CommercePayerResourceType,
 CommercePlanJSON,
 CommercePlanJSONSnapshot,
 CommercePlanResource,
} from '@clerk/types';

import { BaseResource, CommerceFeature } from './internal';

Expand All@@ -17,7 +22,7 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
 isDefault!: boolean;
 isRecurring!: boolean;
 hasBaseFee!: boolean;
 forPayerType!: CommercePayerType;
 forPayerType!: CommercePayerResourceType;
 publiclyVisible!: boolean;
 slug!: string;
 avatarUrl!: string;
Expand Down

5 changes: 3 additions & 2 deletions
packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -115,7 +115,7 @@ export const CheckoutForm = withCardStateProvider(() => {

const useCheckoutMutations = () => {
 const { organization } = useOrganization();
 const { subscriberType, onSubscriptionComplete } = useCheckoutContext();
 const { for: _for, onSubscriptionComplete } = useCheckoutContext();
 const { checkout } = useCheckout();
 const { id, confirm } = checkout;
 const card = useCardState();
Expand All@@ -130,7 +130,8 @@ const useCheckoutMutations = () => {

 const { data, error } = await confirm({
 ...params,
 ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
 // TODO(@COMMERCE): Come back to this, this should not be needed
 ...(_for === 'organization' ? { orgId: organization?.id } : {}),
 });

 if (error) {
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,18 +10,18 @@ const Initiator = () => {
 const { checkout } = useCheckout();

 useEffect(() => {
 checkout.start().catch(() => null);
void checkout.start();
 return checkout.clear;
 }, []);
 return null;
};

const Root = ({ children }: { children: React.ReactNode }) => {
 const { planId, planPeriod, subscriberType } = useCheckoutContext();
 const { planId, planPeriod, for: _for } = useCheckoutContext();

 return (
 <CheckoutProvider
 for={subscriberType === 'org' ? 'organization' : undefined}
 for={_for}
 planId={
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 planId!
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Checkout/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ export const Checkout = (props: __internal_CheckoutProps) => {
 return (
 <Flow.Root flow='checkout'>
 <Flow.Part>
 <SubscriberTypeContext.Provider value={props.subscriberType || 'user'}>
 <SubscriberTypeContext.Provider value={props.for || 'user'}>
 <CheckoutContext.Provider
 value={{
 componentName: 'Checkout',
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -83,7 +83,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {

export const OrganizationBillingPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <OrganizationBillingPageInternal />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPaymentAttemptPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { PaymentAttemptPage } from '../PaymentAttempts';

export const OrganizationPaymentAttemptPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <PaymentAttemptPage />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -53,7 +53,7 @@ const OrganizationPlansPageInternal = () => {

export const OrganizationPlansPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <OrganizationPlansPageInternal />
 </SubscriberTypeContext.Provider>
 );
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationStatementPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { StatementPage } from '../Statements';

export const OrganizationStatementPage = () => {
 return (
 <SubscriberTypeContext.Provider value='org'>
 <SubscriberTypeContext.Provider value='organization'>
 <StatementPage />
 </SubscriberTypeContext.Provider>
 );
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@@ -25,7 +25,7 @@ const AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void
 const localizationRoot = useSubscriberTypeLocalizationRoot();

 const onAddPaymentSourceSuccess = async (context: { gateway: 'stripe'; paymentToken: string }) => {
 const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;
 await resource?.addPaymentSource(context);
 onSuccess();
 close();
Expand DownExpand Up@@ -72,7 +72,7 @@ const RemoveScreen = ({

 const removePaymentSource = async () => {
 await paymentSource
 .remove({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .remove({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(revalidate)
 .catch((error: Error) => {
 handleError(error, [], card.setError);
Expand DownExpand Up@@ -108,7 +108,7 @@ export const PaymentSources = withCardStateProvider(() => {
 const clerk = useClerk();
 const subscriberType = useSubscriberTypeContext();
 const localizationRoot = useSubscriberTypeLocalizationRoot();
 const resource = subscriberType === 'org' ? clerk?.organization : clerk.user;
 const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;

 const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods();

Expand DownExpand Up@@ -209,7 +209,7 @@ const PaymentSourceMenu = ({
 isDestructive: false,
 onClick: () => {
 paymentSource
 .makeDefault({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .makeDefault({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(revalidate)
 .catch((error: Error) => {
 handleError(error, [], card.setError);
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ const PlanDetailsInternal = ({
 const hasFeatures = features.length > 0;

 return (
 <SubscriberTypeContext.Provider value={plan.forPayerType}>
 <SubscriberTypeContext.Provider value={plan.forPayerType === 'org' ? 'organization' : 'user'}>
 <Drawer.Header
 sx={t =>
 !hasFeatures
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -189,7 +189,7 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
 setLoading();

 await selectedSubscription
 .cancel({ orgId: subscriberType === 'org' ? organization?.id : undefined })
 .cancel({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
 .then(() => {
 onSubscriptionCancel?.();
 if (setIsOpen) {
Expand DownExpand Up@@ -381,7 +381,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
 openCheckout({
 planId: subscription.plan.id,
 planPeriod: subscription.planPeriod === 'month' ? 'annual' : 'month',
 subscriberType,
for: subscriberType,
 });
 },
 }
Expand All@@ -403,7 +403,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: CommerceSubsc
 openCheckout({
 planId: subscription.plan.id,
 planPeriod: subscription.planPeriod,
 subscriberType,
for: subscriberType,
 });
 },
 }
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -197,7 +197,7 @@ export function SubscriptionsList({
 )}

 {(commerceSettings.billing.user.hasPaidPlans && subscriberType === 'user') ||
 (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'org') ? (
 (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'organization') ? (
 <ProfileSection.ArrowButton
 id='subscriptionsList'
 textLocalizationKey={subscriptionItems.length > 0 ? arrowButtonText : arrowButtonEmptyText}
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -92,7 +92,7 @@ export function ComponentContextProvider({
 );
 case 'PricingTable':
 return (
 <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'org' : 'user'}>
 <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'organization' : 'user'}>
 <PricingTableContext.Provider value={{ componentName, ...(props as PricingTableProps) }}>
 {children}
 </PricingTableContext.Provider>
Expand Down

19 changes: 0 additions & 19 deletions
packages/clerk-js/src/ui/contexts/components/Checkout.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,12 +5,6 @@ import { isAllowedRedirect } from '../../../utils';
import type { CheckoutCtx } from '../../types';
import { useOptions } from '../OptionsContext';

function invariant(cond: any, msg: string): asserts cond {
 if (!cond) {
 throw Error(msg);
 }
}

export const CheckoutContext = createContext<CheckoutCtx | null>(null);

export const useCheckoutContext = () => {
Expand All@@ -35,22 +29,9 @@ export const useCheckoutContext = () => {

 const { componentName, ...ctx } = context;

 const subscriber = () => {
 if (ctx.subscriberType === 'org' && clerk.organization) {
 invariant(clerk.organization, 'Clerk: subscriberType is "org" but no active organization was found');

 return clerk.organization;
 }

 invariant(clerk.user, 'Clerk: no active user found');

 return clerk.user;
 };

 return {
 ...ctx,
 componentName,
 newSubscriptionRedirectUrl,
 subscriber,
 };
};

12 changes: 6 additions & 6 deletions
packages/clerk-js/src/ui/contexts/components/Plans.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,7 +25,7 @@ import { useSubscriberTypeContext } from './SubscriberType';
export const usePaymentMethods = () => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_usePaymentMethods({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -35,7 +35,7 @@ export const usePaymentMethods = () => {
export const usePaymentAttempts = () => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_usePaymentAttempts({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -45,7 +45,7 @@ export const usePaymentAttempts = () => {
export const useStatements = (params?: { mode: 'cache' }) => {
 const subscriberType = useSubscriberTypeContext();
 return __experimental_useStatements({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 10,
 keepPreviousData: true,
Expand All@@ -56,7 +56,7 @@ export const useStatements = (params?: { mode: 'cache' }) => {
export const useSubscription = () => {
 const subscriberType = useSubscriberTypeContext();
 const subscription = __experimental_useSubscription({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 keepPreviousData: true,
 });
 const subscriptionItems = useMemo(
Expand All@@ -74,7 +74,7 @@ export const usePlans = (params?: { mode: 'cache' }) => {
 const subscriberType = useSubscriberTypeContext();

 return __experimental_usePlans({
 for: subscriberType === 'org' ? 'organization' : 'user',
 for: subscriberType,
 initialPage: 1,
 pageSize: 50,
 keepPreviousData: true,
Expand DownExpand Up@@ -303,7 +303,7 @@ export const usePlansContext = () => {
 planId: plan.id,
 // if the plan doesn't support annual, use monthly
 planPeriod: planPeriod === 'annual' && plan.annualMonthlyAmount === 0 ? 'month' : planPeriod,
 subscriberType,
for: subscriberType,
 onSubscriptionComplete: () => {
 revalidateAll();
 },
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/contexts/components/SubscriberType.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
import type { CommercePayerType } from '@clerk/types';
import type { ForPayerType } from '@clerk/types';
import { createContext, useContext } from 'react';

const DEFAUlT = 'user';
export const SubscriberTypeContext = createContext<CommercePayerType | undefined>(DEFAUlT);
export const SubscriberTypeContext = createContext<ForPayerType | undefined>(DEFAUlT);

export const useSubscriberTypeContext = (): CommercePayerType => useContext(SubscriberTypeContext) || DEFAUlT;
export const useSubscriberTypeContext = (): ForPayerType => useContext(SubscriberTypeContext) || DEFAUlT;

export const useSubscriberTypeLocalizationRoot = () => {
 const subscriberType = useSubscriberTypeContext();
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -40,7 +40,7 @@ export function MountedCheckoutDrawer({
 <Checkout
 planId={checkoutDrawer.props.planId}
 planPeriod={checkoutDrawer.props.planPeriod}
subscriberType={checkoutDrawer.props.subscriberType}
for={checkoutDrawer.props.for}
 onSubscriptionComplete={checkoutDrawer.props.onSubscriptionComplete}
 portalRoot={checkoutDrawer.props.portalRoot}
 appearance={checkoutDrawer.props.appearance}
Expand Down

6 changes: 3 additions & 3 deletions
packages/react/src/components/CheckoutButton.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ export const CheckoutButton = withClerk(
 const {
 planId,
 planPeriod,
subscriberType,
for: _for,
 onSubscriptionComplete,
 newSubscriptionRedirectUrl,
 checkoutProps,
Expand All@@ -62,7 +62,7 @@ export const CheckoutButton = withClerk(
 throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
 }

 if (orgId === null && subscriberType === 'org') {
 if (orgId === null && _for === 'organization') {
 throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
 }

Expand All@@ -77,7 +77,7 @@ export const CheckoutButton = withClerk(
 return clerk.__internal_openCheckout({
 planId,
 planPeriod,
subscriberType,
for: _for,
 onSubscriptionComplete,
 newSubscriptionRedirectUrl,
 ...checkoutProps,
Expand Down

6 changes: 3 additions & 3 deletions
packages/react/src/components/SubscriptionDetailsButton.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -46,7 +46,7 @@ export const SubscriptionDetailsButton = withClerk(
 children,
 ...props
 }: WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>) => {
 const { for: forProp, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
 const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
 children = normalizeWithDefaultValue(children, 'Subscription details');
 const child = assertSingleChild(children)('SubscriptionDetailsButton');

Expand All@@ -56,7 +56,7 @@ export const SubscriptionDetailsButton = withClerk(
 throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
 }

 if (orgId === null && forProp === 'org') {
 if (orgId === null && _for === 'organization') {
 throw new Error(
 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
 );
Expand All@@ -68,7 +68,7 @@ export const SubscriptionDetailsButton = withClerk(
 }

 return clerk.__internal_openSubscriptionDetails({
 for: forProp,
 for: _for,
 onSubscriptionCancel,
 ...subscriptionDetailsProps,
 });
Expand Down
Loading