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, overlay text on image, or emoji icon).
- 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) | Amount in the smallest currency unit, for example 999 = $9.99 |
| Billing | Weekly / Monthly / Quarterly / Yearly / One-time / Lifetime |
| Trial days | Free trial before the first charge, for subscriptions only |
| 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 |
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.