Paywalls

Components

The building blocks every paywall is made of: stacks, text, images, product cards, buttons, and dividers.

Every paywall is a tree of ComponentNode objects. There are six primary types. Each is rendered identically by the studio preview, the hosted URL, and every SDK.

Component	Purpose
`stack`	Layout container. Horizontal or vertical, with gap and alignment.
`text`	Renders interpolated Liquid strings. Supports rich text styling.
`image`	Image asset. Object-fit, aspect ratio, and rounded corners controllable per node.
`productCard`	Bound to a product slot. Renders price, billing interval, and trial copy.
`button`	Interactive node. Dispatches a tap action (purchase, dismiss, link, restore).
`divider`	Horizontal or vertical hairline.

Every component supports a fill (background) and border (color, width, side), plus a condition for show/hide logic driven by Liquid.