Code Examples

Protect any button by adding the verb= attribute:

export default function ExportButton() {
  const handleExport = () => {
    // This only runs if user has access
    exportToCSV()
  }
  
  return (
    <button 
      verb="export_data"
      onClick={handleExport}
      className="btn-primary"
    >
      Export to CSV
    </button>
  )
}

Protect entire components by wrapping in a div with verb=:

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      
      {/* Anyone can see this */}
      <BasicStats />
      
      {/* Only Pro+ users can access this */}
      <div verb="advanced_analytics">
        <AdvancedAnalytics />
        <RevenueChart />
        <PredictiveInsights />
      </div>
    </div>
  )
}

Programmatically check access with the usePaywallOS hook:

import { usePaywallOS } from '@paywallos/sdk'

export default function FeatureCard() {
  const { checkVerb, userTier } = usePaywallOS()
  
  const handleClick = async () => {
    const result = await checkVerb('premium_feature')
    
    if (result.allowed) {
      // User has access
      activateFeature()
    } else {
      // User needs to upgrade
      console.log(result.message) // "Upgrade to Pro"
    }
  }
  
  return (
    <button onClick={handleClick}>
      Premium Feature
      {userTier === 'free' && <Badge>Pro</Badge>}
    </button>
  )
}

Show different UI based on user tier:

import { usePaywallOS } from '@paywallos/sdk'

export default function FeatureToggle() {
  const { userTier, checkVerb } = usePaywallOS()
  const [canExport, setCanExport] = useState(false)
  
  useEffect(() => {
    checkVerb('export_data').then(r => setCanExport(r.allowed))
  }, [])
  
  return (
    <div>
      {canExport ? (
        <button onClick={handleExport}>
          Export Data
        </button>
      ) : (
        <div>
          <Lock /> Export (Pro feature)
          <Link href="/pricing">Upgrade</Link>
        </div>
      )}
    </div>
  )
}

Check multiple verbs at once:

export default function ActionMenu() {
  return (
    <div className="dropdown-menu">
      <button verb="edit_content">
        Edit
      </button>
      
      <button verb="delete_content">
        Delete
      </button>
      
      <button verb="share_content">
        Share
      </button>
      
      <button verb="export_content">
        Export
      </button>
    </div>
  )
}

// PaywallOS checks each verb independently
// and blocks/allows based on user's tier

Display usage information to users:

import { usePaywallOS } from '@paywallos/sdk'

export default function ExportButton() {
  const { checkVerb } = usePaywallOS()
  const [usage, setUsage] = useState(null)
  
  useEffect(() => {
    checkVerb('export_data').then(result => {
      setUsage(result.usageLimit)
    })
  }, [])
  
  return (
    <div>
      <button verb="export_data">
        Export Data
      </button>
      
      {usage && (
        <p className="text-sm text-gray-600">
          {usage.remaining} of {usage.limit} exports remaining
        </p>
      )}
    </div>
  )
}