Skip to main content
<Paywall> renders its children only when the tenant has an active subscription. Otherwise it shows a customizable upgrade prompt.

​
Usage

import { Paywall } from 'crovver-react';

<Paywall>
  <PremiumDashboard />
</Paywall>

​
Props

PropTypeDefaultDescription
childrenReactNode—Content shown when subscribed
fallback(redirectToCheckout: () => void) => ReactNodeBuilt-in upgrade promptRender prop called with redirectToCheckout when not subscribed
loadingComponentReactNodenullContent shown while loading
autoRedirectbooleantrueAutomatically redirect to checkout when no subscription is detected
styleCSSProperties—Inline styles applied to the default paywall card

​
Custom Fallback

fallback is a render prop — it receives redirectToCheckout so you can wire your own CTA: 
<Paywall
  fallback={(redirectToCheckout) => (
    <div className="upgrade-banner">
      <h2>Subscribe to access this feature</h2>
      <button onClick={redirectToCheckout}>Upgrade</button>
    </div>
  )}
>
  <AnalyticsDashboard />
</Paywall>

​
Behavior

Subscription StatusWhat renders
LoadingloadingComponent
active or trialchildren
past_due, canceled, expired, nonefallback