Paywall components
A paywall that ships today, not next sprint.
Three ready-to-use layouts from @crxpay/react-paywall. Pick one, feed it your offering, it reads the price and the checkout URL from your dashboard. Brand colors match, checkout works.
Try them right here
Click around. Real components, no install.
Every button below is the same React component you'll ship in your extension. Swap the brand colour, flip subscription state, click Upgrade — it all just renders. (We stub out Stripe so nothing real fires.)
Component
Subscription state
Brand colour
Paywall components
Ship a paywall that looks yours.
Themeable, data-driven, tested across plans. You bring the offering, we bring the pixels.
Three layouts, one prop
Cards, hero, and compact. Switch layout="cards" to layout="hero" and the same offering renders a new shape. A/B test layouts without rewriting copy.
Themed with two tokens
Set --crxpay-ink and --crxpay-accent on the wrapper. Buttons, headings, badges, and hover states all pick them up. No class overrides, no CSS patching.
Prices from your dashboard
The component reads the offering ID you pass and pulls live prices, currency, and trial length from the dashboard. Change the price, ship nothing.
Checkout baked in
The upgrade button opens hosted Stripe checkout with the right plan, the right mode, and the right customer ID. No handler to wire, no webhook to parse.
Same component, every brand
Two CSS vars. Whole new look.
Theming is a single theme prop on <CrxPayProvider>. Override an accent, override the whole palette — the components don't care.
Indigo · Default
Out of the box. Looks at home in popups, options pages, and standalone web apps.
Coral · Editorial
Warmer, friendlier — the colour we ship the dashboard with. Great for consumer extensions.
Emerald · SaaS
Trust-signal greens. Fits productivity tools, finance extensions, anything serious.
Slate · Dark
Paste it on a dark surface. Works because every visual value is a CSS var; no globals needed.
Why designers approve this
Looks yours, works ours.
Build vs buy
Two weeks. Or one afternoon.
We've seen the rabbit-holes. Modal a11y, savings %, theming, Stripe nuances — every one of them is a mini-project you'll regret in three weeks.
<PricingTable /><UpgradeButton priceId={…} /><TrialBadge /><EntitlementGate entitlement="pro" /><ManageSubscriptionLink /><PaywallModal />theme={{ accent: "#10B981" }}7 kB gzip · whole packageReady to grow?
Our entire suite of features comes standard — and your first $2,500 in tracked revenue is free.