feat(astro): Add Billing buttons

.changeset/cold-parks-push.md

@@ -0,0 +1,5 @@
+---
+'@clerk/astro': minor
+---
+
+Expose billing buttons as experimental

integration/templates/astro-node/src/pages/billing/checkout-btn.astro

@@ -0,0 +1,17 @@
+---
+import { SignedIn, __experimental_CheckoutButton as CheckoutButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Checkout Button">
+ <main>
+ <SignedIn>
+ <CheckoutButton
+ planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'
+ planPeriod='month'
+ >
+ Checkout Now
+ </CheckoutButton>
+ </SignedIn>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/plan-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { PlanDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Plan Details Button">
+ <main>
+ <PlanDetailsButton planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'>
+ Plan details
+ </PlanDetailsButton>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/subscription-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { __experimental_SubscriptionDetailsButton as SubscriptionDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Subscription Details Button">
+ <main>
+ <SubscriptionDetailsButton>
+ Subscription details
+ </SubscriptionDetailsButton>
+ </main>
+</Layout>

packages/astro/src/astro-components/index.ts

@@ -12,6 +12,9 @@ export { default as AuthenticateWithRedirectCallback } from './control/Authentic
 export { default as SignInButton } from './unstyled/SignInButton.astro';
 export { default as SignUpButton } from './unstyled/SignUpButton.astro';
 export { default as SignOutButton } from './unstyled/SignOutButton.astro';
+export { default as __experimental_SubscriptionDetailsButton } from './unstyled/SubscriptionDetailsButton.astro';
+export { default as __experimental_CheckoutButton } from './unstyled/CheckoutButton.astro';
+export { default as PlanDetailsButton } from './unstyled/PlanDetailsButton.astro';
 
 /**
  * UI Components

packages/astro/src/astro-components/unstyled/CheckoutButton.astro

@@ -0,0 +1,86 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_CheckoutButtonProps, 'onSubscriptionComplete'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const {
+ as: Tag = 'button',
+ asChild,
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ clickIdentifier,
+ ...props
+} = Astro.props;
+
+const checkoutOptions = {
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ clickIdentifier,
+ ...checkoutProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Checkout</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, checkoutOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && checkoutOptions.for === 'organization') {
+ throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
+ }
+
+ console.log('checkoutOptions', checkoutOptions);
+
+ if (checkoutOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-complete', { detail: checkoutOptions.clickIdentifier });
+ checkoutOptions.onSubscriptionComplete = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openCheckout(checkoutOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/PlanDetailsButton.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & __experimental_PlanDetailsButtonProps;
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, plan, planId, initialPlanPeriod, planDetailsProps, ...props } = Astro.props;
+
+const planDetailsOptions = {
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Plan details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, planDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ return clerk.__internal_openPlanDetails(planDetailsOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/SubscriptionDetailsButton.astro

@@ -0,0 +1,75 @@
+---
+import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/types';
+
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_SubscriptionDetailsButtonProps, 'onSubscriptionCancel'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, for: _for, clickIdentifier, subscriptionDetailsProps, ...props } = Astro.props;
+
+const subscriptionDetailsOptions = {
+ for: _for,
+ clickIdentifier,
+ ...subscriptionDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Subscription details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, subscriptionDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && subscriptionDetailsOptions.for === 'organization') {
+ throw new Error(
+ 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
+ );
+ }
+ if (subscriptionDetailsOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-cancel', {
+ detail: subscriptionDetailsOptions.clickIdentifier,
+ });
+ subscriptionDetailsOptions.onSubscriptionCancel = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openSubscriptionDetails(subscriptionDetailsOptions);
+ });
+</script>

packages/astro/src/react/CheckoutButton.tsx

@@ -0,0 +1,53 @@
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_CheckoutButtonProps as CheckoutButtonProps };
+
+export const CheckoutButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>) => {
+ const {
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ ...rest
+ } = props;
+
+ // Note: Auth checks are moved to runtime since Astro React components
+ // don't have access to auth context at render time like Vue/React apps do
+
+ children = normalizeWithDefaultValue(children, 'Checkout');
+ const child = assertSingleChild(children)('CheckoutButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openCheckout({
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ ...checkoutProps,
+ });
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'CheckoutButton',
+);

packages/astro/src/react/PlanDetailsButton.tsx

@@ -0,0 +1,40 @@
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps };
+
+export const PlanDetailsButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
+ const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
+ children = normalizeWithDefaultValue(children, 'Plan details');
+ const child = assertSingleChild(children)('PlanDetailsButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openPlanDetails({
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+ } as __experimental_PlanDetailsButtonProps);
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'PlanDetailsButton',
+);

.changeset/cold-parks-push.md

@@ -0,0 +1,5 @@
+---
+'@clerk/astro': minor
+---
+
+Expose billing buttons as experimental

integration/templates/astro-node/src/pages/billing/checkout-btn.astro

@@ -0,0 +1,17 @@
+---
+import { SignedIn, __experimental_CheckoutButton as CheckoutButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Checkout Button">
+ <main>
+ <SignedIn>
+ <CheckoutButton
+ planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'
+ planPeriod='month'
+ >
+ Checkout Now
+ </CheckoutButton>
+ </SignedIn>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/plan-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { PlanDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Plan Details Button">
+ <main>
+ <PlanDetailsButton planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'>
+ Plan details
+ </PlanDetailsButton>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/subscription-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { __experimental_SubscriptionDetailsButton as SubscriptionDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Subscription Details Button">
+ <main>
+ <SubscriptionDetailsButton>
+ Subscription details
+ </SubscriptionDetailsButton>
+ </main>
+</Layout>

packages/astro/src/astro-components/index.ts

@@ -12,6 +12,9 @@ export { default as AuthenticateWithRedirectCallback } from './control/Authentic
 export { default as SignInButton } from './unstyled/SignInButton.astro';
 export { default as SignUpButton } from './unstyled/SignUpButton.astro';
 export { default as SignOutButton } from './unstyled/SignOutButton.astro';
+export { default as __experimental_SubscriptionDetailsButton } from './unstyled/SubscriptionDetailsButton.astro';
+export { default as __experimental_CheckoutButton } from './unstyled/CheckoutButton.astro';
+export { default as PlanDetailsButton } from './unstyled/PlanDetailsButton.astro';
 
 /**
  * UI Components

packages/astro/src/astro-components/unstyled/CheckoutButton.astro

@@ -0,0 +1,86 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_CheckoutButtonProps, 'onSubscriptionComplete'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const {
+ as: Tag = 'button',
+ asChild,
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ clickIdentifier,
+ ...props
+} = Astro.props;
+
+const checkoutOptions = {
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ clickIdentifier,
+ ...checkoutProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Checkout</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, checkoutOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && checkoutOptions.for === 'organization') {
+ throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
+ }
+
+ console.log('checkoutOptions', checkoutOptions);
+
+ if (checkoutOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-complete', { detail: checkoutOptions.clickIdentifier });
+ checkoutOptions.onSubscriptionComplete = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openCheckout(checkoutOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/PlanDetailsButton.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & __experimental_PlanDetailsButtonProps;
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, plan, planId, initialPlanPeriod, planDetailsProps, ...props } = Astro.props;
+
+const planDetailsOptions = {
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Plan details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, planDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ return clerk.__internal_openPlanDetails(planDetailsOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/SubscriptionDetailsButton.astro

@@ -0,0 +1,75 @@
+---
+import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/types';
+
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_SubscriptionDetailsButtonProps, 'onSubscriptionCancel'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, for: _for, clickIdentifier, subscriptionDetailsProps, ...props } = Astro.props;
+
+const subscriptionDetailsOptions = {
+ for: _for,
+ clickIdentifier,
+ ...subscriptionDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Subscription details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, subscriptionDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && subscriptionDetailsOptions.for === 'organization') {
+ throw new Error(
+ 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
+ );
+ }
+ if (subscriptionDetailsOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-cancel', {
+ detail: subscriptionDetailsOptions.clickIdentifier,
+ });
+ subscriptionDetailsOptions.onSubscriptionCancel = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openSubscriptionDetails(subscriptionDetailsOptions);
+ });
+</script>

packages/astro/src/react/CheckoutButton.tsx

@@ -0,0 +1,53 @@
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_CheckoutButtonProps as CheckoutButtonProps };
+
+export const CheckoutButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>) => {
+ const {
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ ...rest
+ } = props;
+
+ // Note: Auth checks are moved to runtime since Astro React components
+ // don't have access to auth context at render time like Vue/React apps do
+
+ children = normalizeWithDefaultValue(children, 'Checkout');
+ const child = assertSingleChild(children)('CheckoutButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openCheckout({
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ ...checkoutProps,
+ });
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'CheckoutButton',
+);

packages/astro/src/react/PlanDetailsButton.tsx

@@ -0,0 +1,40 @@
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps };
+
+export const PlanDetailsButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
+ const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
+ children = normalizeWithDefaultValue(children, 'Plan details');
+ const child = assertSingleChild(children)('PlanDetailsButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openPlanDetails({
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+ } as __experimental_PlanDetailsButtonProps);
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'PlanDetailsButton',
+);

.changeset/cold-parks-push.md

@@ -0,0 +1,5 @@
+---
+'@clerk/astro': minor
+---
+
+Expose billing buttons as experimental

integration/templates/astro-node/src/pages/billing/checkout-btn.astro

@@ -0,0 +1,17 @@
+---
+import { SignedIn, __experimental_CheckoutButton as CheckoutButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Checkout Button">
+ <main>
+ <SignedIn>
+ <CheckoutButton
+ planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'
+ planPeriod='month'
+ >
+ Checkout Now
+ </CheckoutButton>
+ </SignedIn>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/plan-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { PlanDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Plan Details Button">
+ <main>
+ <PlanDetailsButton planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'>
+ Plan details
+ </PlanDetailsButton>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/subscription-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { __experimental_SubscriptionDetailsButton as SubscriptionDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Subscription Details Button">
+ <main>
+ <SubscriptionDetailsButton>
+ Subscription details
+ </SubscriptionDetailsButton>
+ </main>
+</Layout>

packages/astro/src/astro-components/index.ts

@@ -12,6 +12,9 @@ export { default as AuthenticateWithRedirectCallback } from './control/Authentic
 export { default as SignInButton } from './unstyled/SignInButton.astro';
 export { default as SignUpButton } from './unstyled/SignUpButton.astro';
 export { default as SignOutButton } from './unstyled/SignOutButton.astro';
+export { default as __experimental_SubscriptionDetailsButton } from './unstyled/SubscriptionDetailsButton.astro';
+export { default as __experimental_CheckoutButton } from './unstyled/CheckoutButton.astro';
+export { default as PlanDetailsButton } from './unstyled/PlanDetailsButton.astro';
 
 /**
  * UI Components

packages/astro/src/astro-components/unstyled/CheckoutButton.astro

@@ -0,0 +1,86 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_CheckoutButtonProps, 'onSubscriptionComplete'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const {
+ as: Tag = 'button',
+ asChild,
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ clickIdentifier,
+ ...props
+} = Astro.props;
+
+const checkoutOptions = {
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ clickIdentifier,
+ ...checkoutProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Checkout</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, checkoutOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && checkoutOptions.for === 'organization') {
+ throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
+ }
+
+ console.log('checkoutOptions', checkoutOptions);
+
+ if (checkoutOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-complete', { detail: checkoutOptions.clickIdentifier });
+ checkoutOptions.onSubscriptionComplete = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openCheckout(checkoutOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/PlanDetailsButton.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & __experimental_PlanDetailsButtonProps;
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, plan, planId, initialPlanPeriod, planDetailsProps, ...props } = Astro.props;
+
+const planDetailsOptions = {
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Plan details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, planDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ return clerk.__internal_openPlanDetails(planDetailsOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/SubscriptionDetailsButton.astro

@@ -0,0 +1,75 @@
+---
+import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/types';
+
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_SubscriptionDetailsButtonProps, 'onSubscriptionCancel'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, for: _for, clickIdentifier, subscriptionDetailsProps, ...props } = Astro.props;
+
+const subscriptionDetailsOptions = {
+ for: _for,
+ clickIdentifier,
+ ...subscriptionDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Subscription details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, subscriptionDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && subscriptionDetailsOptions.for === 'organization') {
+ throw new Error(
+ 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
+ );
+ }
+ if (subscriptionDetailsOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-cancel', {
+ detail: subscriptionDetailsOptions.clickIdentifier,
+ });
+ subscriptionDetailsOptions.onSubscriptionCancel = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openSubscriptionDetails(subscriptionDetailsOptions);
+ });
+</script>

packages/astro/src/react/CheckoutButton.tsx

@@ -0,0 +1,53 @@
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_CheckoutButtonProps as CheckoutButtonProps };
+
+export const CheckoutButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>) => {
+ const {
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ ...rest
+ } = props;
+
+ // Note: Auth checks are moved to runtime since Astro React components
+ // don't have access to auth context at render time like Vue/React apps do
+
+ children = normalizeWithDefaultValue(children, 'Checkout');
+ const child = assertSingleChild(children)('CheckoutButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openCheckout({
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ ...checkoutProps,
+ });
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'CheckoutButton',
+);

packages/astro/src/react/PlanDetailsButton.tsx

@@ -0,0 +1,40 @@
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps };
+
+export const PlanDetailsButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
+ const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
+ children = normalizeWithDefaultValue(children, 'Plan details');
+ const child = assertSingleChild(children)('PlanDetailsButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openPlanDetails({
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+ } as __experimental_PlanDetailsButtonProps);
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'PlanDetailsButton',
+);

.changeset/cold-parks-push.md

@@ -0,0 +1,5 @@
+---
+'@clerk/astro': minor
+---
+
+Expose billing buttons as experimental

integration/templates/astro-node/src/pages/billing/checkout-btn.astro

@@ -0,0 +1,17 @@
+---
+import { SignedIn, __experimental_CheckoutButton as CheckoutButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Checkout Button">
+ <main>
+ <SignedIn>
+ <CheckoutButton
+ planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'
+ planPeriod='month'
+ >
+ Checkout Now
+ </CheckoutButton>
+ </SignedIn>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/plan-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { PlanDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Plan Details Button">
+ <main>
+ <PlanDetailsButton planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'>
+ Plan details
+ </PlanDetailsButton>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/subscription-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { __experimental_SubscriptionDetailsButton as SubscriptionDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Subscription Details Button">
+ <main>
+ <SubscriptionDetailsButton>
+ Subscription details
+ </SubscriptionDetailsButton>
+ </main>
+</Layout>

packages/astro/src/astro-components/index.ts

@@ -12,6 +12,9 @@ export { default as AuthenticateWithRedirectCallback } from './control/Authentic
 export { default as SignInButton } from './unstyled/SignInButton.astro';
 export { default as SignUpButton } from './unstyled/SignUpButton.astro';
 export { default as SignOutButton } from './unstyled/SignOutButton.astro';
+export { default as __experimental_SubscriptionDetailsButton } from './unstyled/SubscriptionDetailsButton.astro';
+export { default as __experimental_CheckoutButton } from './unstyled/CheckoutButton.astro';
+export { default as PlanDetailsButton } from './unstyled/PlanDetailsButton.astro';
 
 /**
  * UI Components

packages/astro/src/astro-components/unstyled/CheckoutButton.astro

@@ -0,0 +1,86 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_CheckoutButtonProps, 'onSubscriptionComplete'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const {
+ as: Tag = 'button',
+ asChild,
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ clickIdentifier,
+ ...props
+} = Astro.props;
+
+const checkoutOptions = {
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ clickIdentifier,
+ ...checkoutProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Checkout</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, checkoutOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && checkoutOptions.for === 'organization') {
+ throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
+ }
+
+ console.log('checkoutOptions', checkoutOptions);
+
+ if (checkoutOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-complete', { detail: checkoutOptions.clickIdentifier });
+ checkoutOptions.onSubscriptionComplete = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openCheckout(checkoutOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/PlanDetailsButton.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & __experimental_PlanDetailsButtonProps;
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, plan, planId, initialPlanPeriod, planDetailsProps, ...props } = Astro.props;
+
+const planDetailsOptions = {
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Plan details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, planDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ return clerk.__internal_openPlanDetails(planDetailsOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/SubscriptionDetailsButton.astro

@@ -0,0 +1,75 @@
+---
+import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/types';
+
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_SubscriptionDetailsButtonProps, 'onSubscriptionCancel'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, for: _for, clickIdentifier, subscriptionDetailsProps, ...props } = Astro.props;
+
+const subscriptionDetailsOptions = {
+ for: _for,
+ clickIdentifier,
+ ...subscriptionDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Subscription details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, subscriptionDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && subscriptionDetailsOptions.for === 'organization') {
+ throw new Error(
+ 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
+ );
+ }
+ if (subscriptionDetailsOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-cancel', {
+ detail: subscriptionDetailsOptions.clickIdentifier,
+ });
+ subscriptionDetailsOptions.onSubscriptionCancel = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openSubscriptionDetails(subscriptionDetailsOptions);
+ });
+</script>

packages/astro/src/react/CheckoutButton.tsx

@@ -0,0 +1,53 @@
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_CheckoutButtonProps as CheckoutButtonProps };
+
+export const CheckoutButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>) => {
+ const {
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ ...rest
+ } = props;
+
+ // Note: Auth checks are moved to runtime since Astro React components
+ // don't have access to auth context at render time like Vue/React apps do
+
+ children = normalizeWithDefaultValue(children, 'Checkout');
+ const child = assertSingleChild(children)('CheckoutButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openCheckout({
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ ...checkoutProps,
+ });
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'CheckoutButton',
+);

packages/astro/src/react/PlanDetailsButton.tsx

@@ -0,0 +1,40 @@
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps };
+
+export const PlanDetailsButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
+ const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
+ children = normalizeWithDefaultValue(children, 'Plan details');
+ const child = assertSingleChild(children)('PlanDetailsButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openPlanDetails({
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+ } as __experimental_PlanDetailsButtonProps);
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'PlanDetailsButton',
+);

.changeset/cold-parks-push.md

@@ -0,0 +1,5 @@
+---
+'@clerk/astro': minor
+---
+
+Expose billing buttons as experimental

integration/templates/astro-node/src/pages/billing/checkout-btn.astro

@@ -0,0 +1,17 @@
+---
+import { SignedIn, __experimental_CheckoutButton as CheckoutButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Checkout Button">
+ <main>
+ <SignedIn>
+ <CheckoutButton
+ planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'
+ planPeriod='month'
+ >
+ Checkout Now
+ </CheckoutButton>
+ </SignedIn>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/plan-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { PlanDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Plan Details Button">
+ <main>
+ <PlanDetailsButton planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'>
+ Plan details
+ </PlanDetailsButton>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/subscription-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { __experimental_SubscriptionDetailsButton as SubscriptionDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Subscription Details Button">
+ <main>
+ <SubscriptionDetailsButton>
+ Subscription details
+ </SubscriptionDetailsButton>
+ </main>
+</Layout>

packages/astro/src/astro-components/index.ts

@@ -12,6 +12,9 @@ export { default as AuthenticateWithRedirectCallback } from './control/Authentic
 export { default as SignInButton } from './unstyled/SignInButton.astro';
 export { default as SignUpButton } from './unstyled/SignUpButton.astro';
 export { default as SignOutButton } from './unstyled/SignOutButton.astro';
+export { default as __experimental_SubscriptionDetailsButton } from './unstyled/SubscriptionDetailsButton.astro';
+export { default as __experimental_CheckoutButton } from './unstyled/CheckoutButton.astro';
+export { default as PlanDetailsButton } from './unstyled/PlanDetailsButton.astro';
 
 /**
  * UI Components

packages/astro/src/astro-components/unstyled/CheckoutButton.astro

@@ -0,0 +1,86 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_CheckoutButtonProps, 'onSubscriptionComplete'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const {
+ as: Tag = 'button',
+ asChild,
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ clickIdentifier,
+ ...props
+} = Astro.props;
+
+const checkoutOptions = {
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ clickIdentifier,
+ ...checkoutProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Checkout</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, checkoutOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && checkoutOptions.for === 'organization') {
+ throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
+ }
+
+ console.log('checkoutOptions', checkoutOptions);
+
+ if (checkoutOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-complete', { detail: checkoutOptions.clickIdentifier });
+ checkoutOptions.onSubscriptionComplete = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openCheckout(checkoutOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/PlanDetailsButton.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & __experimental_PlanDetailsButtonProps;
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, plan, planId, initialPlanPeriod, planDetailsProps, ...props } = Astro.props;
+
+const planDetailsOptions = {
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Plan details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, planDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ return clerk.__internal_openPlanDetails(planDetailsOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/SubscriptionDetailsButton.astro

@@ -0,0 +1,75 @@
+---
+import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/types';
+
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_SubscriptionDetailsButtonProps, 'onSubscriptionCancel'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, for: _for, clickIdentifier, subscriptionDetailsProps, ...props } = Astro.props;
+
+const subscriptionDetailsOptions = {
+ for: _for,
+ clickIdentifier,
+ ...subscriptionDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Subscription details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, subscriptionDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && subscriptionDetailsOptions.for === 'organization') {
+ throw new Error(
+ 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
+ );
+ }
+ if (subscriptionDetailsOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-cancel', {
+ detail: subscriptionDetailsOptions.clickIdentifier,
+ });
+ subscriptionDetailsOptions.onSubscriptionCancel = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openSubscriptionDetails(subscriptionDetailsOptions);
+ });
+</script>

packages/astro/src/react/CheckoutButton.tsx

@@ -0,0 +1,53 @@
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_CheckoutButtonProps as CheckoutButtonProps };
+
+export const CheckoutButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>) => {
+ const {
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ ...rest
+ } = props;
+
+ // Note: Auth checks are moved to runtime since Astro React components
+ // don't have access to auth context at render time like Vue/React apps do
+
+ children = normalizeWithDefaultValue(children, 'Checkout');
+ const child = assertSingleChild(children)('CheckoutButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openCheckout({
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ ...checkoutProps,
+ });
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'CheckoutButton',
+);

packages/astro/src/react/PlanDetailsButton.tsx

@@ -0,0 +1,40 @@
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps };
+
+export const PlanDetailsButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
+ const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
+ children = normalizeWithDefaultValue(children, 'Plan details');
+ const child = assertSingleChild(children)('PlanDetailsButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openPlanDetails({
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+ } as __experimental_PlanDetailsButtonProps);
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'PlanDetailsButton',
+);

.changeset/cold-parks-push.md

@@ -0,0 +1,5 @@
+---
+'@clerk/astro': minor
+---
+
+Expose billing buttons as experimental

integration/templates/astro-node/src/pages/billing/checkout-btn.astro

@@ -0,0 +1,17 @@
+---
+import { SignedIn, __experimental_CheckoutButton as CheckoutButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Checkout Button">
+ <main>
+ <SignedIn>
+ <CheckoutButton
+ planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'
+ planPeriod='month'
+ >
+ Checkout Now
+ </CheckoutButton>
+ </SignedIn>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/plan-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { PlanDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Plan Details Button">
+ <main>
+ <PlanDetailsButton planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'>
+ Plan details
+ </PlanDetailsButton>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/subscription-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { __experimental_SubscriptionDetailsButton as SubscriptionDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Subscription Details Button">
+ <main>
+ <SubscriptionDetailsButton>
+ Subscription details
+ </SubscriptionDetailsButton>
+ </main>
+</Layout>

packages/astro/src/astro-components/index.ts

@@ -12,6 +12,9 @@ export { default as AuthenticateWithRedirectCallback } from './control/Authentic
 export { default as SignInButton } from './unstyled/SignInButton.astro';
 export { default as SignUpButton } from './unstyled/SignUpButton.astro';
 export { default as SignOutButton } from './unstyled/SignOutButton.astro';
+export { default as __experimental_SubscriptionDetailsButton } from './unstyled/SubscriptionDetailsButton.astro';
+export { default as __experimental_CheckoutButton } from './unstyled/CheckoutButton.astro';
+export { default as PlanDetailsButton } from './unstyled/PlanDetailsButton.astro';
 
 /**
  * UI Components

packages/astro/src/astro-components/unstyled/CheckoutButton.astro

@@ -0,0 +1,86 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_CheckoutButtonProps, 'onSubscriptionComplete'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const {
+ as: Tag = 'button',
+ asChild,
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ clickIdentifier,
+ ...props
+} = Astro.props;
+
+const checkoutOptions = {
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ clickIdentifier,
+ ...checkoutProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Checkout</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, checkoutOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && checkoutOptions.for === 'organization') {
+ throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
+ }
+
+ console.log('checkoutOptions', checkoutOptions);
+
+ if (checkoutOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-complete', { detail: checkoutOptions.clickIdentifier });
+ checkoutOptions.onSubscriptionComplete = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openCheckout(checkoutOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/PlanDetailsButton.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & __experimental_PlanDetailsButtonProps;
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, plan, planId, initialPlanPeriod, planDetailsProps, ...props } = Astro.props;
+
+const planDetailsOptions = {
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Plan details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, planDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ return clerk.__internal_openPlanDetails(planDetailsOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/SubscriptionDetailsButton.astro

@@ -0,0 +1,75 @@
+---
+import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/types';
+
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_SubscriptionDetailsButtonProps, 'onSubscriptionCancel'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, for: _for, clickIdentifier, subscriptionDetailsProps, ...props } = Astro.props;
+
+const subscriptionDetailsOptions = {
+ for: _for,
+ clickIdentifier,
+ ...subscriptionDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Subscription details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, subscriptionDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && subscriptionDetailsOptions.for === 'organization') {
+ throw new Error(
+ 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
+ );
+ }
+ if (subscriptionDetailsOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-cancel', {
+ detail: subscriptionDetailsOptions.clickIdentifier,
+ });
+ subscriptionDetailsOptions.onSubscriptionCancel = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openSubscriptionDetails(subscriptionDetailsOptions);
+ });
+</script>

packages/astro/src/react/CheckoutButton.tsx

@@ -0,0 +1,53 @@
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_CheckoutButtonProps as CheckoutButtonProps };
+
+export const CheckoutButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>) => {
+ const {
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ ...rest
+ } = props;
+
+ // Note: Auth checks are moved to runtime since Astro React components
+ // don't have access to auth context at render time like Vue/React apps do
+
+ children = normalizeWithDefaultValue(children, 'Checkout');
+ const child = assertSingleChild(children)('CheckoutButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openCheckout({
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ ...checkoutProps,
+ });
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'CheckoutButton',
+);

packages/astro/src/react/PlanDetailsButton.tsx

@@ -0,0 +1,40 @@
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps };
+
+export const PlanDetailsButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
+ const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
+ children = normalizeWithDefaultValue(children, 'Plan details');
+ const child = assertSingleChild(children)('PlanDetailsButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openPlanDetails({
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+ } as __experimental_PlanDetailsButtonProps);
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'PlanDetailsButton',
+);

.changeset/cold-parks-push.md

@@ -0,0 +1,5 @@
+---
+'@clerk/astro': minor
+---
+
+Expose billing buttons as experimental

integration/templates/astro-node/src/pages/billing/checkout-btn.astro

@@ -0,0 +1,17 @@
+---
+import { SignedIn, __experimental_CheckoutButton as CheckoutButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Checkout Button">
+ <main>
+ <SignedIn>
+ <CheckoutButton
+ planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'
+ planPeriod='month'
+ >
+ Checkout Now
+ </CheckoutButton>
+ </SignedIn>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/plan-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { PlanDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Plan Details Button">
+ <main>
+ <PlanDetailsButton planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'>
+ Plan details
+ </PlanDetailsButton>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/subscription-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { __experimental_SubscriptionDetailsButton as SubscriptionDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Subscription Details Button">
+ <main>
+ <SubscriptionDetailsButton>
+ Subscription details
+ </SubscriptionDetailsButton>
+ </main>
+</Layout>

packages/astro/src/astro-components/index.ts

@@ -12,6 +12,9 @@ export { default as AuthenticateWithRedirectCallback } from './control/Authentic
 export { default as SignInButton } from './unstyled/SignInButton.astro';
 export { default as SignUpButton } from './unstyled/SignUpButton.astro';
 export { default as SignOutButton } from './unstyled/SignOutButton.astro';
+export { default as __experimental_SubscriptionDetailsButton } from './unstyled/SubscriptionDetailsButton.astro';
+export { default as __experimental_CheckoutButton } from './unstyled/CheckoutButton.astro';
+export { default as PlanDetailsButton } from './unstyled/PlanDetailsButton.astro';
 
 /**
  * UI Components

packages/astro/src/astro-components/unstyled/CheckoutButton.astro

@@ -0,0 +1,86 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_CheckoutButtonProps, 'onSubscriptionComplete'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const {
+ as: Tag = 'button',
+ asChild,
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ clickIdentifier,
+ ...props
+} = Astro.props;
+
+const checkoutOptions = {
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ clickIdentifier,
+ ...checkoutProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Checkout</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, checkoutOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && checkoutOptions.for === 'organization') {
+ throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
+ }
+
+ console.log('checkoutOptions', checkoutOptions);
+
+ if (checkoutOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-complete', { detail: checkoutOptions.clickIdentifier });
+ checkoutOptions.onSubscriptionComplete = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openCheckout(checkoutOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/PlanDetailsButton.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & __experimental_PlanDetailsButtonProps;
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, plan, planId, initialPlanPeriod, planDetailsProps, ...props } = Astro.props;
+
+const planDetailsOptions = {
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Plan details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, planDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ return clerk.__internal_openPlanDetails(planDetailsOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/SubscriptionDetailsButton.astro

@@ -0,0 +1,75 @@
+---
+import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/types';
+
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_SubscriptionDetailsButtonProps, 'onSubscriptionCancel'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, for: _for, clickIdentifier, subscriptionDetailsProps, ...props } = Astro.props;
+
+const subscriptionDetailsOptions = {
+ for: _for,
+ clickIdentifier,
+ ...subscriptionDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Subscription details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, subscriptionDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && subscriptionDetailsOptions.for === 'organization') {
+ throw new Error(
+ 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
+ );
+ }
+ if (subscriptionDetailsOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-cancel', {
+ detail: subscriptionDetailsOptions.clickIdentifier,
+ });
+ subscriptionDetailsOptions.onSubscriptionCancel = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openSubscriptionDetails(subscriptionDetailsOptions);
+ });
+</script>

packages/astro/src/react/CheckoutButton.tsx

@@ -0,0 +1,53 @@
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_CheckoutButtonProps as CheckoutButtonProps };
+
+export const CheckoutButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>) => {
+ const {
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ ...rest
+ } = props;
+
+ // Note: Auth checks are moved to runtime since Astro React components
+ // don't have access to auth context at render time like Vue/React apps do
+
+ children = normalizeWithDefaultValue(children, 'Checkout');
+ const child = assertSingleChild(children)('CheckoutButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openCheckout({
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ ...checkoutProps,
+ });
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'CheckoutButton',
+);

packages/astro/src/react/PlanDetailsButton.tsx

@@ -0,0 +1,40 @@
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps };
+
+export const PlanDetailsButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
+ const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
+ children = normalizeWithDefaultValue(children, 'Plan details');
+ const child = assertSingleChild(children)('PlanDetailsButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openPlanDetails({
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+ } as __experimental_PlanDetailsButtonProps);
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'PlanDetailsButton',
+);

.changeset/cold-parks-push.md

@@ -0,0 +1,5 @@
+---
+'@clerk/astro': minor
+---
+
+Expose billing buttons as experimental

integration/templates/astro-node/src/pages/billing/checkout-btn.astro

@@ -0,0 +1,17 @@
+---
+import { SignedIn, __experimental_CheckoutButton as CheckoutButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Checkout Button">
+ <main>
+ <SignedIn>
+ <CheckoutButton
+ planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'
+ planPeriod='month'
+ >
+ Checkout Now
+ </CheckoutButton>
+ </SignedIn>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/plan-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { PlanDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Plan Details Button">
+ <main>
+ <PlanDetailsButton planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'>
+ Plan details
+ </PlanDetailsButton>
+ </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/subscription-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { __experimental_SubscriptionDetailsButton as SubscriptionDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Subscription Details Button">
+ <main>
+ <SubscriptionDetailsButton>
+ Subscription details
+ </SubscriptionDetailsButton>
+ </main>
+</Layout>

packages/astro/src/astro-components/index.ts

@@ -12,6 +12,9 @@ export { default as AuthenticateWithRedirectCallback } from './control/Authentic
 export { default as SignInButton } from './unstyled/SignInButton.astro';
 export { default as SignUpButton } from './unstyled/SignUpButton.astro';
 export { default as SignOutButton } from './unstyled/SignOutButton.astro';
+export { default as __experimental_SubscriptionDetailsButton } from './unstyled/SubscriptionDetailsButton.astro';
+export { default as __experimental_CheckoutButton } from './unstyled/CheckoutButton.astro';
+export { default as PlanDetailsButton } from './unstyled/PlanDetailsButton.astro';
 
 /**
  * UI Components

packages/astro/src/astro-components/unstyled/CheckoutButton.astro

@@ -0,0 +1,86 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_CheckoutButtonProps, 'onSubscriptionComplete'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const {
+ as: Tag = 'button',
+ asChild,
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ clickIdentifier,
+ ...props
+} = Astro.props;
+
+const checkoutOptions = {
+ planId,
+ planPeriod,
+ for: _for,
+ newSubscriptionRedirectUrl,
+ clickIdentifier,
+ ...checkoutProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Checkout</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, checkoutOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && checkoutOptions.for === 'organization') {
+ throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
+ }
+
+ console.log('checkoutOptions', checkoutOptions);
+
+ if (checkoutOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-complete', { detail: checkoutOptions.clickIdentifier });
+ checkoutOptions.onSubscriptionComplete = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openCheckout(checkoutOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/PlanDetailsButton.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & __experimental_PlanDetailsButtonProps;
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, plan, planId, initialPlanPeriod, planDetailsProps, ...props } = Astro.props;
+
+const planDetailsOptions = {
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Plan details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, planDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ return clerk.__internal_openPlanDetails(planDetailsOptions);
+ });
+</script>

packages/astro/src/astro-components/unstyled/SubscriptionDetailsButton.astro

@@ -0,0 +1,75 @@
+---
+import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/types';
+
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+ Omit<__experimental_SubscriptionDetailsButtonProps, 'onSubscriptionCancel'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+ logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, for: _for, clickIdentifier, subscriptionDetailsProps, ...props } = Astro.props;
+
+const subscriptionDetailsOptions = {
+ for: _for,
+ clickIdentifier,
+ ...subscriptionDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+ htmlElement = await Astro.slots.render('default');
+ htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+ asChild ? (
+ <Fragment set:html={htmlElement} />
+ ) : (
+ <Tag
+ {...props}
+ data-clerk-unstyled-id={safeId}
+ >
+ <slot>Subscription details</slot>
+ </Tag>
+ )
+}
+
+<script is:inline define:vars={{ props, subscriptionDetailsOptions, safeId }}>
+ const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+ btn.addEventListener('click', () => {
+ const clerk = window.Clerk;
+
+ // Authentication checks
+ if (!clerk.user) {
+ throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
+ }
+
+ if (!clerk.organization && subscriptionDetailsOptions.for === 'organization') {
+ throw new Error(
+ 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
+ );
+ }
+ if (subscriptionDetailsOptions.clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:subscription-cancel', {
+ detail: subscriptionDetailsOptions.clickIdentifier,
+ });
+ subscriptionDetailsOptions.onSubscriptionCancel = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+
+ return clerk.__internal_openSubscriptionDetails(subscriptionDetailsOptions);
+ });
+</script>

packages/astro/src/react/CheckoutButton.tsx

@@ -0,0 +1,53 @@
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_CheckoutButtonProps as CheckoutButtonProps };
+
+export const CheckoutButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>) => {
+ const {
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ checkoutProps,
+ ...rest
+ } = props;
+
+ // Note: Auth checks are moved to runtime since Astro React components
+ // don't have access to auth context at render time like Vue/React apps do
+
+ children = normalizeWithDefaultValue(children, 'Checkout');
+ const child = assertSingleChild(children)('CheckoutButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openCheckout({
+ planId,
+ planPeriod,
+ for: _for,
+ onSubscriptionComplete,
+ newSubscriptionRedirectUrl,
+ ...checkoutProps,
+ });
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'CheckoutButton',
+);

packages/astro/src/react/PlanDetailsButton.tsx

@@ -0,0 +1,40 @@
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps };
+
+export const PlanDetailsButton = withClerk(
+ ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
+ const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
+ children = normalizeWithDefaultValue(children, 'Plan details');
+ const child = assertSingleChild(children)('PlanDetailsButton');
+
+ const clickHandler = () => {
+ if (!clerk) {
+ return;
+ }
+
+ return clerk.__internal_openPlanDetails({
+ plan,
+ planId,
+ initialPlanPeriod,
+ ...planDetailsProps,
+ } as __experimental_PlanDetailsButtonProps);
+ };
+
+ const wrappedChildClickHandler: React.MouseEventHandler = e => {
+ if (child && typeof child === 'object' && 'props' in child) {
+ void safeExecute(child.props.onClick)(e);
+ }
+ return clickHandler();
+ };
+
+ const childProps = { ...rest, onClick: wrappedChildClickHandler };
+ return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+ },
+ 'PlanDetailsButton',
+);