webdevpuneet.com

Related Snippets

57 in Mobile Screens category
47–52 of 57

Mobile Paywall Screen

App Splash Screen

Wallet Card

App Store Card

Mobile Status Bar

Mobile Onboarding Screens

Mobile Paywall Screen — Free Subscription UI Snippet

Mobile Paywall Screen · Mobile · Plain HTML, CSS & JS · Live preview

CategoryMobile Screens
TagsMobile UI

Copy & paste

Source Code

<div class="pw-phone">
  <div class="pw-screen">
    <div class="pw-hero">
      <button class="pw-close" aria-label="Close">&times;</button>
      <div class="pw-crown">👑</div>
      <h1>Go Premium</h1>
      <p>Unlock every feature and remove all limits.</p>
    </div>
    <ul class="pw-feats">
      <li><span class="pw-ck"></span>Unlimited projects &amp; exports</li>
      <li><span class="pw-ck"></span>Advanced analytics dashboard</li>
      <li><span class="pw-ck"></span>Priority support, no ads</li>
      <li><span class="pw-ck"></span>Early access to new features</li>
    </ul>
    <div class="pw-plans" id="pwPlans">
      <button type="button" class="pw-plan" data-p="month"><div><b>Monthly</b><small>Billed every month</small></div><span class="pw-price">$9.99<i>/mo</i></span></button>
      <button type="button" class="pw-plan active" data-p="year"><span class="pw-badge">SAVE 40%</span><div><b>Annual</b><small>Billed $71.88/year</small></div><span class="pw-price">$5.99<i>/mo</i></span></button>
    </div>
    <button type="button" class="pw-cta" id="pwCta">Start 7-day free trial</button>
    <p class="pw-fine" id="pwFine">Then $71.88/year. Cancel anytime.</p>
    <div class="pw-links"><a href="#">Restore</a><span>·</span><a href="#">Terms</a><span>·</span><a href="#">Privacy</a></div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Plan-driven CTA
Button and fine print update from a copy map.
Pre-selected best value
Annual is default with a save badge.
Per-month framing
Prices shown monthly so annual looks cheaper.
Outcome benefits
Features framed as user outcomes.
Free-trial CTA
Lowers commitment to convert.
CSS checklist
Pure-CSS checkmarks, no icon font.
Compliant footer
Restore, terms, and privacy links.
No dependency
Pure HTML/CSS/JS for paywalls.

About this UI Snippet

Mobile Paywall Screen — Subscription Upsell UI

Screenshot of the Mobile Paywall Screen snippet rendered live

A paywall screen is the subscription upsell an app shows to convert free users to paid — a benefit-led hero, a checklist of premium features, selectable plans with savings highlighted, and a trial call-to-action. This snippet builds a conversion-optimized one inside a CSS phone frame, where selecting a plan updates the CTA and fine print, in HTML, CSS, and vanilla JavaScript with no dependency.

Plan selection drives the CTA

The two plan cards are real <button>s; clicking one moves the .active class (a colored border and tint) and, crucially, rewrites the CTA label and the fine print from a COPY map. Choosing Annual shows "Start 7-day free trial" with "Then $71.88/year"; choosing Monthly switches to "Continue — $9.99/mo" with monthly billing terms. Keeping the button and legal copy in sync with the selected plan is exactly what a compliant, high-converting paywall must do, and here it's one lookup.

Conversion patterns baked in

The design uses the standard upsell tactics: the annual plan is pre-selected (the choice you want) and carries a "SAVE 40%" badge, prices are shown as a per-month equivalent so annual looks cheaper, benefits are framed as outcomes ("Unlimited projects", "no ads"), and a free-trial CTA lowers the commitment. These aren't incidental — they're the elements that make a paywall work, assembled in one reference.

A CSS checklist

Each feature row has a checkmark drawn purely in CSS: a green circle with an ::after pseudo-element rotated into a tick (two borders at 45°). No icon font or SVG, so the list stays self-contained and recolors easily.

The hero and layout

A gradient hero with a rounded bottom, a close button, a crown glyph, and benefit copy sits atop a scrollable screen; the restore/terms/privacy links at the bottom are the legally-expected footer for app subscriptions. The whole screen scrolls within the phone frame.

Reusing it

Replace the plans, prices, and feature copy, and wire the CTA to your billing SDK (StoreKit, Play Billing, Stripe). The plan-to-copy map makes adding plans or A/B-testing wording trivial. Lift it out of the frame for a web pricing modal, or keep it framed inside a phone mockup for store screenshots.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA subscription paywall renders inside a phone frame.
  2. 2
    Read the benefitsA CSS checklist lists the premium features.
  3. 3
    Switch plansTapping Monthly or Annual moves the selection highlight.
  4. 4
    Watch the CTA updateThe button and fine print change with the chosen plan.
  5. 5
    Tap the CTAIt shows a processing state then confirms.
  6. 6
    Wire your billingConnect the CTA to your subscription SDK.

Real-world uses

Common Use Cases

App subscription upsells
Convert free users inside a phone mockup, with a benefit-led hero and a checklist framed as outcomes, not features.
Premium feature gating
Pair with an upgrade banner shown earlier in the app, so the paywall appears as the natural next step.
Plan selection screens
Lift the plans out as a plan selector on the web, keeping annual preselected with a savings badge and monthly-equivalent pricing.
Free trial offers
Add urgency with a trial countdown, while the call-to-action and fine print change together from one copy map.
Pricing page reuse
Reuse the plan cards on a marketing page like a pricing card, keeping the same savings framing across web and app.
Related: Mobile Settings Screen
See the Mobile Settings Screen for a related mobile pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The plan cards are buttons, and clicking one moves an active class and looks up that plan's copy in a COPY map. The map holds the CTA label and the fine print for each plan, so selecting Annual versus Monthly rewrites both the button text and the billing terms in one step — keeping the call-to-action and the legal copy in sync with the choice.

It's a deliberate conversion pattern: defaulting to the plan you want users to pick (annual, which has higher lifetime value) increases its take rate. The screen reinforces it with a SAVE badge and a per-month price so annual appears cheaper than monthly at a glance — standard, effective paywall tactics.

No. Each is a green circle with an ::after pseudo-element styled into a tick using two borders rotated 45 degrees — the classic CSS checkmark. There's no icon font or SVG, so the feature list is self-contained and you can recolor the checks by changing two CSS values.

Wire the CTA's click handler to your subscription SDK — StoreKit on iOS, Play Billing on Android, or Stripe on the web — passing the selected plan's product id. The plan-to-copy map also makes it easy to add plans or A/B-test wording without touching the markup. The restore link should call your SDK's restore-purchases flow.

Hold the selected plan in state and derive the CTA label and fine print from a copy map keyed by plan. Render the plan cards from data with a conditional active class. Trigger your purchase flow in the CTA handler and show a processing state. In Tailwind, style the cards, badge, and checklist with utilities and the checkmarks with a small style block.