Skip to main content

Import

import { useProducts } from "@billingos/sdk";

Usage

function CustomPricingPage() {
  const { data, isLoading } = useProducts();

  if (isLoading) return <Spinner />;

  return (
    <div className="grid grid-cols-3 gap-4">
      {data?.products.map((product) => (
        <div key={product.id} className="border rounded p-6">
          <h3>{product.name}</h3>
          <p>{product.description}</p>
          {product.prices?.map((price) => (
            <p key={price.id}>
              ${(price.amount / 100).toFixed(2)}/{price.interval}
            </p>
          ))}
        </div>
      ))}
    </div>
  );
}

Return type

interface PricingProduct {
  id: string
  name: string
  description: string
  prices: PricingPrice[]
  features: PricingFeature[]
  isCurrentPlan: boolean
  trialDays: number
  highlighted?: boolean
}

interface PricingPrice {
  id: string
  amount: number        // In cents (e.g., 2900 = $29.00)
  currency: string      // e.g., "usd"
  interval: "month" | "year" | "week" | "day"
  intervalCount: number
}

interface PricingFeature {
  id: string
  name: string
  title: string
  type: "boolean_flag" | "usage_quota" | "numeric_limit"
  properties: Record<string, any>
}
For most use cases, the <PricingTable /> component is easier than building a custom pricing UI. Use useProducts when you need full control over the layout.