@solvapay/react 1.0.0-preview.20 → 1.0.0-preview.21

package/README.md

@@ -85,10 +85,10 @@ import { SolvaPayProvider } from '@solvapay/react'
 export default function App() {
   return (
     <SolvaPayProvider
-      createPayment={async ({ planRef, agentRef }) => {
+      createPayment={async ({ planRef, productRef }) => {
         const res = await fetch('/api/custom/payment', {
           method: 'POST',
-          body: JSON.stringify({ planRef, agentRef }),
+          body: JSON.stringify({ planRef, productRef }),
         })
         if (!res.ok) throw new Error('Failed to create payment')
         return res.json()
@@ -124,9 +124,9 @@ Headless context provider that manages purchase state, payment methods, and cust
 - `config?: SolvaPayConfig` - Configuration object (optional)
   - `config.api?` - Custom API route paths
   - `config.auth?` - Auth adapter configuration
-- `createPayment?: (params: { planRef: string; agentRef?: string }) => Promise<PaymentIntentResult>` - Custom payment creation function (optional, overrides config)
+- `createPayment?: (params: { planRef: string; productRef?: string }) => Promise<PaymentIntentResult>` - Custom payment creation function (optional, overrides config)
 - `checkPurchase?: (customerRef: string) => Promise<CustomerPurchaseData>` - Custom purchase check function (optional, overrides config)
-- `processPayment?: (params: { paymentIntentId: string; agentRef: string; planRef?: string }) => Promise<ProcessPaymentResult>` - Custom payment processing function (optional)
+- `processPayment?: (params: { paymentIntentId: string; productRef: string; planRef?: string }) => Promise<ProcessPaymentResult>` - Custom payment processing function (optional)
 - `children: React.ReactNode` - Child components
 
 **Config Options:**
@@ -146,29 +146,29 @@ interface SolvaPayConfig {
 }
 ```
 
-### PlanSelector
+### PricingSelector
 
-Component for selecting and displaying available plans.
+Component for selecting and displaying available pricing options.
 
 **Props:**
 
-- `agentRef?: string` - Agent reference to filter plans
-- `fetcher?: (agentRef: string) => Promise<Plan[]>` - Custom plan fetcher function
-- `onPlanSelect?: (plan: Plan) => void` - Callback when plan is selected
-- `renderPlan?: (plan: Plan) => React.ReactNode` - Custom plan renderer
+- `productRef?: string` - Product reference to filter pricing options
+- `fetcher?: (productRef: string) => Promise<Plan[]>` - Custom fetcher function
+- `onPlanSelect?: (plan: Plan) => void` - Callback when option is selected
+- `renderPlan?: (plan: Plan) => React.ReactNode` - Custom option renderer
 - `className?: string` - Container className
 
 **Example:**
 
 ```tsx
-import { PlanSelector, usePlans } from '@solvapay/react'
+import { PricingSelector, usePlans } from '@solvapay/react'
 
-function PlansPage() {
-  const { plans, loading } = usePlans({ agentRef: 'my-agent' })
+function PricingPage() {
+  const { plans, loading } = usePlans({ productRef: 'my-product' })
 
   return (
     <div>
-      {loading ? 'Loading...' : plans.map(plan => <div key={plan.reference}>{plan.name}</div>)}
+      {loading ? 'Loading...' : plans.map(plan => <div key={plan.reference}>{plan.price}/{plan.interval}</div>)}
     </div>
   )
 }
@@ -181,7 +181,7 @@ Payment form component using Stripe PaymentElement. Automatically handles Stripe
 **Props:**
 
 - `planRef: string` - Plan reference for the payment
-- `agentRef?: string` - Optional agent reference
+- `productRef?: string` - Optional product reference
 - `onSuccess?: (paymentIntent: PaymentIntent) => void` - Callback on successful payment
 - `onError?: (error: Error) => void` - Callback on payment error
 - `returnUrl?: string` - Return URL after payment
@@ -199,16 +199,16 @@ function CheckoutPage() {
   return (
     <PaymentForm
       planRef="pln_YOUR_PLAN"
-      agentRef="agt_YOUR_AGENT"
+      productRef="prd_YOUR_PRODUCT"
       onSuccess={() => console.log('Payment successful!')}
     />
   )
 }
 ```
 
-### PlanBadge
+### ProductBadge
 
-Displays current purchase plan with render props or className pattern.
+Displays current product subscription with render props or className pattern.
 
 **Props:**
 
@@ -219,7 +219,7 @@ Displays current purchase plan with render props or className pattern.
 **Example:**
 
 ```tsx
-<PlanBadge className="badge badge-primary" />
+<ProductBadge className="badge badge-primary" />
 ```
 
 ### PurchaseGate
@@ -228,13 +228,13 @@ Controls access to content based on purchase status.
 
 **Props:**
 
-- `requirePlan?: string` - Optional plan name to require
+- `requireProduct?: string` - Optional product name to check for an active purchase
 - `children: (props) => React.ReactNode` - Render prop function
 
 **Example:**
 
 ```tsx
-<PurchaseGate requirePlan="Pro Plan">
+<PurchaseGate requireProduct="Pro Plan">
   {({ hasAccess, loading, purchases }) => {
     if (loading) return <Loading />
     if (!hasAccess) return <Paywall />
@@ -270,7 +270,7 @@ const {
   error, // Error object if fetch failed
   refetch, // Function to refetch plans
 } = usePlans({
-  agentRef: 'my-agent', // Optional agent reference
+  productRef: 'my-product', // Optional product reference
   fetcher: customFetcher, // Optional custom fetcher function
 })
 ```

package/dist/index.cjs

@@ -23,6 +23,8 @@ __export(index_exports, {
   PaymentForm: () => PaymentForm,
   PlanBadge: () => PlanBadge,
   PlanSelector: () => PlanSelector,
+  PricingSelector: () => PricingSelector,
+  ProductBadge: () => ProductBadge,
   PurchaseGate: () => PurchaseGate,
   SolvaPayProvider: () => SolvaPayProvider,
   Spinner: () => Spinner,
@@ -454,9 +456,14 @@ var SolvaPayProvider = ({
       email: purchaseData.email,
       name: purchaseData.name,
       purchases: purchaseData.purchases,
-      hasPlan: (planName) => {
+      hasProduct: (productName) => {
         return purchaseData.purchases.some(
-          (p) => p.planName.toLowerCase() === planName.toLowerCase() && p.status === "active"
+          (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
+        );
+      },
+      hasPlan: (productName) => {
+        return purchaseData.purchases.some(
+          (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
         );
       },
       activePurchase,
@@ -977,10 +984,10 @@ var PaymentForm = ({
   ) });
 };
 
-// src/components/PlanBadge.tsx
+// src/components/ProductBadge.tsx
 var import_react6 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var PlanBadge = ({
+var ProductBadge = ({
   children,
   as: Component = "div",
   className
@@ -991,7 +998,7 @@ var PlanBadge = ({
   const lastPlanRef = (0, import_react6.useRef)(null);
   const lastLoadingRef = (0, import_react6.useRef)(true);
   const previousPurchasesRef = (0, import_react6.useRef)(purchases);
-  const currentPlanName = activePurchase?.planName || null;
+  const currentPlanName = activePurchase?.productName || null;
   const effectivePlanName = currentPlanName;
   (0, import_react6.useEffect)(() => {
     if (!loading && !hasLoadedOnce) {
@@ -1044,17 +1051,19 @@ var PlanBadge = ({
       role: "status",
       "aria-live": "polite",
       "aria-busy": loading,
-      "aria-label": `Current plan: ${planToDisplay}`,
+      "aria-label": `Current product: ${planToDisplay}`,
       children: planToDisplay
     }
   );
 };
+var PlanBadge = ProductBadge;
 
 // src/components/PurchaseGate.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var PurchaseGate = ({ requirePlan, requireProduct, children }) => {
-  const { purchases, loading, hasPlan } = usePurchase();
-  const hasAccess = requirePlan ? hasPlan(requirePlan) : requireProduct ? purchases.some((p) => p.status === "active" && (p.productName === requireProduct || p.productReference === requireProduct)) : purchases.some((p) => p.status === "active");
+  const { purchases, loading, hasProduct } = usePurchase();
+  const productToCheck = requireProduct || requirePlan;
+  const hasAccess = productToCheck ? hasProduct(productToCheck) : purchases.some((p) => p.status === "active");
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: children({
     hasAccess,
     purchases,
@@ -1062,7 +1071,7 @@ var PurchaseGate = ({ requirePlan, requireProduct, children }) => {
   }) });
 };
 
-// src/components/PlanSelector.tsx
+// src/components/PricingSelector.tsx
 var import_react8 = require("react");
 
 // src/hooks/usePlans.ts
@@ -1197,9 +1206,9 @@ function usePlans(options) {
   };
 }
 
-// src/components/PlanSelector.tsx
+// src/components/PricingSelector.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var PlanSelector = ({
+var PricingSelector = ({
   productRef,
   fetcher,
   filter,
@@ -1217,8 +1226,8 @@ var PlanSelector = ({
   });
   const { plans } = plansHook;
   const isPaidPlan = (0, import_react8.useCallback)(
-    (planName) => {
-      const plan = plans.find((p) => p.name === planName);
+    (planRef) => {
+      const plan = plans.find((p) => p.reference === planRef);
       return plan ? (plan.price ?? 0) > 0 && !plan.isFreeTier : true;
     },
     [plans]
@@ -1230,8 +1239,8 @@ var PlanSelector = ({
     )[0] || null;
   }, [purchases]);
   const isCurrentPlan = (0, import_react8.useCallback)(
-    (planName) => {
-      return activePurchase?.planName === planName;
+    (planRef) => {
+      return activePurchase?.planSnapshot?.reference === planRef;
     },
     [activePurchase]
   );
@@ -1242,6 +1251,7 @@ var PlanSelector = ({
     isCurrentPlan
   }) });
 };
+var PlanSelector = PricingSelector;
 
 // src/hooks/usePurchaseStatus.ts
 var import_react9 = require("react");
@@ -1291,6 +1301,8 @@ function usePurchaseStatus() {
   PaymentForm,
   PlanBadge,
   PlanSelector,
+  PricingSelector,
+  ProductBadge,
   PurchaseGate,
   SolvaPayProvider,
   Spinner,

package/dist/index.d.cts

@@ -11,8 +11,7 @@ export { defaultAuthAdapter } from './adapters/auth.cjs';
 interface PurchaseInfo {
     reference: string;
     productName: string;
-    productReference: string;
-    planName: string;
+    productReference?: string;
     status: string;
     startDate: string;
     endDate?: string;
@@ -25,11 +24,22 @@ interface PurchaseInfo {
     nextBillingDate?: string;
     billingCycle?: string;
     transactionId?: string;
+    planSnapshot?: {
+        reference?: string;
+        meterId?: string;
+        limit?: number;
+        freeUnits?: number;
+        pricePerUnit?: number;
+        planType?: string;
+        billingCycle?: string | null;
+        features?: Record<string, unknown> | null;
+    };
     usage?: {
         used: number;
-        quota: number | null;
-        unit: string;
-        remaining: number | null;
+        overageUnits?: number;
+        overageCost?: number;
+        periodStart?: string;
+        periodEnd?: string;
     };
 }
 interface CustomerPurchaseData {
@@ -50,7 +60,9 @@ interface PurchaseStatus {
     email?: string;
     name?: string;
     purchases: PurchaseInfo[];
-    hasPlan: (planName: string) => boolean;
+    hasProduct: (productName: string) => boolean;
+    /** @deprecated Use hasProduct instead */
+    hasPlan: (productName: string) => boolean;
     /**
      * Primary active purchase (paid or free) - most recent purchase with status === 'active'
      * Backend keeps purchases as 'active' until expiration, even when cancelled.
@@ -174,7 +186,7 @@ interface SolvaPayProviderProps {
     }) => Promise<ProcessPaymentResult>;
     children: React.ReactNode;
 }
-interface PlanBadgeProps {
+interface ProductBadgeProps {
     children?: (props: {
         purchases: PurchaseInfo[];
         loading: boolean;
@@ -186,7 +198,10 @@ interface PlanBadgeProps {
         purchases: PurchaseInfo[];
     }) => string);
 }
+/** @deprecated Use ProductBadgeProps instead */
+type PlanBadgeProps = ProductBadgeProps;
 interface PurchaseGateProps {
+    /** @deprecated Use requireProduct instead */
     requirePlan?: string;
     requireProduct?: string;
     children: (props: {
@@ -207,8 +222,6 @@ interface PaymentError extends Error {
  */
 interface Plan {
     reference: string;
-    name: string;
-    description?: string;
     price?: number;
     currency?: string;
     interval?: string;
@@ -255,9 +268,9 @@ interface UsePlansReturn {
     refetch: () => Promise<void>;
 }
 /**
- * Props for headless PlanSelector component
+ * Props for headless PricingSelector component
  */
-interface PlanSelectorProps {
+interface PricingSelectorProps {
     /**
      * Product reference to fetch plans for
      */
@@ -283,10 +296,12 @@ interface PlanSelectorProps {
      */
     children: (props: UsePlansReturn & {
         purchases: PurchaseInfo[];
-        isPaidPlan: (planName: string) => boolean;
-        isCurrentPlan: (planName: string) => boolean;
+        isPaidPlan: (planRef: string) => boolean;
+        isCurrentPlan: (planRef: string) => boolean;
     }) => React.ReactNode;
 }
+/** @deprecated Use PricingSelectorProps instead */
+type PlanSelectorProps = PricingSelectorProps;
 /**
  * Return type for usePurchaseStatus hook
  *
@@ -492,33 +507,35 @@ declare const SolvaPayProvider: React$1.FC<SolvaPayProviderProps>;
 declare const PaymentForm: React$1.FC<PaymentFormProps>;
 
 /**
- * Headless Plan Badge Component
+ * Headless Product Badge Component
  *
  * Displays purchase status with complete styling control.
  * Supports render props, custom components, or className patterns.
  *
  * Prevents flickering by hiding the badge during initial load and when no purchase exists.
  * Shows the badge once loading completes AND an active purchase exists (paid or free).
- * Badge only updates when the plan name actually changes (prevents unnecessary re-renders).
+ * Badge only updates when the product name actually changes (prevents unnecessary re-renders).
  *
- * Displays the primary active purchase (paid or free) to show current plan status.
+ * Displays the primary active purchase (paid or free) to show current product status.
  *
  * @example
  * ```tsx
  * // Render prop pattern
- * <PlanBadge>
+ * <ProductBadge>
  *   {({ purchases, loading, displayPlan, shouldShow }) => (
  *     shouldShow ? (
  *       <div>{displayPlan}</div>
  *     ) : null
  *   )}
- * </PlanBadge>
+ * </ProductBadge>
  *
  * //ClassName pattern
- * <PlanBadge className="badge badge-primary" />
+ * <ProductBadge className="badge badge-primary" />
  * ```
  */
-declare const PlanBadge: React$1.FC<PlanBadgeProps>;
+declare const ProductBadge: React$1.FC<ProductBadgeProps>;
+/** @deprecated Use ProductBadge instead */
+declare const PlanBadge: React$1.FC<ProductBadgeProps>;
 
 /**
  * Headless Purchase Gate Component
@@ -528,7 +545,7 @@ declare const PlanBadge: React$1.FC<PlanBadgeProps>;
  *
  * @example
  * ```tsx
- * <PurchaseGate requirePlan="Pro Plan">
+ * <PurchaseGate requireProduct="Pro Plan">
  *   {({ hasAccess, loading }) => {
  *     if (loading) return <Skeleton />;
  *     if (!hasAccess) return <Paywall />;
@@ -540,20 +557,20 @@ declare const PlanBadge: React$1.FC<PlanBadgeProps>;
 declare const PurchaseGate: React$1.FC<PurchaseGateProps>;
 
 /**
- * Headless Plan Selector Component
+ * Headless Pricing Selector Component
  *
- * Provides plan selection logic with complete styling control via render props.
+ * Provides pricing selection logic with complete styling control via render props.
  * Integrates plan fetching, purchase status, and selection state management.
  *
  * Features:
- * - Fetches and manages plans
- * - Tracks selected plan
- * - Provides helpers for checking if plan is current/paid
+ * - Fetches and manages pricing options
+ * - Tracks selected option
+ * - Provides helpers for checking if option is current/paid
  * - Integrates with purchase context
  *
  * @example
  * ```tsx
- * <PlanSelector
+ * <PricingSelector
  *   productRef="prd_123"
  *   fetcher={async (productRef) => {
  *     const res = await fetch(`/api/list-plans?productRef=${productRef}`);
@@ -566,25 +583,27 @@ declare const PurchaseGate: React$1.FC<PurchaseGateProps>;
  *   {({ plans, selectedPlan, setSelectedPlanIndex, loading, isPaidPlan, isCurrentPlan }) => (
  *     <div>
  *       {loading ? (
- *         <div>Loading plans...</div>
+ *         <div>Loading...</div>
  *       ) : (
  *         plans.map((plan, index) => (
  *           <button
  *             key={plan.reference}
  *             onClick={() => setSelectedPlanIndex(index)}
- *             disabled={!isPaidPlan(plan.name)}
+ *             disabled={!isPaidPlan(plan.reference)}
  *           >
- *             {plan.name} - ${plan.price}
- *             {isCurrentPlan(plan.name) && ' (Current)'}
+ *             ${plan.price}/{plan.interval}
+ *             {isCurrentPlan(plan.reference) && ' (Current)'}
  *           </button>
  *         ))
  *       )}
  *     </div>
  *   )}
- * </PlanSelector>
+ * </PricingSelector>
  * ```
  */
-declare const PlanSelector: React$1.FC<PlanSelectorProps>;
+declare const PricingSelector: React$1.FC<PricingSelectorProps>;
+/** @deprecated Use PricingSelector instead */
+declare const PlanSelector: React$1.FC<PricingSelectorProps>;
 
 /**
  * SVG-based spinner component using CSS animations
@@ -905,4 +924,4 @@ declare function getPrimaryPurchase(purchases: PurchaseInfo[]): PurchaseInfo | n
  */
 declare function isPaidPurchase(purchase: PurchaseInfo): boolean;
 
-export { AuthAdapter, type CustomerInfo, type CustomerPurchaseData, type PaymentError, PaymentForm, type PaymentFormProps, type PaymentIntentResult, type Plan, PlanBadge, type PlanBadgeProps, PlanSelector, type PlanSelectorProps, PurchaseGate, type PurchaseGateProps, type PurchaseInfo, type PurchaseStatus, type PurchaseStatusReturn, type PurchaseStatusValue, type SolvaPayConfig, type SolvaPayContextValue, SolvaPayProvider, type SolvaPayProviderProps, Spinner, StripePaymentFormWrapper, type UsePlansOptions, type UsePlansReturn, filterPurchases, getActivePurchases, getCancelledPurchasesWithEndDate, getMostRecentPurchase, getPrimaryPurchase, isPaidPurchase, useCheckout, useCustomer, usePlans, usePurchase, usePurchaseStatus, useSolvaPay };
+export { AuthAdapter, type CustomerInfo, type CustomerPurchaseData, type PaymentError, PaymentForm, type PaymentFormProps, type PaymentIntentResult, type Plan, PlanBadge, type PlanBadgeProps, PlanSelector, type PlanSelectorProps, PricingSelector, type PricingSelectorProps, ProductBadge, type ProductBadgeProps, PurchaseGate, type PurchaseGateProps, type PurchaseInfo, type PurchaseStatus, type PurchaseStatusReturn, type PurchaseStatusValue, type SolvaPayConfig, type SolvaPayContextValue, SolvaPayProvider, type SolvaPayProviderProps, Spinner, StripePaymentFormWrapper, type UsePlansOptions, type UsePlansReturn, filterPurchases, getActivePurchases, getCancelledPurchasesWithEndDate, getMostRecentPurchase, getPrimaryPurchase, isPaidPurchase, useCheckout, useCustomer, usePlans, usePurchase, usePurchaseStatus, useSolvaPay };

package/dist/index.d.ts

@@ -11,8 +11,7 @@ export { defaultAuthAdapter } from './adapters/auth.js';
 interface PurchaseInfo {
     reference: string;
     productName: string;
-    productReference: string;
-    planName: string;
+    productReference?: string;
     status: string;
     startDate: string;
     endDate?: string;
@@ -25,11 +24,22 @@ interface PurchaseInfo {
     nextBillingDate?: string;
     billingCycle?: string;
     transactionId?: string;
+    planSnapshot?: {
+        reference?: string;
+        meterId?: string;
+        limit?: number;
+        freeUnits?: number;
+        pricePerUnit?: number;
+        planType?: string;
+        billingCycle?: string | null;
+        features?: Record<string, unknown> | null;
+    };
     usage?: {
         used: number;
-        quota: number | null;
-        unit: string;
-        remaining: number | null;
+        overageUnits?: number;
+        overageCost?: number;
+        periodStart?: string;
+        periodEnd?: string;
     };
 }
 interface CustomerPurchaseData {
@@ -50,7 +60,9 @@ interface PurchaseStatus {
     email?: string;
     name?: string;
     purchases: PurchaseInfo[];
-    hasPlan: (planName: string) => boolean;
+    hasProduct: (productName: string) => boolean;
+    /** @deprecated Use hasProduct instead */
+    hasPlan: (productName: string) => boolean;
     /**
      * Primary active purchase (paid or free) - most recent purchase with status === 'active'
      * Backend keeps purchases as 'active' until expiration, even when cancelled.
@@ -174,7 +186,7 @@ interface SolvaPayProviderProps {
     }) => Promise<ProcessPaymentResult>;
     children: React.ReactNode;
 }
-interface PlanBadgeProps {
+interface ProductBadgeProps {
     children?: (props: {
         purchases: PurchaseInfo[];
         loading: boolean;
@@ -186,7 +198,10 @@ interface PlanBadgeProps {
         purchases: PurchaseInfo[];
     }) => string);
 }
+/** @deprecated Use ProductBadgeProps instead */
+type PlanBadgeProps = ProductBadgeProps;
 interface PurchaseGateProps {
+    /** @deprecated Use requireProduct instead */
     requirePlan?: string;
     requireProduct?: string;
     children: (props: {
@@ -207,8 +222,6 @@ interface PaymentError extends Error {
  */
 interface Plan {
     reference: string;
-    name: string;
-    description?: string;
     price?: number;
     currency?: string;
     interval?: string;
@@ -255,9 +268,9 @@ interface UsePlansReturn {
     refetch: () => Promise<void>;
 }
 /**
- * Props for headless PlanSelector component
+ * Props for headless PricingSelector component
  */
-interface PlanSelectorProps {
+interface PricingSelectorProps {
     /**
      * Product reference to fetch plans for
      */
@@ -283,10 +296,12 @@ interface PlanSelectorProps {
      */
     children: (props: UsePlansReturn & {
         purchases: PurchaseInfo[];
-        isPaidPlan: (planName: string) => boolean;
-        isCurrentPlan: (planName: string) => boolean;
+        isPaidPlan: (planRef: string) => boolean;
+        isCurrentPlan: (planRef: string) => boolean;
     }) => React.ReactNode;
 }
+/** @deprecated Use PricingSelectorProps instead */
+type PlanSelectorProps = PricingSelectorProps;
 /**
  * Return type for usePurchaseStatus hook
  *
@@ -492,33 +507,35 @@ declare const SolvaPayProvider: React$1.FC<SolvaPayProviderProps>;
 declare const PaymentForm: React$1.FC<PaymentFormProps>;
 
 /**
- * Headless Plan Badge Component
+ * Headless Product Badge Component
  *
  * Displays purchase status with complete styling control.
  * Supports render props, custom components, or className patterns.
  *
  * Prevents flickering by hiding the badge during initial load and when no purchase exists.
  * Shows the badge once loading completes AND an active purchase exists (paid or free).
- * Badge only updates when the plan name actually changes (prevents unnecessary re-renders).
+ * Badge only updates when the product name actually changes (prevents unnecessary re-renders).
  *
- * Displays the primary active purchase (paid or free) to show current plan status.
+ * Displays the primary active purchase (paid or free) to show current product status.
  *
  * @example
  * ```tsx
  * // Render prop pattern
- * <PlanBadge>
+ * <ProductBadge>
  *   {({ purchases, loading, displayPlan, shouldShow }) => (
  *     shouldShow ? (
  *       <div>{displayPlan}</div>
  *     ) : null
  *   )}
- * </PlanBadge>
+ * </ProductBadge>
  *
  * //ClassName pattern
- * <PlanBadge className="badge badge-primary" />
+ * <ProductBadge className="badge badge-primary" />
  * ```
  */
-declare const PlanBadge: React$1.FC<PlanBadgeProps>;
+declare const ProductBadge: React$1.FC<ProductBadgeProps>;
+/** @deprecated Use ProductBadge instead */
+declare const PlanBadge: React$1.FC<ProductBadgeProps>;
 
 /**
  * Headless Purchase Gate Component
@@ -528,7 +545,7 @@ declare const PlanBadge: React$1.FC<PlanBadgeProps>;
  *
  * @example
  * ```tsx
- * <PurchaseGate requirePlan="Pro Plan">
+ * <PurchaseGate requireProduct="Pro Plan">
  *   {({ hasAccess, loading }) => {
  *     if (loading) return <Skeleton />;
  *     if (!hasAccess) return <Paywall />;
@@ -540,20 +557,20 @@ declare const PlanBadge: React$1.FC<PlanBadgeProps>;
 declare const PurchaseGate: React$1.FC<PurchaseGateProps>;
 
 /**
- * Headless Plan Selector Component
+ * Headless Pricing Selector Component
  *
- * Provides plan selection logic with complete styling control via render props.
+ * Provides pricing selection logic with complete styling control via render props.
  * Integrates plan fetching, purchase status, and selection state management.
  *
  * Features:
- * - Fetches and manages plans
- * - Tracks selected plan
- * - Provides helpers for checking if plan is current/paid
+ * - Fetches and manages pricing options
+ * - Tracks selected option
+ * - Provides helpers for checking if option is current/paid
  * - Integrates with purchase context
  *
  * @example
  * ```tsx
- * <PlanSelector
+ * <PricingSelector
  *   productRef="prd_123"
  *   fetcher={async (productRef) => {
  *     const res = await fetch(`/api/list-plans?productRef=${productRef}`);
@@ -566,25 +583,27 @@ declare const PurchaseGate: React$1.FC<PurchaseGateProps>;
  *   {({ plans, selectedPlan, setSelectedPlanIndex, loading, isPaidPlan, isCurrentPlan }) => (
  *     <div>
  *       {loading ? (
- *         <div>Loading plans...</div>
+ *         <div>Loading...</div>
  *       ) : (
  *         plans.map((plan, index) => (
  *           <button
  *             key={plan.reference}
  *             onClick={() => setSelectedPlanIndex(index)}
- *             disabled={!isPaidPlan(plan.name)}
+ *             disabled={!isPaidPlan(plan.reference)}
  *           >
- *             {plan.name} - ${plan.price}
- *             {isCurrentPlan(plan.name) && ' (Current)'}
+ *             ${plan.price}/{plan.interval}
+ *             {isCurrentPlan(plan.reference) && ' (Current)'}
  *           </button>
  *         ))
  *       )}
  *     </div>
  *   )}
- * </PlanSelector>
+ * </PricingSelector>
  * ```
  */
-declare const PlanSelector: React$1.FC<PlanSelectorProps>;
+declare const PricingSelector: React$1.FC<PricingSelectorProps>;
+/** @deprecated Use PricingSelector instead */
+declare const PlanSelector: React$1.FC<PricingSelectorProps>;
 
 /**
  * SVG-based spinner component using CSS animations
@@ -905,4 +924,4 @@ declare function getPrimaryPurchase(purchases: PurchaseInfo[]): PurchaseInfo | n
  */
 declare function isPaidPurchase(purchase: PurchaseInfo): boolean;
 
-export { AuthAdapter, type CustomerInfo, type CustomerPurchaseData, type PaymentError, PaymentForm, type PaymentFormProps, type PaymentIntentResult, type Plan, PlanBadge, type PlanBadgeProps, PlanSelector, type PlanSelectorProps, PurchaseGate, type PurchaseGateProps, type PurchaseInfo, type PurchaseStatus, type PurchaseStatusReturn, type PurchaseStatusValue, type SolvaPayConfig, type SolvaPayContextValue, SolvaPayProvider, type SolvaPayProviderProps, Spinner, StripePaymentFormWrapper, type UsePlansOptions, type UsePlansReturn, filterPurchases, getActivePurchases, getCancelledPurchasesWithEndDate, getMostRecentPurchase, getPrimaryPurchase, isPaidPurchase, useCheckout, useCustomer, usePlans, usePurchase, usePurchaseStatus, useSolvaPay };
+export { AuthAdapter, type CustomerInfo, type CustomerPurchaseData, type PaymentError, PaymentForm, type PaymentFormProps, type PaymentIntentResult, type Plan, PlanBadge, type PlanBadgeProps, PlanSelector, type PlanSelectorProps, PricingSelector, type PricingSelectorProps, ProductBadge, type ProductBadgeProps, PurchaseGate, type PurchaseGateProps, type PurchaseInfo, type PurchaseStatus, type PurchaseStatusReturn, type PurchaseStatusValue, type SolvaPayConfig, type SolvaPayContextValue, SolvaPayProvider, type SolvaPayProviderProps, Spinner, StripePaymentFormWrapper, type UsePlansOptions, type UsePlansReturn, filterPurchases, getActivePurchases, getCancelledPurchasesWithEndDate, getMostRecentPurchase, getPrimaryPurchase, isPaidPurchase, useCheckout, useCustomer, usePlans, usePurchase, usePurchaseStatus, useSolvaPay };

package/dist/index.js

@@ -391,9 +391,14 @@ var SolvaPayProvider = ({
       email: purchaseData.email,
       name: purchaseData.name,
       purchases: purchaseData.purchases,
-      hasPlan: (planName) => {
+      hasProduct: (productName) => {
         return purchaseData.purchases.some(
-          (p) => p.planName.toLowerCase() === planName.toLowerCase() && p.status === "active"
+          (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
+        );
+      },
+      hasPlan: (productName) => {
+        return purchaseData.purchases.some(
+          (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
         );
       },
       activePurchase,
@@ -914,10 +919,10 @@ var PaymentForm = ({
   ) });
 };
 
-// src/components/PlanBadge.tsx
+// src/components/ProductBadge.tsx
 import { useState as useState5, useEffect as useEffect3, useRef as useRef4 } from "react";
 import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
-var PlanBadge = ({
+var ProductBadge = ({
   children,
   as: Component = "div",
   className
@@ -928,7 +933,7 @@ var PlanBadge = ({
   const lastPlanRef = useRef4(null);
   const lastLoadingRef = useRef4(true);
   const previousPurchasesRef = useRef4(purchases);
-  const currentPlanName = activePurchase?.planName || null;
+  const currentPlanName = activePurchase?.productName || null;
   const effectivePlanName = currentPlanName;
   useEffect3(() => {
     if (!loading && !hasLoadedOnce) {
@@ -981,17 +986,19 @@ var PlanBadge = ({
       role: "status",
       "aria-live": "polite",
       "aria-busy": loading,
-      "aria-label": `Current plan: ${planToDisplay}`,
+      "aria-label": `Current product: ${planToDisplay}`,
       children: planToDisplay
     }
   );
 };
+var PlanBadge = ProductBadge;
 
 // src/components/PurchaseGate.tsx
 import { Fragment as Fragment3, jsx as jsx6 } from "react/jsx-runtime";
 var PurchaseGate = ({ requirePlan, requireProduct, children }) => {
-  const { purchases, loading, hasPlan } = usePurchase();
-  const hasAccess = requirePlan ? hasPlan(requirePlan) : requireProduct ? purchases.some((p) => p.status === "active" && (p.productName === requireProduct || p.productReference === requireProduct)) : purchases.some((p) => p.status === "active");
+  const { purchases, loading, hasProduct } = usePurchase();
+  const productToCheck = requireProduct || requirePlan;
+  const hasAccess = productToCheck ? hasProduct(productToCheck) : purchases.some((p) => p.status === "active");
   return /* @__PURE__ */ jsx6(Fragment3, { children: children({
     hasAccess,
     purchases,
@@ -999,7 +1006,7 @@ var PurchaseGate = ({ requirePlan, requireProduct, children }) => {
   }) });
 };
 
-// src/components/PlanSelector.tsx
+// src/components/PricingSelector.tsx
 import { useCallback as useCallback5, useMemo as useMemo4 } from "react";
 
 // src/hooks/usePlans.ts
@@ -1134,9 +1141,9 @@ function usePlans(options) {
   };
 }
 
-// src/components/PlanSelector.tsx
+// src/components/PricingSelector.tsx
 import { Fragment as Fragment4, jsx as jsx7 } from "react/jsx-runtime";
-var PlanSelector = ({
+var PricingSelector = ({
   productRef,
   fetcher,
   filter,
@@ -1154,8 +1161,8 @@ var PlanSelector = ({
   });
   const { plans } = plansHook;
   const isPaidPlan = useCallback5(
-    (planName) => {
-      const plan = plans.find((p) => p.name === planName);
+    (planRef) => {
+      const plan = plans.find((p) => p.reference === planRef);
       return plan ? (plan.price ?? 0) > 0 && !plan.isFreeTier : true;
     },
     [plans]
@@ -1167,8 +1174,8 @@ var PlanSelector = ({
     )[0] || null;
   }, [purchases]);
   const isCurrentPlan = useCallback5(
-    (planName) => {
-      return activePurchase?.planName === planName;
+    (planRef) => {
+      return activePurchase?.planSnapshot?.reference === planRef;
     },
     [activePurchase]
   );
@@ -1179,6 +1186,7 @@ var PlanSelector = ({
     isCurrentPlan
   }) });
 };
+var PlanSelector = PricingSelector;
 
 // src/hooks/usePurchaseStatus.ts
 import { useMemo as useMemo5, useCallback as useCallback6 } from "react";
@@ -1227,6 +1235,8 @@ export {
   PaymentForm,
   PlanBadge,
   PlanSelector,
+  PricingSelector,
+  ProductBadge,
   PurchaseGate,
   SolvaPayProvider,
   Spinner,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solvapay/react",
-  "version": "1.0.0-preview.20",
+  "version": "1.0.0-preview.21",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -48,7 +48,7 @@
     "jsdom": "^23.0.1",
     "typescript": "^5.5.4",
     "vitest": "^2.0.5",
-    "@solvapay/server": "1.0.0-preview.20",
+    "@solvapay/server": "1.0.0-preview.21",
     "@solvapay/test-utils": "0.0.0"
   },
   "scripts": {