@crxpay/react-paywall

Drop-in React paywall components for crxpay. Themeable pricing tables, paywall modals, and entitlement gates that hook directly into the @crxpay/sdk state machine.

If you ship a Chrome extension with React in the popup, options page, or new-tab override, this is the fastest path to a working paywall: drop <Paywall /> next to your free-tier UI and it will render, call checkout, and gate features when the subscription flips to active.

Install

npm install @crxpay/react-paywall @crxpay/sdk framer-motion
# or
pnpm add @crxpay/react-paywall @crxpay/sdk framer-motion

Peer dependencies: react >= 18, react-dom >= 18, framer-motion >= 11.

Don't forget to import the styles once (typically in your popup entry point):

import '@crxpay/react-paywall/styles.css';

Quick start

import { CrxPayProvider, Paywall, useEntitlement } from '@crxpay/react-paywall';
import '@crxpay/react-paywall/styles.css';

function App() {
  return (
    <CrxPayProvider apiKey="crxpay_pub_…">
      <Editor />
    </CrxPayProvider>
  );
}

function Editor() {
  const pro = useEntitlement('pro');

  if (!pro.isActive) {
    return <Paywall offeringId="default" onPurchased={() => pro.refresh()} />;
  }

  return <RealEditor />;
}

What's in the box

| Component | What it does | | ------------------------ | ---------------------------------------------------------------------------- | | <CrxPayProvider> | React context wrapper — feeds the SDK to all hooks/components below it. | | <Paywall> | The full paywall screen — pulls the offering from your dashboard, renders it. | | <PricingTable> | Just the plan cards, headless — useful if you're embedding in a custom UI. | | <EntitlementGate> | Wraps children; renders fallback if the entitlement isn't active. | | useEntitlement(key) | React hook — { isActive, isLoading, refresh }. | | useSubscription() | React hook — full subscription object + the live state machine. | | useOffering(offeringId)| React hook — fetches an offering's packages from the dashboard. |

Theming

Override the CSS variables in :root (or any wrapping element) to match your extension's brand:

:root {
  --crxpay-color-primary: #5E54F5;
  --crxpay-color-bg: #ffffff;
  --crxpay-color-text: #1F1F47;
  --crxpay-radius: 12px;
}

For full visual control, use the headless <PricingTable> and useEntitlement/useSubscription directly.

Templates

Eight paywall templates ship in dashboard.crxpay.io and are renderable by this component without any code change — the dashboard's visual editor outputs the same JSON the components consume here. Build once in the dashboard, ship to every user the next time the SDK polls (no Chrome Web Store re-review needed).

Links

• crxpay.io — landing page
• docs.crxpay.io — full SDK documentation
• crxpay.io/features/paywall-components — visual feature page
• Source on GitHub — issues and PRs

License

MIT — see LICENSE.