Paywall step

The Paywall step is a customizable offer page. Use Add Section to arrange pricing, hero copy, benefits, reviews, FAQ, images, guarantee text, and other trust-building content.

Sections

Paywall sections can be added, removed, and reordered from the editor panel.

Click the Paywall step on the canvas.
In the right panel, use Add Section to insert Hero, Timer, Pricing, Benefits, Reviews, FAQ, Guarantee, Roadmap, Before / After, Text, Image, or CTA blocks.
Drag sections up or down to change the order visitors see on the live page.
Expand a section to edit its fields. Remove optional sections anytime; Pricing must stay.

Available sections:

Hero - headline, subheadline, optional image, and layout (standard or overlay text on image).
Timer - countdown headline and duration.
Pricing - required section with one or more plans.
Benefits - short value bullets.
Reviews - quotes with star ratings.
FAQ - common questions before checkout.
Guarantee - refund, trial, or cancellation reassurance.
Roadmap - timeline milestones (for example Today → Week 1 → Week 4).
Before / After - contrast “before” and “after” states with titles and optional descriptions.
Text - custom headline and body copy.
Image - standalone image with optional caption.
CTA - headline, optional subheadline, and a button. By default the button scrolls to pricing plans; you can turn that off and link to an external URL instead.

Pricing is required

Every Paywall must include exactly one Pricing section, and that section must contain at least one plan. The editor prevents deleting the last pricing section or the last plan.

Continue button

At the top of the paywall editor, set Continue button text (for example "Start my plan"). Leave it empty to use the default Continue label.

The button appears directly below the pricing plans. Visitors select a plan, then tap it to move to Checkout.

Plans

Plans live inside the Pricing section. Each plan has:

Field	Description
Name	Shown to the visitor, for example "Monthly" or "Best Value"
Price (cents)	Regular recurring amount in the smallest currency unit, for example `1999` = $19.99
Billing	Weekly / Monthly / Quarterly / Yearly / One-time / Lifetime
Trial / intro days	Number of days before the regular recurring charge begins (subscriptions only)
Intro price (cents)	Optional initial charge for the introductory period (e.g. `100` = $1.00); leave empty for a free trial
Features	One bullet per line
Badge	Small label on the card, for example "Most popular"
Highlight as recommended	Pre-selects this plan for visitors; use for your default offer
Stripe Price ID	Required when using Stripe - see below
Paddle Price ID	Required when using Paddle - see below

Paid introductory periods

Offer a low-cost trial period before the full subscription price begins (for example, $1 for the first 7 days, then $19.99/month).

Follow these steps to set up a paid intro offer:

Open the Paywall step and click on a recurring plan (Weekly, Monthly, Quarterly, or Yearly).
Set the regular subscription amount in Price (cents) (e.g. 1999 for $19.99).
Set Trial / intro days to the duration of the introductory offer (e.g. 7).
Set Intro price (cents) to the upfront amount (e.g. 100 for $1.00). If you want a free trial instead, leave this empty.
In Stripe Price ID, enter the ID for your regular subscription price.

On the live paywall, the plan card shows both the intro rate and the subsequent subscription price. The same breakdown carries forward to Checkout and any exit-intent downsells.

Requires Stripe

Paid introductory periods currently require Stripe. Paddle does not support paid intro pricing in web2app. Saving or publishing a paid intro offer with Paddle is blocked.

Pricing display

Inside the Pricing section, open Display options to control how prices look on the live page:

Setting	What it does
Price emphasis	Standard — billing price is the main number. Equivalent as main — shows per day/week/month large (for example $0.27/day). Discount — crossed-out anchor price next to the real price.
Price layout	Stacked — price above the billing period. Inline — price and period on one line.
Show equivalent price	Adds a per day, week, or month estimate under the main price (useful for annual plans).
Anchor plan	Pick a plan to compare against (usually your most expensive option).
Cross out anchor price	Shows what the anchor plan would cost over the same period, crossed out on other plans.
Auto savings badge	Adds a "Save X%" badge when the math works and the plan has no custom badge.
Price size	Small, medium, or large typography.
Price alignment	Left, center, or right within each plan card (disabled in grid layout — cards are always centered).
Card layout	List — full-width stacked plan cards. Grid — two-column comparison layout with price on top and features below.
Selected card style	Outline — colored border on the selected plan. Filled — solid primary-color background on the selected plan.

Anchor plan tips

Choose an anchor plan that makes your recommended offer look like a clear win. Equivalent and discount styles only work when billing periods and prices support the calculation.

Price IDs

Each plan needs a Price ID from whichever payment processor you have active. Fill in the field that matches your active processor.

Stripe Price ID (price_1AbCdEfGhIjKlMn) - created in your Stripe Dashboard under Product catalogue. See Payments - Stripe setup.

Paddle Price ID (pri_01AbCdEfGhIjKlMn) - created in your Paddle Dashboard under Catalog -> Products. See Payments - Paddle setup.

You can fill in both IDs on the same plan. Only the ID for the active processor is used at checkout.

Billing period must match what you set in your payment processor. If you create a Monthly recurring price in Stripe or Paddle, choose Monthly here too. This controls the label shown to the visitor and whether web2app creates a subscription or a one-time charge.

Payment processor must be configured first

Before visitors can pay, you must add your keys in Settings -> Payment Integration and select an active processor. Without this, the Checkout step will show a "not configured" error.

Offer content

Add optional sections around pricing to make the page feel closer to a landing page: a countdown timer above pricing, benefits before the offer, reviews after the plans, FAQ near the bottom, and a guarantee near the checkout button.

Hero and Image sections support upload or Generate from nearby copy. Pick an Image shape (wide, ultra wide, cinema, square, or portrait). Use Match page when you want the image background to blend with your funnel colors. See Step images.

Place a CTA section above pricing to nudge visitors down the page — for example "See Plans" with Scroll to pricing plans turned on.

Exit-intent downsell

On desktop, when a visitor moves the cursor toward leaving the paywall, a one-time modal can offer a cheaper plan than the one currently selected. It appears once per paywall visit after a short delay on the page.

Open the Paywall step in the editor.
Under Exit-intent Downsell, leave Show the exit-intent offer on this paywall checked (default), or turn it off to disable.
The modal only appears when at least one plan in Pricing costs less than the selected plan. If the visitor already chose the cheapest plan, nothing is shown.

Behavior	Detail
Which plan	Cheapest plan strictly below the currently selected price
Claim	Selects that plan and continues to Checkout
Dismiss	Closes the modal; visitor stays on the paywall
Copy	Headline and buttons follow Funnel UI language in funnel settings
Processors	Works with Stripe and Paddle — claiming only changes the selected plan and navigates forward; it does not touch payment forms

This is a tier downsell (switch to a cheaper plan), not a promo code or extra percentage off the same plan.

A separate exit-intent can also appear on Checkout when paying with Stripe — see Checkout step — Exit-intent downsell. Paywall and checkout each track exit-intent independently (a visitor may see both in one session).

Track shown and claimed (paywall + checkout combined) in Analytics → Growth Add-ons → Exit-intent Downsell.

Typical flow

Paywall → Checkout → optional Upsell → Success

On the live page, visitors select a plan in the Pricing section, then tap the continue button below the plans. The highlighted plan is selected by default. Payment happens on the Checkout step.