Skip to content

feat(storefront): richtext descriptions + per-hostname branding over surfaces.#732

Closed
OisinKyne wants to merge 1 commit into
oisin/storefront-themeing-2from
oisin/storefront-theme-3
Closed

feat(storefront): richtext descriptions + per-hostname branding over surfaces.#732
OisinKyne wants to merge 1 commit into
oisin/storefront-themeing-2from
oisin/storefront-theme-3

Conversation

@OisinKyne

@OisinKyne OisinKyne commented Jul 11, 2026

Copy link
Copy Markdown
Contributor

feat(storefront): checkout-style 402 page, data-obol hooks, custom CSS

The 402 paywall page becomes a fintech-style checkout, every seller surface gains a stable styling API, and operators get a custom-CSS escape hatch — the last customization tier short of bringing your own frontend.

What's here

  • 402 page redesign: seller brand header → offer name + rich description + skill pills → the price as the headline of a receipt-style summary card → network/pay-to rows with copy/explorer buttons. "How to pay" collapses four stacked cards into one card with three tabs (Obol Agent / Any AI agent / Manual x402); tabs are progressive enhancement — without JS every panel renders stacked under its own label. The chat-completions example folds into a <details>.
  • Stable data-obol="…" hooks on every meaningful element across the 402, landing, SIWX, error pages and the storefront components. This is the documented styling contract — pinned by TestPaymentRequiredHTML_LayoutContract, so renaming a hook is a visible breaking change rather than silent drift.
  • Custom CSS: obol sell info set --css-file brand.css (per-origin via --hostname), stored on the profile/branding block, published in the catalog envelope, injected in its own <style data-obol="custom-css"> element after the theme on every surface including the Next.js storefront. Contract: 64 KiB cap and rejection of </style/<script/<!-- at set time, re-checked at render on both the Go and TS sides — a hostile stored stylesheet is dropped, not inlined.
  • Reserved checkout mount: an empty <div data-obol="checkout"> in the 402 summary card and on landing pages, so the future in-browser wallet-checkout widget lands inside every themed/custom-styled page for free.

Testing

Layout-contract test enumerating every data-obol hook + tab markup + custom-CSS injection; breakout-payload test asserting hostile CSS never reaches the page; validator unit tests. A template-exec regression here surfaced that html/template errors fall back to JSON silently — the tests assert Content-Type on the HTML branch.

🤖 Generated with Claude Code

@bussyjd

bussyjd commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

Superseded by #749 (integration/v0.13.0-rc4). This PR's commits are already on main patch-equivalently — they landed via the earlier rc4 integration train (verified with git log --cherry: every commit on this branch shows as patch-identical to a main commit). #749 carries the remaining rc4 fixes and the fully green release smoke (run rc4-run7-20260714-171005, 18/18 flows incl. flow-13/14) that validates the combined train.

@bussyjd bussyjd closed this Jul 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants