feat(clerk-react, nextjs): Introduce commerce buttons

.changeset/curly-jeans-sleep.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-react': minor
+---
+
+Expose `<CheckoutButton/>`, `<SubscriptionDetailsButton/>`, `<PlanDetailsButton/>` from `@clerk/clerk-react/experimental`.

.changeset/dark-coins-shake.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': minor
+---
+
+Expose `<CheckoutButton/>`, `<SubscriptionDetailsButton/>`, `<PlanDetailsButton/>` from `@clerk/nextjs/experimental`.

packages/nextjs/package.json

@@ -49,6 +49,11 @@
       "types": "./dist/types/webhooks.d.ts",
       "import": "./dist/esm/webhooks.js",
       "require": "./dist/cjs/webhooks.js"
+    },
+    "./experimental": {
+      "types": "./dist/types/experimental.d.ts",
+      "import": "./dist/esm/experimental.js",
+      "require": "./dist/cjs/experimental.js"
     }
   },
   "types": "./dist/types/index.d.ts",

packages/nextjs/src/experimental.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export { CheckoutButton, PlanDetailsButton, SubscriptionDetailsButton } from '@clerk/clerk-react/experimental';

packages/react/package.json

@@ -53,13 +53,24 @@
         "default": "./dist/errors.js"
       }
     },
+    "./experimental": {
+      "import": {
+        "types": "./dist/experimental.d.mts",
+        "default": "./dist/experimental.mjs"
+      },
+      "require": {
+        "types": "./dist/experimental.d.ts",
+        "default": "./dist/experimental.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
   "files": [
     "dist",
     "internal",
-    "errors"
+    "errors",
+    "experimental"
   ],
   "scripts": {
     "build": "tsup",

packages/react/src/components/CheckoutButton.tsx

@@ -0,0 +1,104 @@
+import type { __internal_CheckoutProps } from '@clerk/types';
+import React from 'react';
+
+import { useAuth } from '../hooks';
+import type { WithClerkProp } from '../types';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';
+import { withClerk } from './withClerk';
+
+/**
+ * @experimental A button component that opens the Clerk Checkout drawer when clicked. This component must be rendered
+ * inside a `<SignedIn />` component to ensure the user is authenticated.
+ *
+ * @example
+ * ```tsx
+ * import { SignedIn } from '@clerk/clerk-react';
+ * import { CheckoutButton } from '@clerk/clerk-react/experimental';
+ *
+ * // Basic usage with default "Checkout" text
+ * function BasicCheckout() {
+ *   return (
+ *     <SignedIn>
+ *       <CheckoutButton planId="plan_123" />
+ *     </SignedIn>
+ *   );
+ * }
+ *
+ * // Custom button with organization subscription
+ * function OrganizationCheckout() {
+ *   return (
+ *     <SignedIn>
+ *       <CheckoutButton
+ *         planId="plan_123"
+ *         planPeriod="month"
+ *         subscriberType="org"
+ *         onSubscriptionComplete={() => console.log('Subscription completed!')}
+ *       >
+ *         <button className="custom-button">Subscribe Now</button>
+ *       </CheckoutButton>
+ *     </SignedIn>
+ *   );
+ * }
+ * ```
+ *
+ * @throws {Error} When rendered outside of a `<SignedIn />` component
+ * @throws {Error} When `subscriberType="org"` is used without an active organization context
+ */
+export const CheckoutButton = withClerk(
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__internal_CheckoutProps>>) => {
+    const {
+      appearance,
+      planId,
+      planPeriod,
+      subscriberType,
+      onSubscriptionComplete,
+      portalId,
+      portalRoot,
+      newSubscriptionRedirectUrl,
+      onClose,
+      ...rest
+    } = props;
+
+    const { userId, orgId } = useAuth();
+
+    if (userId === null) {
+      throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
+    }
+
+    if (orgId === null && subscriberType === 'org') {
+      throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
+    }
+
+    children = normalizeWithDefaultValue(children, 'Checkout');
+    const child = assertSingleChild(children)('CheckoutButton');
+
+    const clickHandler = () => {
+      if (!clerk) {
+        return;
+      }
+
+      return clerk.__internal_openCheckout({
+        appearance,
+        planId,
+        planPeriod,
+        subscriberType,
+        onSubscriptionComplete,
+        portalId,
+        portalRoot,
+        newSubscriptionRedirectUrl,
+        onClose,
+      });
+    };
+
+    const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+      if (child && typeof child === 'object' && 'props' in child) {
+        await safeExecute(child.props.onClick)(e);
+      }
+      return clickHandler();
+    };
+
+    const childProps = { ...rest, onClick: wrappedChildClickHandler };
+    return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+  },
+  { component: 'CheckoutButton', renderWhileLoading: true },
+);

packages/react/src/components/PlanDetailsButton.tsx

@@ -0,0 +1,68 @@
+import type { __internal_PlanDetailsProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from '../types';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';
+import { withClerk } from './withClerk';
+
+/**
+ * @experimental A button component that opens the Clerk Plan Details drawer when clicked. This component is part of
+ * Clerk's Billing feature which is available under a public beta.
+ *
+ * @example
+ * ```tsx
+ * import { SignedIn } from '@clerk/clerk-react';
+ * import { PlanDetailsButton } from '@clerk/clerk-react/experimental';
+ *
+ * // Basic usage with default "Plan details" text
+ * function BasicPlanDetails() {
+ *   return (
+ *     <PlanDetailsButton planId="plan_123" />
+ *   );
+ * }
+ *
+ * // Custom button with custom text
+ * function CustomPlanDetails() {
+ *   return (
+ *     <PlanDetailsButton planId="plan_123">
+ *       <button>View Plan Details</button>
+ *     </PlanDetailsButton>
+ *   );
+ * }
+ * ```
+ *
+ * @see https://clerk.com/docs/billing/overview
+ */
+export const PlanDetailsButton = withClerk(
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__internal_PlanDetailsProps>>) => {
+    const { plan, planId, appearance, initialPlanPeriod, portalId, portalRoot, ...rest } = props;
+    children = normalizeWithDefaultValue(children, 'Plan details');
+    const child = assertSingleChild(children)('PlanDetailsButton');
+
+    const clickHandler = () => {
+      if (!clerk) {
+        return;
+      }
+
+      return clerk.__internal_openPlanDetails({
+        plan,
+        planId,
+        appearance,
+        initialPlanPeriod,
+        portalId,
+        portalRoot,
+      });
+    };
+
+    const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+      if (child && typeof child === 'object' && 'props' in child) {
+        await safeExecute(child.props.onClick)(e);
+      }
+      return clickHandler();
+    };
+
+    const childProps = { ...rest, onClick: wrappedChildClickHandler };
+    return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+  },
+  { component: 'PlanDetailsButton', renderWhileLoading: true },
+);

packages/react/src/components/SubscriptionDetailsButton.tsx

@@ -0,0 +1,86 @@
+import type { __internal_SubscriptionDetailsProps } from '@clerk/types';
+import React from 'react';
+
+import { useAuth } from '../hooks';
+import type { WithClerkProp } from '../types';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';
+import { withClerk } from './withClerk';
+
+/**
+ * @experimental A button component that opens the Clerk Subscription Details drawer when clicked. This component must be rendered
+ * inside a `<SignedIn />` component to ensure the user is authenticated.
+ *
+ * @example
+ * ```tsx
+ * import { SignedIn } from '@clerk/clerk-react';
+ * import { SubscriptionDetailsButton } from '@clerk/clerk-react/experimental';
+ *
+ * // Basic usage with default "Subscription details" text
+ * function BasicSubscriptionDetails() {
+ *   return (
+ *     <SubscriptionDetailsButton />
+ *   );
+ * }
+ *
+ * // Custom button with organization subscription
+ * function OrganizationSubscriptionDetails() {
+ *   return (
+ *     <SubscriptionDetailsButton
+ *       for="org"
+ *       onSubscriptionCancel={() => console.log('Subscription canceled')}
+ *     >
+ *       <button>View Organization Subscription</button>
+ *     </SubscriptionDetailsButton>
+ *   );
+ * }
+ * ```
+ *
+ * @throws {Error} When rendered outside of a `<SignedIn />` component
+ * @throws {Error} When `for="org"` is used without an active organization context
+ *
+ * @see https://clerk.com/docs/billing/overview
+ */
+export const SubscriptionDetailsButton = withClerk(
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__internal_SubscriptionDetailsProps>>) => {
+    const { for: forProp, appearance, onSubscriptionCancel, portalId, portalRoot, ...rest } = props;
+    children = normalizeWithDefaultValue(children, 'Subscription details');
+    const child = assertSingleChild(children)('SubscriptionDetailsButton');
+
+    const { userId, orgId } = useAuth();
+
+    if (userId === null) {
+      throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
+    }
+
+    if (orgId === null && forProp === 'org') {
+      throw new Error(
+        'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
+      );
+    }
+
+    const clickHandler = () => {
+      if (!clerk) {
+        return;
+      }
+
+      return clerk.__internal_openSubscriptionDetails({
+        for: forProp,
+        appearance,
+        onSubscriptionCancel,
+        portalId,
+        portalRoot,
+      });
+    };
+
+    const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+      if (child && typeof child === 'object' && 'props' in child) {
+        await safeExecute(child.props.onClick)(e);
+      }
+      return clickHandler();
+    };
+
+    const childProps = { ...rest, onClick: wrappedChildClickHandler };
+    return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+  },
+  { component: 'SubscriptionDetailsButton', renderWhileLoading: true },
+);