Templates

Eight built-in templates ship with @crxpay/react-paywall. Each is a fully- designed PaywallConfig you can use as-is or customize in the visual editor. They're exported as code so the marketing page, docs, and dashboard all preview the same artifact your extension renders.

import { TEMPLATES, getTemplate } from '@crxpay/react-paywall';

// Browse all templates:
TEMPLATES.forEach((t) => console.log(t.meta.id, t.meta.tagline));

// Or grab a specific one:
const config = getTemplate('pixel-shop')!.build();

The 8 templates

🎮 Pixel Shop · pixel-shop

8-bit retro shop window for pixel-art games. Scanlines decoration, monospace display font, "INSERT COIN" CTA. Targets game extensions: tower defense, roguelikes, idle clickers.

Blocks: Hero (display font on) · Plans (compact-list) · Features (2 cols) · CTA

🎮 Casino Glow · casino-glow

Neon urgency for casual games. Gold + purple gradients, "VIP MEMBER" hook. Best for extensions with limited-time offers or VIP tiers.

Blocks: Hero (with badge) · Plans (cards) · Trust

🎮 Battle Pass · battle-pass

Tier ladder visualization for season-based games. Renders 3 plan tiers as a ladder, then a cosmetic-grid showing season rewards.

Blocks: Hero · Plans (tier-ladder) · CosmeticGrid

💼 Linear Minimal · linear-minimal

Single hero plan, three-column features grid, lots of whitespace. The Linear/Stripe-pricing aesthetic. For productivity tools that want to read as serious + premium.

Blocks: Hero · Plans (cards) · Features (3 cols)

🎯 Trial First · trial-first

Big "Start free trial" CTA, "no card required" badge, social proof testimonials, FAQ. Maximum conversion for first-time visitors.

Blocks: Hero · Plans (cards, "Start free trial" CTA) · Testimonials (grid) · FAQ · Trust

🤖 AI Credits · ai-credits

Generations counter messaging, free vs Pro feature matrix, model tier picks. For ChatGPT/Claude wrappers, summarizers, translators, image-gen tools.

Blocks: Hero · Plans (cards) · Comparison · Features (2 cols)

🔒 Privacy Trust · privacy-trust

Heavy on trust signals — encryption, no-data, refund guarantee. Lifetime payment option emphasized. For VPNs, password managers, ad-blockers.

Blocks: Hero · Trust · Plans (cards) · FAQ

⚖️ CWS-Compliant Minimal · cws-compliant

Bare-bones layout that satisfies every Chrome Web Store policy — refund policy text, Terms link, Privacy link, billing-interval disclosure, cancel- anytime statement. Use when you want minimum legal surface area.

Blocks: Hero · Plans (cards) · FAQ (billing details)

Picking the right template

If your extension is…	Use
A pixel-art game	pixel-shop
A season-based game with rewards	battle-pass
A casual game with urgency offers	casino-glow
A SaaS-style productivity tool	linear-minimal
A first-time user funnel	trial-first
An AI tool with credits	ai-credits
A VPN / password manager / privacy tool	privacy-trust
Submitting to CWS for the first time	cws-compliant

You can mix them — start with linear-minimal for the layout, copy the trust block from privacy-trust, the FAQ from cws-compliant. The visual editor lets you reorder + delete blocks freely.

CWS-compliance opt-in

Every template (not just cws-compliant) supports the policy.enforceCwsCompliance flag. When set, the renderer auto-injects the required disclosures into the footer:

const config = getTemplate('pixel-shop')!.build();
config.policy.enforceCwsCompliance = true;
config.policy.termsUrl = 'https://your.ext/terms';
config.policy.privacyUrl = 'https://your.ext/privacy';
// Refund text + Terms link + Privacy link + cancel-anytime now appear in the footer.

Set it in the visual editor's Policy tab.

Adding your own templates

Templates are just PaywallConfig objects. To register a custom one across a team, save it as a shared paywall in your dashboard and link team members directly to its editor URL. We'll lift this to a first-class "private templates" feature once enough orgs ask for it.

Next

• → Visual editor — what each tab actually does
• → Schema — every block type, every prop