@clerk/clerk-react/dist/experimental.d.ts

Clerk React library

import * as _clerk_types from '@clerk/types';
import { __experimental_CheckoutButtonProps, __experimental_PlanDetailsButtonProps, __experimental_SubscriptionDetailsButtonProps } from '@clerk/types';
export { __experimental_CheckoutButtonProps as CheckoutButtonProps, __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps, __experimental_SubscriptionDetailsButtonProps as SubscriptionDetailsButtonProps } from '@clerk/types';
import React from 'react';
import { W as WithClerkProp } from './types-Bl1IBYqc.js';
export { __experimental_CheckoutProvider as CheckoutProvider, __experimental_PaymentElement as PaymentElement, __experimental_PaymentElementProvider as PaymentElementProvider, __experimental_useCheckout as useCheckout, __experimental_usePaymentAttempts as usePaymentAttempts, __experimental_usePaymentElement as usePaymentElement, __experimental_usePaymentMethods as usePaymentMethods, __experimental_usePlans as usePlans, __experimental_useStatements as useStatements, __experimental_useSubscription as useSubscription } from '@clerk/shared/react';

/**
 * @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
 */
declare const CheckoutButton: {
    (props: _clerk_types.Without<WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>, "clerk">): React.JSX.Element | null;
    displayName: string;
};

/**
 * @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
 */
declare const PlanDetailsButton: {
    (props: _clerk_types.Without<WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>, "clerk">): React.JSX.Element | null;
    displayName: string;
};

/**
 * @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
 */
declare const SubscriptionDetailsButton: {
    (props: _clerk_types.Without<WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>, "clerk">): React.JSX.Element | null;
    displayName: string;
};

declare function useSignInSignal(): {
    errors: _clerk_types.Errors;
    fetchStatus: "idle" | "fetching";
    signIn: _clerk_types.SignInFutureResource | null;
} | null;

export { CheckoutButton, PlanDetailsButton, SubscriptionDetailsButton, useSignInSignal };