Paywall

<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

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content shown when subscribed
`fallback`	`(redirectToCheckout: () => void) => ReactNode`	Built-in upgrade prompt	Render prop called with `redirectToCheckout` when not subscribed
`loadingComponent`	`ReactNode`	`null`	Content shown while loading
`autoRedirect`	`boolean`	`true`	Automatically redirect to checkout when no subscription is detected
`style`	`CSSProperties`	—	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 Status	What renders
Loading	`loadingComponent`
`active` or `trial`	`children`
`past_due`, `canceled`, `expired`, `none`	`fallback`

Overview

Core Concepts

Authentication

SDKs

Guides

Usage

Props

Custom Fallback

Behavior

​Usage

​Props

​Custom Fallback

​Behavior

Usage

Props

Custom Fallback

Behavior