React

Installation

npm install billingsdk-core billingsdk-react

BillingProvider

Wrap your app with the provider to give components access to billing state:

import { BillingProvider } from "billingsdk-react";
import { createBilling, definePlans } from "billingsdk-core";
import { stripe } from "billingsdk-stripe";

const billing = createBilling({
  adapter: stripe({ secretKey: process.env.NEXT_PUBLIC_STRIPE_KEY! }),
  plans,
});

function App({ children }) {
  return (
    <BillingProvider billing={billing} customerId="cus_123">
      {children}
    </BillingProvider>
  );
}

useBilling

Access the billing client, active subscription, and entitlements:

import { useBilling } from "billingsdk-react";

function SubscriptionStatus() {
  const { subscription, entitlements, loading, error, refresh } = useBilling();

  if (loading) return <div>Loading...</div>;
  return (
    <div>
      Status: {subscription?.status ?? "No active subscription"}
      <button onClick={refresh}>Refresh</button>
    </div>
  );
}

useEntitlement

Check a single feature entitlement with reactive updates:

import { useEntitlement } from "billingsdk-react";

function AIGenerations() {
  const { allowed, remaining, loading, refresh } = useEntitlement("ai_generations");

  if (loading) return <div>Loading...</div>;
  return (
    <div>
      {allowed
        ? `${remaining} generations remaining`
        : "Upgrade required"}
    </div>
  );
}