billingsdk-react

React bindings for Billing SDK. Provides context provider and hooks for using billing in React applications.

Installation

npm install billingsdk-core billingsdk-react

Usage

Set up the provider

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>
  );
}

Check entitlements

import { useEntitlement } from "billingsdk-react";

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

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

Use billing client

import { useBilling } from "billingsdk-react";

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

  return <div>{subscription?.status ?? "No subscription"}</div>;
}

Exports

• BillingProvider — React context provider
• useBilling() — Access billing client, subscription, and entitlements
• useEntitlement(feature) — Check a single feature entitlement