What's Included
Checkout
Stripe-hosted or embedded checkout
Subscriptions
Monthly, annual, and lifetime plans
Customer Portal
Self-service billing management
Usage Billing
Metered usage with quotas
Webhooks
Real-time subscription events
SCA Compliance
3D Secure and PSD2 ready
Quick Start
Add subscription checkout to your app:
import { useBilling, PricingTable } from '@sylphx/sdk/react'
function PricingPage() {
const { createCheckout, isLoading } = useBilling()
const handleSubscribe = async (planId: string, interval: 'monthly' | 'annual') => {
// Redirects to Stripe Checkout
await createCheckout({
planId,
interval,
successUrl: '/dashboard?upgraded=true',
cancelUrl: '/pricing',
})
}
return (
<PricingTable
onSelect={handleSubscribe}
highlightPlan="pro"
/>
)
}Zero Config
Plans are managed in the console. The SDK automatically fetches pricing and handles all Stripe interactions.
Pre-built Components
| Property | Type | Description |
|---|---|---|
<PricingTable /> | Component | Display plans with pricing |
<CheckoutButton /> | Component | One-click checkout |
<SubscriptionCard /> | Component | Current plan display |
<BillingPortal /> | Component | Link to customer portal |
<UsageDisplay /> | Component | Show usage and quotas |
<InvoiceList /> | Component | List past invoices |
import {
PricingTable,
CheckoutButton,
SubscriptionCard,
BillingPortal,
} from '@sylphx/sdk/react'
// Full pricing page
<PricingTable highlightPlan="pro" />
// Single plan checkout
<CheckoutButton planId="pro" interval="annual">
Upgrade to Pro
</CheckoutButton>
// Current subscription
<SubscriptionCard showUsage showPortalLink />
// Self-service portal
<BillingPortal>Manage Billing</BillingPortal>React Hooks
import {
useBilling,
useSubscription,
useUsage,
} from '@sylphx/sdk/react'
// Billing actions
const { createCheckout, openPortal } = useBilling()
// Current subscription
const { subscription, plan, isActive, willCancel } = useSubscription()
// Usage tracking
const { usage, quota, percentUsed, isOverLimit } = useUsage('ai_tokens')| Property | Type | Description |
|---|---|---|
useBilling() | Hook | Checkout and portal actions |
useSubscription() | Hook | Current subscription state |
useUsage() | Hook | Usage metrics and quotas |
usePlans() | Hook | Available plans and pricing |
Access Control
Gate features by subscription:
import { Protect, useSubscription } from '@sylphx/sdk/react'
// Component-based gating
<Protect plan="pro">
<ProFeatures />
</Protect>
<Protect plan={['pro', 'enterprise']}>
<AdvancedFeatures />
</Protect>
// Hook-based checking
function FeatureComponent() {
const { hasFeature, plan } = useSubscription()
if (!hasFeature('advanced_analytics')) {
return <UpgradePrompt feature="Advanced Analytics" />
}
return <AdvancedAnalytics />
}