Patterns · Pages
Paywall
PaywallPagePaywallScreen
Plans as a radio group, one Continue button, restore and terms.
Web
Live, at a real viewport width. Switch to Phone to see the responsive layout.
Usage
import { PaywallPage } from '@nexub/patterns';
<PaywallPage title="Payub Plus" plans={plans} defaultPlan="yearly" onSubscribe={subscribe} onRestore={restore} terms={terms} />On iOS & Android: PaywallScreen
@nexub/react-native/patternsAlpha
import { PaywallScreen } from '@nexub/react-native/patterns';
<PaywallScreen title="Payub Plus" plans={plans} onSubscribe={buy} onRestore={restore} />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Purchases | Your checkout. | In-app purchase; Restore purchases is required by the App Store. |
Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
PaywallScreen props
| Prop | Type | Default | Description |
|---|---|---|---|
| titlerequired | string | — | — |
| plansrequired | Plan[] | — | — |
| defaultPlan | string | — | — |
| onSubscriberequired | (planId: string) => void | — | — |
| onRestore | () => void | — | — |
| terms | string | — | Legal copy (auto-renewal terms). |