@solvapay/react 1.0.8-preview.4 → 1.0.8-preview.6

package/README.md

@@ -13,6 +13,57 @@ pnpm add @solvapay/react
 - `react` ^18.2.0 || ^19.0.0
 - `react-dom` ^18.2.0 || ^19.0.0
 
+## Tailwind setup
+
+SolvaPay primitives ship plain CSS. They work with Tailwind v3 and v4
+identically. Import `@solvapay/react/styles.css` **after** your Tailwind
+entry so the SolvaPay rules resolve above preflight.
+
+### Tailwind v4 (recommended for new projects)
+
+`src/index.css`:
+
+```css
+@import "tailwindcss";
+@import "@solvapay/react/styles.css";
+```
+
+No `tailwind.config.ts` needed. Theme via `@theme` block if desired.
+
+### Tailwind v3 (Lovable, older projects)
+
+`tailwind.config.ts`:
+
+```ts
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: { extend: {} },
+  plugins: [],
+} satisfies Config
+```
+
+`src/index.css`:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import "@solvapay/react/styles.css";
+```
+
+No `content[]` entry for `@solvapay/react` is needed — primitives don't ship
+utility classes. `data-[state=*]:` variants work natively in v3.3+.
+
+### CSS loading order
+
+Always import `@solvapay/react/styles.css` **after** `@tailwind utilities`
+(v3) or `@import "tailwindcss"` (v4). SolvaPay rules are unlayered; they beat
+Tailwind's preflight when loaded last. See
+[`examples/spa-checkout/src/index.css`](../../examples/spa-checkout/src/index.css)
+for the canonical demonstration.
+
 ## Quick Start
 
 ### Zero-Config Usage (Recommended)
@@ -344,23 +395,48 @@ Displays current product subscription with render props or className pattern.
 
 ### PurchaseGate
 
-Controls access to content based on purchase status.
+Controls access to content based on purchase status. Uses a compound
+primitive API (`PurchaseGate.Root`, `.Allowed`, `.Blocked`, `.Loading`,
+`.Error`). Matching is by stable reference — `productRef` (`prd_*`) and/or
+`planRef` (`pln_*`) — never by product or plan name.
 
-**Props:**
+**Root props:**
 
-- `requireProduct?: string` - Optional product name to check for an active purchase
-- `children: (props) => React.ReactNode` - Render prop function
+- `productRef?: string` - Require an active purchase for this product
+- `planRef?: string` - Require an active purchase for this specific plan
+- `asChild?: boolean` - Merge onto the consumer element via `Slot`
 
-**Example:**
+Matching precedence:
+
+- If neither is set, any `status === 'active'` purchase allows access
+- If only one is set, that field must match on an active purchase
+- If both are set, both must match on the **same** active purchase (AND)
+
+**Example — product-level gating:**
 
 ```tsx
-<PurchaseGate requireProduct="Pro Plan">
-  {({ hasAccess, loading, purchases }) => {
-    if (loading) return <Loading />
-    if (!hasAccess) return <Paywall />
-    return <PremiumContent />
-  }}
-</PurchaseGate>
+<PurchaseGate.Root productRef="prd_widget">
+  <PurchaseGate.Loading>Loading…</PurchaseGate.Loading>
+  <PurchaseGate.Allowed>
+    <PremiumContent />
+  </PurchaseGate.Allowed>
+  <PurchaseGate.Blocked>
+    <Paywall />
+  </PurchaseGate.Blocked>
+</PurchaseGate.Root>
+```
+
+**Example — plan-level gating:**
+
+```tsx
+<PurchaseGate.Root planRef="pln_premium">
+  <PurchaseGate.Allowed>
+    <PremiumOnlyFeature />
+  </PurchaseGate.Allowed>
+  <PurchaseGate.Blocked>
+    <UpgradePrompt />
+  </PurchaseGate.Blocked>
+</PurchaseGate.Root>
 ```
 
 ## Hooks
@@ -375,8 +451,15 @@ const {
   loading, // Loading state
   hasPaidPurchase, // Boolean: has any paid purchase
   activePurchase, // Most recent active purchase
+  hasPurchase, // (criteria?: { productRef?, planRef? }) => boolean — predicate matching the PurchaseGate.Root shape
   refetch, // Function to refetch purchases
 } = usePurchase()
+
+// Examples — criteria-based checks:
+hasPurchase() // any active purchase
+hasPurchase({ productRef: 'prd_widget' }) // any active purchase for this product
+hasPurchase({ planRef: 'pln_premium' }) // any active purchase for this specific plan
+hasPurchase({ productRef: 'prd_widget', planRef: 'pln_premium' }) // both must match the same active purchase
 ```
 
 ### usePlans

package/dist/{CancelPlanButton-f56UlQN-.d.ts → CancelPlanButton-BKH_yv1d.d.ts}

@@ -315,9 +315,18 @@ interface PurchaseStatus {
     email?: string;
     name?: string;
     purchases: PurchaseInfo[];
-    hasProduct: (productName: string) => boolean;
-    /** @deprecated Use hasProduct instead */
-    hasPlan: (productName: string) => boolean;
+    /**
+     * Check if the user has an active purchase matching the given criteria.
+     *
+     * - No criteria: any active purchase
+     * - `productRef` only: any active purchase for that product (any plan)
+     * - `planRef` only: any active purchase for that specific plan
+     * - Both: both must match on the same active purchase (AND)
+     */
+    hasPurchase: (criteria?: {
+        productRef?: string;
+        planRef?: string;
+    }) => boolean;
     /**
      * Primary active purchase (paid or free) - most recent purchase with status === 'active'
      * Backend keeps purchases as 'active' until expiration, even when cancelled.
@@ -908,9 +917,10 @@ type PurchaseGateContextValue = {
     error: Error | null;
 };
 declare const PurchaseGateRoot: React$1.ForwardRefExoticComponent<{
-    /** @deprecated Use `requireProduct`. */
-    requirePlan?: string;
-    requireProduct?: string;
+    /** Require an active purchase for this product (e.g. "prd_abc"). */
+    productRef?: string;
+    /** Require an active purchase for this specific plan (e.g. "pln_premium"). */
+    planRef?: string;
     asChild?: boolean;
     children?: React$1.ReactNode;
 } & Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -928,9 +938,10 @@ declare const PurchaseGateError: React$1.ForwardRefExoticComponent<React$1.HTMLA
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const PurchaseGate: {
     readonly Root: React$1.ForwardRefExoticComponent<{
-        /** @deprecated Use `requireProduct`. */
-        requirePlan?: string;
-        requireProduct?: string;
+        /** Require an active purchase for this product (e.g. "prd_abc"). */
+        productRef?: string;
+        /** Require an active purchase for this specific plan (e.g. "pln_premium"). */
+        planRef?: string;
         asChild?: boolean;
         children?: React$1.ReactNode;
     } & Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & React$1.RefAttributes<HTMLDivElement>>;

package/dist/{CancelPlanButton-CieT9swn.d.cts → CancelPlanButton-DQXUTHmF.d.cts}

@@ -315,9 +315,18 @@ interface PurchaseStatus {
     email?: string;
     name?: string;
     purchases: PurchaseInfo[];
-    hasProduct: (productName: string) => boolean;
-    /** @deprecated Use hasProduct instead */
-    hasPlan: (productName: string) => boolean;
+    /**
+     * Check if the user has an active purchase matching the given criteria.
+     *
+     * - No criteria: any active purchase
+     * - `productRef` only: any active purchase for that product (any plan)
+     * - `planRef` only: any active purchase for that specific plan
+     * - Both: both must match on the same active purchase (AND)
+     */
+    hasPurchase: (criteria?: {
+        productRef?: string;
+        planRef?: string;
+    }) => boolean;
     /**
      * Primary active purchase (paid or free) - most recent purchase with status === 'active'
      * Backend keeps purchases as 'active' until expiration, even when cancelled.
@@ -908,9 +917,10 @@ type PurchaseGateContextValue = {
     error: Error | null;
 };
 declare const PurchaseGateRoot: React$1.ForwardRefExoticComponent<{
-    /** @deprecated Use `requireProduct`. */
-    requirePlan?: string;
-    requireProduct?: string;
+    /** Require an active purchase for this product (e.g. "prd_abc"). */
+    productRef?: string;
+    /** Require an active purchase for this specific plan (e.g. "pln_premium"). */
+    planRef?: string;
     asChild?: boolean;
     children?: React$1.ReactNode;
 } & Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -928,9 +938,10 @@ declare const PurchaseGateError: React$1.ForwardRefExoticComponent<React$1.HTMLA
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const PurchaseGate: {
     readonly Root: React$1.ForwardRefExoticComponent<{
-        /** @deprecated Use `requireProduct`. */
-        requirePlan?: string;
-        requireProduct?: string;
+        /** Require an active purchase for this product (e.g. "prd_abc"). */
+        productRef?: string;
+        /** Require an active purchase for this specific plan (e.g. "pln_premium"). */
+        planRef?: string;
         asChild?: boolean;
         children?: React$1.ReactNode;
     } & Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & React$1.RefAttributes<HTMLDivElement>>;

package/dist/{chunk-MOP3ZBGC.js → chunk-5FZBOPIW.js}

@@ -748,14 +748,11 @@ var SolvaPayProvider = ({
       email: purchaseData.email,
       name: purchaseData.name,
       purchases: purchaseData.purchases,
-      hasProduct: (productName) => {
+      hasPurchase: (criteria) => {
+        const productRef = criteria?.productRef;
+        const planRef = criteria?.planRef;
         return purchaseData.purchases.some(
-          (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
-        );
-      },
-      hasPlan: (productName) => {
-        return purchaseData.purchases.some(
-          (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
+          (p) => p.status === "active" && (!productRef || p.productRef === productRef) && (!planRef || p.planRef === planRef)
         );
       },
       activePurchase,
@@ -1969,6 +1966,13 @@ async function confirmPayment(input) {
       if (!paymentElement) {
         return { status: "error", message: copy.errors.cardElementMissing };
       }
+      const { error: submitError } = await elements.submit();
+      if (submitError) {
+        return {
+          status: "error",
+          message: submitError.message || copy.errors.paymentUnexpected
+        };
+      }
       const { error: error2, paymentIntent: paymentIntent2 } = await stripe.confirmPayment({
         elements,
         clientSecret,
@@ -3214,6 +3218,14 @@ var Inner = ({
     }
     setError(null);
     setIsProcessing(true);
+    const { error: submitError } = await elements.submit();
+    if (submitError) {
+      const msg = submitError.message || copy.errors.paymentUnexpected;
+      setError(msg);
+      setIsProcessing(false);
+      onError?.(new Error(msg));
+      return;
+    }
     const { error: confirmError, paymentIntent } = await stripe.confirmPayment({
       elements,
       clientSecret,
@@ -3457,12 +3469,14 @@ function useGateCtx(part) {
   }
   return ctx;
 }
-var Root5 = forwardRef7(function PurchaseGateRoot({ requirePlan, requireProduct, asChild, children, ...rest }, forwardedRef) {
+var Root5 = forwardRef7(function PurchaseGateRoot({ productRef, planRef, asChild, children, ...rest }, forwardedRef) {
   const solva = useContext11(SolvaPayContext);
   if (!solva) throw new MissingProviderError("PurchaseGate");
-  const { purchases, loading, hasProduct, error } = usePurchase();
-  const productToCheck = requireProduct || requirePlan;
-  const hasAccess = productToCheck ? hasProduct(productToCheck) : purchases.some((p) => p.status === "active");
+  const { loading, hasPurchase, error } = usePurchase();
+  const hasAccess = useMemo10(
+    () => hasPurchase({ productRef, planRef }),
+    [hasPurchase, productRef, planRef]
+  );
   const state = loading ? "loading" : hasAccess ? "allowed" : "blocked";
   const ctx = useMemo10(
     () => ({ state, loading, hasAccess, error }),

package/dist/index.cjs

@@ -856,14 +856,11 @@ var SolvaPayProvider = ({
       email: purchaseData.email,
       name: purchaseData.name,
       purchases: purchaseData.purchases,
-      hasProduct: (productName) => {
+      hasPurchase: (criteria) => {
+        const productRef = criteria?.productRef;
+        const planRef = criteria?.planRef;
         return purchaseData.purchases.some(
-          (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
-        );
-      },
-      hasPlan: (productName) => {
-        return purchaseData.purchases.some(
-          (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
+          (p) => p.status === "active" && (!productRef || p.productRef === productRef) && (!planRef || p.planRef === planRef)
         );
       },
       activePurchase,
@@ -2080,6 +2077,13 @@ async function confirmPayment(input) {
       if (!paymentElement) {
         return { status: "error", message: copy.errors.cardElementMissing };
       }
+      const { error: submitError } = await elements.submit();
+      if (submitError) {
+        return {
+          status: "error",
+          message: submitError.message || copy.errors.paymentUnexpected
+        };
+      }
       const { error: error2, paymentIntent: paymentIntent2 } = await stripe.confirmPayment({
         elements,
         clientSecret,
@@ -3314,6 +3318,14 @@ var Inner = ({
     }
     setError(null);
     setIsProcessing(true);
+    const { error: submitError } = await elements.submit();
+    if (submitError) {
+      const msg = submitError.message || copy.errors.paymentUnexpected;
+      setError(msg);
+      setIsProcessing(false);
+      onError?.(new Error(msg));
+      return;
+    }
     const { error: confirmError, paymentIntent } = await stripe.confirmPayment({
       elements,
       clientSecret,
@@ -3544,12 +3556,14 @@ function useGateCtx(part) {
   }
   return ctx;
 }
-var Root5 = (0, import_react22.forwardRef)(function PurchaseGateRoot({ requirePlan, requireProduct, asChild, children, ...rest }, forwardedRef) {
+var Root5 = (0, import_react22.forwardRef)(function PurchaseGateRoot({ productRef, planRef, asChild, children, ...rest }, forwardedRef) {
   const solva = (0, import_react22.useContext)(SolvaPayContext);
   if (!solva) throw new MissingProviderError("PurchaseGate");
-  const { purchases, loading, hasProduct, error } = usePurchase();
-  const productToCheck = requireProduct || requirePlan;
-  const hasAccess = productToCheck ? hasProduct(productToCheck) : purchases.some((p) => p.status === "active");
+  const { loading, hasPurchase, error } = usePurchase();
+  const hasAccess = (0, import_react22.useMemo)(
+    () => hasPurchase({ productRef, planRef }),
+    [hasPurchase, productRef, planRef]
+  );
   const state = loading ? "loading" : hasAccess ? "allowed" : "blocked";
   const ctx = (0, import_react22.useMemo)(
     () => ({ state, loading, hasAccess, error }),

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { S as SolvaPayProviderProps, P as PaymentFormProps, a as PrefillCustomer, b as PaymentFormSummary, c as PaymentFormCustomerFields, d as PaymentFormPaymentElement, e as PaymentFormCardElement, f as PaymentFormMandateText, g as PaymentFormTermsCheckbox, h as PaymentFormSubmitButton, i as PaymentFormLoading, j as PaymentFormError, T as TopupFormProps, C as CheckoutResult, k as Plan, A as ActivationResult, l as PurchaseStatus, m as SolvaPayContextValue, U as UsePlansOptions, n as UsePlansReturn, o as UsePlanOptions, p as UsePlanReturn, q as UseProductReturn, r as UseMerchantReturn, s as SolvaPayCopy, t as PurchaseStatusReturn, u as CancelResult, R as ReactivateResult, v as UseTopupOptions, w as UseTopupReturn, B as BalanceStatus, x as UseTopupAmountSelectorOptions, y as UseTopupAmountSelectorReturn, z as PartialSolvaPayCopy, D as PurchaseInfo, E as CheckoutVariant, F as Product } from './CancelPlanButton-CieT9swn.cjs';
-export { G as ActivationFlowStep, H as BalanceBadge, I as CancelPlanButton, J as CheckoutSummary, K as CheckoutSummaryProps, L as CustomerPurchaseData, M as MandateContext, N as MandateTemplate, O as MandateText, Q as MandateTextProps, V as Merchant, W as PaymentError, X as PaymentIntentResult, Y as PaymentResult, Z as PlanBadge, _ as ProductBadge, $ as PurchaseGate, a0 as PurchaseStatusValue, a1 as SolvaPayConfig, a2 as TopupPaymentResult, a3 as deriveVariant } from './CancelPlanButton-CieT9swn.cjs';
+import { S as SolvaPayProviderProps, P as PaymentFormProps, a as PrefillCustomer, b as PaymentFormSummary, c as PaymentFormCustomerFields, d as PaymentFormPaymentElement, e as PaymentFormCardElement, f as PaymentFormMandateText, g as PaymentFormTermsCheckbox, h as PaymentFormSubmitButton, i as PaymentFormLoading, j as PaymentFormError, T as TopupFormProps, C as CheckoutResult, k as Plan, A as ActivationResult, l as PurchaseStatus, m as SolvaPayContextValue, U as UsePlansOptions, n as UsePlansReturn, o as UsePlanOptions, p as UsePlanReturn, q as UseProductReturn, r as UseMerchantReturn, s as SolvaPayCopy, t as PurchaseStatusReturn, u as CancelResult, R as ReactivateResult, v as UseTopupOptions, w as UseTopupReturn, B as BalanceStatus, x as UseTopupAmountSelectorOptions, y as UseTopupAmountSelectorReturn, z as PartialSolvaPayCopy, D as PurchaseInfo, E as CheckoutVariant, F as Product } from './CancelPlanButton-DQXUTHmF.cjs';
+export { G as ActivationFlowStep, H as BalanceBadge, I as CancelPlanButton, J as CheckoutSummary, K as CheckoutSummaryProps, L as CustomerPurchaseData, M as MandateContext, N as MandateTemplate, O as MandateText, Q as MandateTextProps, V as Merchant, W as PaymentError, X as PaymentIntentResult, Y as PaymentResult, Z as PlanBadge, _ as ProductBadge, $ as PurchaseGate, a0 as PurchaseStatusValue, a1 as SolvaPayConfig, a2 as TopupPaymentResult, a3 as deriveVariant } from './CancelPlanButton-DQXUTHmF.cjs';
 import { PaymentIntent, Stripe, StripeElements } from '@stripe/stripe-js';
 import { ActivatePlanResult } from '@solvapay/server';
 export { ActivatePlanResult } from '@solvapay/server';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { S as SolvaPayProviderProps, P as PaymentFormProps, a as PrefillCustomer, b as PaymentFormSummary, c as PaymentFormCustomerFields, d as PaymentFormPaymentElement, e as PaymentFormCardElement, f as PaymentFormMandateText, g as PaymentFormTermsCheckbox, h as PaymentFormSubmitButton, i as PaymentFormLoading, j as PaymentFormError, T as TopupFormProps, C as CheckoutResult, k as Plan, A as ActivationResult, l as PurchaseStatus, m as SolvaPayContextValue, U as UsePlansOptions, n as UsePlansReturn, o as UsePlanOptions, p as UsePlanReturn, q as UseProductReturn, r as UseMerchantReturn, s as SolvaPayCopy, t as PurchaseStatusReturn, u as CancelResult, R as ReactivateResult, v as UseTopupOptions, w as UseTopupReturn, B as BalanceStatus, x as UseTopupAmountSelectorOptions, y as UseTopupAmountSelectorReturn, z as PartialSolvaPayCopy, D as PurchaseInfo, E as CheckoutVariant, F as Product } from './CancelPlanButton-f56UlQN-.js';
-export { G as ActivationFlowStep, H as BalanceBadge, I as CancelPlanButton, J as CheckoutSummary, K as CheckoutSummaryProps, L as CustomerPurchaseData, M as MandateContext, N as MandateTemplate, O as MandateText, Q as MandateTextProps, V as Merchant, W as PaymentError, X as PaymentIntentResult, Y as PaymentResult, Z as PlanBadge, _ as ProductBadge, $ as PurchaseGate, a0 as PurchaseStatusValue, a1 as SolvaPayConfig, a2 as TopupPaymentResult, a3 as deriveVariant } from './CancelPlanButton-f56UlQN-.js';
+import { S as SolvaPayProviderProps, P as PaymentFormProps, a as PrefillCustomer, b as PaymentFormSummary, c as PaymentFormCustomerFields, d as PaymentFormPaymentElement, e as PaymentFormCardElement, f as PaymentFormMandateText, g as PaymentFormTermsCheckbox, h as PaymentFormSubmitButton, i as PaymentFormLoading, j as PaymentFormError, T as TopupFormProps, C as CheckoutResult, k as Plan, A as ActivationResult, l as PurchaseStatus, m as SolvaPayContextValue, U as UsePlansOptions, n as UsePlansReturn, o as UsePlanOptions, p as UsePlanReturn, q as UseProductReturn, r as UseMerchantReturn, s as SolvaPayCopy, t as PurchaseStatusReturn, u as CancelResult, R as ReactivateResult, v as UseTopupOptions, w as UseTopupReturn, B as BalanceStatus, x as UseTopupAmountSelectorOptions, y as UseTopupAmountSelectorReturn, z as PartialSolvaPayCopy, D as PurchaseInfo, E as CheckoutVariant, F as Product } from './CancelPlanButton-BKH_yv1d.js';
+export { G as ActivationFlowStep, H as BalanceBadge, I as CancelPlanButton, J as CheckoutSummary, K as CheckoutSummaryProps, L as CustomerPurchaseData, M as MandateContext, N as MandateTemplate, O as MandateText, Q as MandateTextProps, V as Merchant, W as PaymentError, X as PaymentIntentResult, Y as PaymentResult, Z as PlanBadge, _ as ProductBadge, $ as PurchaseGate, a0 as PurchaseStatusValue, a1 as SolvaPayConfig, a2 as TopupPaymentResult, a3 as deriveVariant } from './CancelPlanButton-BKH_yv1d.js';
 import { PaymentIntent, Stripe, StripeElements } from '@stripe/stripe-js';
 import { ActivatePlanResult } from '@solvapay/server';
 export { ActivatePlanResult } from '@solvapay/server';

package/dist/index.js

@@ -64,7 +64,7 @@ import {
   useSolvaPay,
   useTopup,
   useTopupAmountSelector
-} from "./chunk-MOP3ZBGC.js";
+} from "./chunk-5FZBOPIW.js";
 import {
   defaultAuthAdapter
 } from "./chunk-OUSEQRCT.js";

package/dist/primitives/index.cjs

@@ -1866,6 +1866,13 @@ async function confirmPayment(input) {
       if (!paymentElement) {
         return { status: "error", message: copy.errors.cardElementMissing };
       }
+      const { error: submitError } = await elements.submit();
+      if (submitError) {
+        return {
+          status: "error",
+          message: submitError.message || copy.errors.paymentUnexpected
+        };
+      }
       const { error: error2, paymentIntent: paymentIntent2 } = await stripe.confirmPayment({
         elements,
         clientSecret,
@@ -3746,6 +3753,14 @@ var Inner = ({
     }
     setError(null);
     setIsProcessing(true);
+    const { error: submitError } = await elements.submit();
+    if (submitError) {
+      const msg = submitError.message || copy.errors.paymentUnexpected;
+      setError(msg);
+      setIsProcessing(false);
+      onError?.(new Error(msg));
+      return;
+    }
     const { error: confirmError, paymentIntent } = await stripe.confirmPayment({
       elements,
       clientSecret,
@@ -4055,12 +4070,14 @@ function useGateCtx2(part) {
   }
   return ctx;
 }
-var Root9 = (0, import_react29.forwardRef)(function PurchaseGateRoot({ requirePlan, requireProduct, asChild, children, ...rest }, forwardedRef) {
+var Root9 = (0, import_react29.forwardRef)(function PurchaseGateRoot({ productRef, planRef, asChild, children, ...rest }, forwardedRef) {
   const solva = (0, import_react29.useContext)(SolvaPayContext);
   if (!solva) throw new MissingProviderError("PurchaseGate");
-  const { purchases, loading, hasProduct, error } = usePurchase();
-  const productToCheck = requireProduct || requirePlan;
-  const hasAccess = productToCheck ? hasProduct(productToCheck) : purchases.some((p) => p.status === "active");
+  const { loading, hasPurchase, error } = usePurchase();
+  const hasAccess = (0, import_react29.useMemo)(
+    () => hasPurchase({ productRef, planRef }),
+    [hasPurchase, productRef, planRef]
+  );
   const state = loading ? "loading" : hasAccess ? "allowed" : "blocked";
   const ctx = (0, import_react29.useMemo)(
     () => ({ state, loading, hasAccess, error }),

package/dist/primitives/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { Ref } from 'react';
-import { k as Plan, F as Product, y as UseTopupAmountSelectorReturn, D as PurchaseInfo, T as TopupFormProps } from '../CancelPlanButton-CieT9swn.cjs';
-export { a4 as ActivationFlow, a5 as ActivationFlowActivateButton, a6 as ActivationFlowActivated, a7 as ActivationFlowAmountPicker, a8 as ActivationFlowContinueButton, a9 as ActivationFlowError, aa as ActivationFlowLoading, ab as ActivationFlowRetrying, ac as ActivationFlowRoot, G as ActivationFlowStep, ad as ActivationFlowSummary, H as BalanceBadge, I as CancelPlanButton, O as MandateText, Q as MandateTextProps, ae as PaymentForm, e as PaymentFormCardElement, c as PaymentFormCustomerFields, j as PaymentFormError, i as PaymentFormLoading, f as PaymentFormMandateText, d as PaymentFormPaymentElement, af as PaymentFormRoot, h as PaymentFormSubmitButton, b as PaymentFormSummary, g as PaymentFormTermsCheckbox, Z as PlanBadge, _ as ProductBadge, $ as PurchaseGate, ag as PurchaseGateAllowed, ah as PurchaseGateBlocked, ai as PurchaseGateError, aj as PurchaseGateLoading, ak as PurchaseGateRoot, al as useActivationFlow, am as usePurchaseGate } from '../CancelPlanButton-CieT9swn.cjs';
+import { k as Plan, F as Product, y as UseTopupAmountSelectorReturn, D as PurchaseInfo, T as TopupFormProps } from '../CancelPlanButton-DQXUTHmF.cjs';
+export { a4 as ActivationFlow, a5 as ActivationFlowActivateButton, a6 as ActivationFlowActivated, a7 as ActivationFlowAmountPicker, a8 as ActivationFlowContinueButton, a9 as ActivationFlowError, aa as ActivationFlowLoading, ab as ActivationFlowRetrying, ac as ActivationFlowRoot, G as ActivationFlowStep, ad as ActivationFlowSummary, H as BalanceBadge, I as CancelPlanButton, O as MandateText, Q as MandateTextProps, ae as PaymentForm, e as PaymentFormCardElement, c as PaymentFormCustomerFields, j as PaymentFormError, i as PaymentFormLoading, f as PaymentFormMandateText, d as PaymentFormPaymentElement, af as PaymentFormRoot, h as PaymentFormSubmitButton, b as PaymentFormSummary, g as PaymentFormTermsCheckbox, Z as PlanBadge, _ as ProductBadge, $ as PurchaseGate, ag as PurchaseGateAllowed, ah as PurchaseGateBlocked, ai as PurchaseGateError, aj as PurchaseGateLoading, ak as PurchaseGateRoot, al as useActivationFlow, am as usePurchaseGate } from '../CancelPlanButton-DQXUTHmF.cjs';
 import { PaymentElement } from '@stripe/react-stripe-js';
 import { Stripe, StripeElements } from '@stripe/stripe-js';
 import '@solvapay/server';

package/dist/primitives/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { Ref } from 'react';
-import { k as Plan, F as Product, y as UseTopupAmountSelectorReturn, D as PurchaseInfo, T as TopupFormProps } from '../CancelPlanButton-f56UlQN-.js';
-export { a4 as ActivationFlow, a5 as ActivationFlowActivateButton, a6 as ActivationFlowActivated, a7 as ActivationFlowAmountPicker, a8 as ActivationFlowContinueButton, a9 as ActivationFlowError, aa as ActivationFlowLoading, ab as ActivationFlowRetrying, ac as ActivationFlowRoot, G as ActivationFlowStep, ad as ActivationFlowSummary, H as BalanceBadge, I as CancelPlanButton, O as MandateText, Q as MandateTextProps, ae as PaymentForm, e as PaymentFormCardElement, c as PaymentFormCustomerFields, j as PaymentFormError, i as PaymentFormLoading, f as PaymentFormMandateText, d as PaymentFormPaymentElement, af as PaymentFormRoot, h as PaymentFormSubmitButton, b as PaymentFormSummary, g as PaymentFormTermsCheckbox, Z as PlanBadge, _ as ProductBadge, $ as PurchaseGate, ag as PurchaseGateAllowed, ah as PurchaseGateBlocked, ai as PurchaseGateError, aj as PurchaseGateLoading, ak as PurchaseGateRoot, al as useActivationFlow, am as usePurchaseGate } from '../CancelPlanButton-f56UlQN-.js';
+import { k as Plan, F as Product, y as UseTopupAmountSelectorReturn, D as PurchaseInfo, T as TopupFormProps } from '../CancelPlanButton-BKH_yv1d.js';
+export { a4 as ActivationFlow, a5 as ActivationFlowActivateButton, a6 as ActivationFlowActivated, a7 as ActivationFlowAmountPicker, a8 as ActivationFlowContinueButton, a9 as ActivationFlowError, aa as ActivationFlowLoading, ab as ActivationFlowRetrying, ac as ActivationFlowRoot, G as ActivationFlowStep, ad as ActivationFlowSummary, H as BalanceBadge, I as CancelPlanButton, O as MandateText, Q as MandateTextProps, ae as PaymentForm, e as PaymentFormCardElement, c as PaymentFormCustomerFields, j as PaymentFormError, i as PaymentFormLoading, f as PaymentFormMandateText, d as PaymentFormPaymentElement, af as PaymentFormRoot, h as PaymentFormSubmitButton, b as PaymentFormSummary, g as PaymentFormTermsCheckbox, Z as PlanBadge, _ as ProductBadge, $ as PurchaseGate, ag as PurchaseGateAllowed, ah as PurchaseGateBlocked, ai as PurchaseGateError, aj as PurchaseGateLoading, ak as PurchaseGateRoot, al as useActivationFlow, am as usePurchaseGate } from '../CancelPlanButton-BKH_yv1d.js';
 import { PaymentElement } from '@stripe/react-stripe-js';
 import { Stripe, StripeElements } from '@stripe/stripe-js';
 import '@solvapay/server';

package/dist/primitives/index.js

@@ -90,7 +90,7 @@ import {
   usePlanSelector,
   usePurchaseGate,
   useTopupForm
-} from "../chunk-MOP3ZBGC.js";
+} from "../chunk-5FZBOPIW.js";
 import "../chunk-OUSEQRCT.js";
 export {
   ActivationFlow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solvapay/react",
-  "version": "1.0.8-preview.4",
+  "version": "1.0.8-preview.6",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -65,8 +65,8 @@
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
     "vitest": "^4.1.2",
-    "@solvapay/test-utils": "0.0.0",
-    "@solvapay/server": "1.0.8-preview.4"
+    "@solvapay/server": "1.0.8-preview.6",
+    "@solvapay/test-utils": "0.0.0"
   },
   "scripts": {
     "build": "tsup src/index.tsx src/primitives/index.ts src/adapters/auth.ts --format esm,cjs --dts --tsconfig tsconfig.build.json && cp src/styles.css dist/styles.css",