Paywall shows all required elements without scrolling
Why it matters
Apple reviewers test IAP apps on physical devices, including small-screen models like the iPhone SE (667 logical points of usable height). A paywall that requires scrolling to see the price, auto-renewal terms, or the subscribe button fails Apple guideline 3.1.2's requirement that subscription terms are clearly displayed before purchase. Beyond review, a paywall where the subscribe button is below the fold on smaller devices creates a real conversion drop for users who never see it — large hero images or feature lists that push the CTA off-screen reduce paid conversions from the segment most likely to be budget-conscious.
Severity rationale
High because a paywall requiring scroll to reveal the price or CTA fails Apple guideline 3.1.2 on physical device review and reduces conversion on smaller screens.
Remediation
Pin the pricing section and CTA to the bottom of the paywall using a flex layout that prevents the content above from pushing it off-screen. Keep hero images under 160 logical points on paywalls and limit feature lists to 3–4 items maximum.
// PaywallScreen.tsx — pinned pricing section
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
{/* Hero image: maxHeight 140, feature list: 3-4 items */}
</View>
<View style={styles.pricingSection}>
<Text>{price}/month — auto-renews. Cancel anytime in Settings.</Text>
<SubscribeButton />
</View>
</View>
Test on iPhone SE (667pt height) in the iOS Simulator before every submission. On Android, test on a 360dp-wide device. The pricing section should be fully visible on first render with no scroll gesture.
Detection
- ID:
paywall-elements - Severity:
high - What to look for: Count all relevant instances and enumerate each. Examine paywall components for layout patterns that require scrolling to see mandatory purchase information. Look for: (1) A
ScrollViewwrapping the paywall where the subscribe button and key terms fall below the fold on a standard iPhone screen (~844 logical points height, accounting for safe area insets of ~50pt top and ~34pt bottom = ~760pt usable). (2) Paywall designs that use a large header image or hero section that pushes price and terms below the visible area. (3) Feature lists (FlatList,map()over feature items) before the pricing section that cause scrolling to be required. (4) In Flutter,SingleChildScrollViewwrapping a paywall with a tall header. Check the paywall's JSX structure: the price, billing period, auto-renewal text, and subscribe button should all be visible without scrolling. If the layout usesflex: 1andjustifyContent: 'flex-end'to pin the CTA section, verify the content above it doesn't overflow. Also check forkeyboardAvoidingViewor safe-area handling that could compress the paywall on smaller devices (iPhone SE: 667pt). - Pass criteria: Mandatory purchase information (price, billing period, auto-renewal, CTA button) is visible on the initial paywall view without requiring any scroll gesture, on both large (iPhone 16 Pro Max) and small (iPhone SE 3rd gen) screen sizes. At least 1 implementation must be verified.
- Fail criteria: Paywall requires scrolling to see price, auto-renewal terms, or the subscribe button on a standard iPhone screen. Large hero sections or feature lists push required content below the fold.
- Skip (N/A) when: No subscription paywall detected; or app is Android-only (still best practice to follow, but not an explicit Apple rejection trigger).
- Detail on fail:
"PaywallScreen.tsx renders a full-height hero image (300pt) and a 6-item feature list before the pricing section — on iPhone SE the subscribe button is not visible without scrolling"or"PaywallScreen wraps all content in ScrollView with no pinned CTA — pricing terms not guaranteed visible on first view" - Remediation: Apple reviewers test on physical devices. A paywall that requires scrolling to see the price is a rejection risk under guideline 3.1.2.
- Use a pinned bottom CTA pattern:
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}> {/* Feature highlights — keep to 3-4 items max */} </View> <View style={styles.pricingSection}> {/* Price, terms, subscribe button — always visible */} <Text>{price}/month — auto-renews. Cancel anytime.</Text> <SubscribeButton /> </View> </View> - Limit hero images to 120–160pt on paywalls
- Test on iPhone SE (667pt height) using the iOS Simulator
- Use a pinned bottom CTA pattern:
External references
- external · apple-guideline-3.1.2 — Apple App Store Review Guidelines § 3.1.2 — Subscriptions (paywall element visibility requirements)
Taxons
History
- 2026-04-18·v1.0.0·Initial import from app-store-iap-subscriptions·automated