Paywalls overview

A paywall in crxpay is a JSON config that the SDK fetches at runtime and the <Paywall> component renders. Three things create that config:

Source	Best for
Templates	Starting from a known-good design. 8 categories, click → use.
Visual editor	Customizing copy / colors / blocks without writing JSX.
Hand-rolled	Full control via the <Paywall> renderer or the drop-in components.

All three produce the same PaywallConfig schema, so you can switch between them at any time. Edit a template in the visual editor → export to JSON → check it into source control. Or write JSON in your IDE → paste into the editor for live preview.

How it works at runtime

┌──────────────────────────────────────────────────────────────┐
│ Dashboard                                                     │
│   You pick a template → editor → click "Publish"             │
│   POST /v1/dashboard/paywalls/:id/publish                    │
└─────────────────────────┬────────────────────────────────────┘
                          │
                          ▼
┌──────────────────────────────────────────────────────────────┐
│ KV cache invalidates · D1 row flips status='published'        │
└─────────────────────────┬────────────────────────────────────┘
                          │
                          ▼
┌──────────────────────────────────────────────────────────────┐
│ Extension popup mounts                                        │
│   GET /v1/sdk/paywall/active  →  {config}                    │
│   <Paywall config={config}/>                                 │
└──────────────────────────────────────────────────────────────┘

End-to-end latency from publish click → installed extension renders the new paywall: ~5 seconds (KV cache TTL + popup re-fetch).

Why a config-driven paywall?

Three reasons:

1. Update without re-shipping

Chrome Web Store reviews can take days. With config-driven paywalls, your extension binary stays the same — only the JSON changes. New copy, new prices, new layout — all live within seconds, no review queue.

2. A/B test paywalls server-side

Keep the same extension version installed; route different customers to different paywall variants from your dashboard. No extension rebuild, no remote-config service to plumb.

3. Constrained editor = fewer footguns

The schema is a closed set of block types (Hero, Plans, FAQ, Trust, …). The visual editor reorders + edits within that set. Devs can't accidentally create a paywall that violates Chrome Web Store policy or breaks the underlying SDK contract.

Quick path

1. Open your dashboard → Paywalls in the Monetization section.
2. Click Templates → pick one (Pixel Shop, Trial First, AI Credits…).
3. Click Use this template → you're in the editor.
4. Tweak headline, colors, blocks. Auto-saves on every keystroke.
5. Click Publish.
6. In your extension popup, render via <Paywall config> (config from /v1/sdk/paywall/active) — see Publishing.

That's the whole loop.

Next

• → Templates — the 8 we ship + when to use each
• → Visual editor — every inspector tab, every per-block form
• → Schema — every config field documented
• → Publishing — runtime fetch, KV cache, version rollback