Skip to main content

usePaymentAvailability

Overview​

usePaymentAvailability is a React hook that determines whether payment providers are configured and what should be displayed in the UI based on the current environment mode (LIVE vs DEMO). It handles SSR hydration safely by returning a default state on the server and computing the actual availability after client-side hydration.

Source: template/hooks/use-payment-availability.ts

Signature​

function usePaymentAvailability(): PaymentAvailability

Parameters​

This hook takes no parameters. It reads payment provider configuration from the useLayoutTheme context and environment mode from isDemoMode().

Return Values​

The hook returns a PaymentAvailability object:

PropertyTypeDescription
isPaymentConfiguredbooleanWhether at least one payment provider (Stripe, LemonSqueezy, etc.) is configured.
isDemoModebooleanWhether the application is running in demo mode.
shouldShowPaidPlansbooleanWhether to render paid plan cards (STANDARD, PREMIUM). true when payment is configured OR in demo mode.
shouldShowPaymentWarningbooleanWhether to display a warning that no payment provider is configured. true only when no payment is configured AND in demo mode.
configuredProvidersstring[]List of configured payment provider identifiers.
isHydratedbooleanWhether the hook has completed client-side hydration. false during SSR.

Type Definitions​

PaymentAvailability​

interface PaymentAvailability {
  isPaymentConfigured: boolean;
  isDemoMode: boolean;
  shouldShowPaidPlans: boolean;
  shouldShowPaymentWarning: boolean;
  configuredProviders: string[];
  isHydrated: boolean;
}

Implementation Details​

Behavior Matrix​

EnvironmentPayment ConfiguredshouldShowPaidPlansshouldShowPaymentWarning
LIVE (DEMO=false)Nofalsefalse
LIVE (DEMO=false)Yestruefalse
DEMO (DEMO=true)Notruetrue
DEMO (DEMO=true)Yestruefalse

SSR Hydration Strategy​

During server-side rendering, the hook returns a default state that shows all plans (shouldShowPaidPlans: true) and sets isDemoMode: true. This prevents layout shift when the page hydrates on the client. After the component mounts, useEffect sets isHydrated to true, causing the useMemo to recompute the actual values based on the real environment configuration.

Default SSR State:

const DEFAULT_STATE: PaymentAvailability = {
  isPaymentConfigured: false,
  isDemoMode: true,
  shouldShowPaidPlans: true,
  shouldShowPaymentWarning: false,
  configuredProviders: [],
  isHydrated: false
};

Dependencies​

  • useLayoutTheme() -- Provides configuredProviders from the application's theme/layout context.
  • isDemoMode() -- Utility function from @/lib/utils that checks the current environment mode.

Usage Examples​

Conditional Plan Display​

import { usePaymentAvailability } from '@/hooks/use-payment-availability';

function PricingPage() {
  const { shouldShowPaidPlans, shouldShowPaymentWarning } = usePaymentAvailability();

  return (
    <div>
      <FreePlanCard />
      {shouldShowPaidPlans && (
        <>
          <StandardPlanCard />
          <PremiumPlanCard />
        </>
      )}
      {shouldShowPaymentWarning && (
        <Alert variant="warning">
          No payment provider configured. Plans shown for demonstration only.
        </Alert>
      )}
    </div>
  );
}

Checking Provider Configuration​

function PaymentSetupStatus() {
  const { isPaymentConfigured, configuredProviders, isHydrated } = usePaymentAvailability();

  if (!isHydrated) return null; // Wait for hydration

  if (!isPaymentConfigured) {
    return <p>Please configure a payment provider to accept payments.</p>;
  }

  return (
    <p>Active providers: {configuredProviders.join(', ')}</p>
  );
}

Guarding Payment Features​

function UpgradeButton() {
  const { isPaymentConfigured, isDemoMode } = usePaymentAvailability();

  if (!isPaymentConfigured && !isDemoMode) {
    return null; // Hide upgrade button in LIVE mode without payment
  }

  return (
    <button disabled={!isPaymentConfigured}>
      {isPaymentConfigured ? 'Upgrade Now' : 'Upgrade (Demo)'}
    </button>
  );
}