Components

import { PricingTable } from '@nozle-js/react';

// Auto-fetch plans from API, auto-detect current plan
<PricingTable
  customerId="cust_123"
  highlightPlan="pro"
  onSelect={(plan) => handleUpgrade(plan)}
/>

// Or pass plans explicitly
<PricingTable
  plans={[
    { code: 'starter', name: 'Starter', amount_cents: 2900, amount_currency: 'USD', interval: 'monthly' },
    { code: 'pro', name: 'Pro', amount_cents: 9900, amount_currency: 'USD', interval: 'monthly', description: 'Most popular' },
  ]}
  features={[
    ['10K API calls', 'Email support'],
    ['100K API calls', 'Priority support', 'Analytics'],
  ]}
  currentPlanCode="starter"
  highlightPlan="pro"
  onSelect={(plan) => console.log('Selected:', plan.code)}
  showToggle={true}
  enterpriseEmail="sales@example.com"
  className="my-pricing"
/>;

:root {
  /* Component-specific (highest priority) */
  --nozle-pricing-bg: #ffffff;
  --nozle-pricing-card-bg: #ffffff;
  --nozle-pricing-highlight: #6366f1;
  --nozle-pricing-border: #e5e7eb;
  --nozle-pricing-radius: 12px;

  /* Global Nozle variables (fallbacks) */
  --nozle-background: #ffffff;
  --nozle-card: #ffffff;
  --nozle-primary: #6366f1;
  --nozle-border: #e5e7eb;
  --nozle-radius: 12px;
  --nozle-foreground: #111827;
  --nozle-muted-foreground: #6b7280;
  --nozle-muted: #f3f4f6;
  --nozle-primary-foreground: #ffffff;
}

import { PlanCard } from '@nozle-js/react';

<PlanCard
  id="pro"
  name="Pro"
  monthlyPrice={99}
  annualPrice={990}
  features={['100K API calls', 'Priority support', 'Analytics']}
  isAnnual={false}
  isCurrent={false}
  onSelect={() => handleUpgrade('pro')}
/>;

import { PlanComparison } from '@nozle-js/react';

<PlanComparison
  plans={plans}
  features={[
    { key: 'api_calls', label: 'API Calls', values: { starter: '10K', pro: '100K' } },
    { key: 'analytics', label: 'Analytics', values: { starter: false, pro: true } },
    { key: 'support', label: 'Priority Support', values: { starter: false, pro: true } },
  ]}
/>;

import { PlanBadge } from '@nozle-js/react';

<PlanBadge plan="Pro" tier="pro" />
<PlanBadge plan="Free" tier="free" />
<PlanBadge plan="Enterprise" tier="enterprise" />

import { CheckoutButton } from '@nozle-js/react';

// Stripe hosted checkout (redirect)
<CheckoutButton
  planId="pro_monthly"
  label="Subscribe"
  onError={(err) => console.error(err)}
/>

// Stripe embedded checkout
<CheckoutButton
  planId="pro_monthly"
  onStripeClientSecret={(secret) => setClientSecret(secret)}
/>

// Razorpay checkout
<CheckoutButton
  planId="pro_monthly"
  razorpayKeyId="rzp_live_xxx"
  onSuccess={(paymentId) => console.log('Paid:', paymentId)}
/>

import { Checkout } from '@nozle-js/react';

<Checkout
  clientSecret="pi_xxx_secret_xxx"
  publishableKey="pk_live_xxx"
  submitLabel="Pay now"
  onSuccess={(paymentIntentId) => router.push('/success')}
  onError={(err) => toast.error(err.message)}
  onReady={() => setLoading(false)}
/>

import { useCheckout } from '@nozle-js/react';

function CustomSubmit() {
  const { confirmPayment, isProcessing, error } = useCheckout();
  return <button onClick={confirmPayment} disabled={isProcessing}>Pay</button>;
}

import { UpgradeButton } from '@nozle-js/react';

<UpgradeButton
  targetPlanId="pro_monthly"
  label="Upgrade to Pro"
  onUpgraded={() => router.refresh()}
/>

import { UpgradeModal } from '@nozle-js/react';

<UpgradeModal
  isOpen={showModal}
  targetPlanId="pro_monthly"
  customerId="cus_xxx"
  apiBaseUrl="https://api.nozle.app"
  apiKey="pk_xxx"
  onConfirm={() => setShowModal(false)}
  onCancel={() => setShowModal(false)}
/>

import { CreditTopUpButton } from '@nozle-js/react';

<CreditTopUpButton
  label="Add Credits"
  onSuccess={(amount) => toast.success(`Added $${amount} in credits`)}
  onError={(err) => toast.error(err.message)}
/>

import { CancelSubscriptionButton } from '@nozle-js/react';

<CancelSubscriptionButton
  subscriptionId="sub_xxx"
  onCancelled={() => router.push('/goodbye')}
/>

import { CANCEL_REASONS } from '@nozle-js/react';
// ["Too expensive", "Missing features", "Switching to competitor", "Not using it enough", "Other"]

import { BillingPortalProvider } from '@nozle-js/react';

<BillingPortalProvider customerId="cus_xxx" apiKey="pk_xxx">
  <PricingTable plans={plans} />
  <CheckoutButton planId="pro" />
</BillingPortalProvider>

import { useBillingPortal } from '@nozle-js/react';

const { customerId, apiKey } = useBillingPortal();

import { BillingPortal } from '@nozle-js/react';

<BillingPortal
  customerId="cus_xxx"
  usageFeatures={[
    { key: 'api_calls', label: 'API Calls', used: 8200, limit: 10000 },
    { key: 'storage', label: 'Storage (GB)', used: 3, limit: 10 },
  ]}
  onChangePlan={() => router.push('/plans')}
/>

import { CurrentPlan } from '@nozle-js/react';

<CurrentPlan
  customerId="cus_xxx"
  onChangePlan={() => router.push('/plans')}
/>

import { CreditBalance } from '@nozle-js/react';

<CreditBalance customerId="cus_xxx" currency="USD" />

import { CreditHistory } from '@nozle-js/react';

<CreditHistory
  customerId="cus_xxx"
  viewAllHref="/billing/credits"
/>

import { InvoiceList } from '@nozle-js/react';

<InvoiceList customerId="cus_xxx" />

import { PaymentMethodDisplay } from '@nozle-js/react';

<PaymentMethodDisplay
  paymentMethod={{
    brand: 'visa',
    last4: '4242',
    expMonth: 12,
    expYear: 2027,
  }}
  onUpdatePaymentMethod={() => setShowCheckout(true)}
/>

import { UsageMeter } from '@nozle-js/react';

<UsageMeter used={8200} limit={10000} label="API Calls" />
<UsageMeter used={9800} limit={10000} label="API Calls" showText={false} />

import { getUsageMeterColor } from '@nozle-js/react';

const color = getUsageMeterColor(92); // returns the warning CSS variable

import { UsageDashboard } from '@nozle-js/react';

<UsageDashboard
  features={[
    { key: 'api_calls', label: 'API Calls', used: 8200, limit: 10000 },
    { key: 'storage', label: 'Storage (GB)', used: 3, limit: 10 },
    { key: 'seats', label: 'Team Seats', used: 4, limit: 5 },
  ]}
/>

import { UsageAlert } from '@nozle-js/react';

<UsageAlert
  features={[
    { key: 'api_calls', label: 'API Calls', percentage: 92 },
    { key: 'storage', label: 'Storage', percentage: 45 },
  ]}
  threshold={80}
  upgradeHref="/plans"
/>