Plans & Pricing | Sylphx Documentation

Stripe Integration

Automatic product and price sync

Feature Gating

Control access by plan tier

Trial Periods

Configurable trial days

Multiple Intervals

Monthly and annual pricing

Creating Plans

Open Dashboard

Go to App Settings → Billing → Plans in your Sylphx Dashboard.

Create Plan

Click Create Plan and configure:

Property	Type	Description
`Name`	`required`	Display name (e.g., "Pro", "Enterprise")
`Slug`	`required`	Unique identifier (e.g., "pro", "enterprise")
`Description`	`optional`	Short description for pricing pages
`Features`	`list`	List of features included in this plan
`Pricing`	`required`	Monthly and/or annual pricing

Auto-Sync

Plans are automatically synced to Stripe as Products and Prices.

Stripe Sync

Plans created in Sylphx are automatically created as Products and Prices in your connected Stripe account.

Fetching Plans

Retrieve available plans to display on your pricing page:

Server Component

import { platform } from '@/lib/platform'

export default async function PricingPage() {
  const plans = await platform.billing.getPlans()

  return (
    <div className="grid md:grid-cols-3 gap-6">
      {plans.map((plan) => (
        <div key={plan.id} className="border rounded-lg p-6">
          <h3 className="text-xl font-bold">{plan.name}</h3>
          <p className="text-gray-600 mt-2">{plan.description}</p>

          <div className="mt-4">
            <span className="text-4xl font-bold">${plan.monthlyPrice / 100}</span>
            <span className="text-gray-500">/month</span>
          </div>

          <ul className="mt-6 space-y-2">
            {plan.features.map((feature, i) => (
              <li key={i} className="flex items-center gap-2">
                <CheckIcon className="text-green-500" />
                {feature}
              </li>
            ))}
          </ul>

          <a href={`/checkout?plan=${plan.slug}`} className="mt-6 block ...">
            Get Started
          </a>
        </div>
      ))}
    </div>
  )
}

Client Component

'use client'

import { useBilling } from '@sylphx/platform-sdk/react'

export function PricingSection() {
  const { plans, isLoading } = useBilling()

  if (isLoading) return <div>Loading plans...</div>

  return (
    <div className="grid md:grid-cols-3 gap-6">
      {plans?.map((plan) => (
        <PlanCard key={plan.id} plan={plan} />
      ))}
    </div>
  )
}

Plan Object

Each plan includes the following properties:

Property	Type	Description
`id`	`string`	Unique plan ID
`slug`	`string`	URL-safe identifier
`name`	`string`	Display name
`description`	`string`	Plan description
`features`	`string[]`	List of included features
`monthlyPrice`	`number`	Monthly price in cents
`annualPrice`	`number`	Annual price in cents
`stripePriceIds`	`object`	Stripe price IDs for each interval

Feature Gating

Check if a user has access to specific features based on their plan:

import { platform } from '@/lib/platform'
import { currentUser } from '@sylphx/platform-sdk/nextjs'

export default async function PremiumFeature() {
  const user = await currentUser()
  const subscription = await platform.billing.getSubscription(user!.id)

  // Check plan tier
  if (subscription?.plan.slug !== 'pro' && subscription?.plan.slug !== 'enterprise') {
    return (
      <div>
        <p>This feature requires a Pro or Enterprise plan.</p>
        <a href="/pricing">Upgrade Now</a>
      </div>
    )
  }

  return <div>Premium feature content...</div>
}

// Or use a helper function
async function hasFeature(userId: string, feature: string): Promise<boolean> {
  const subscription = await platform.billing.getSubscription(userId)
  if (!subscription || subscription.status !== 'active') return false
  return subscription.plan.features.includes(feature)
}

Free Tier

Handle users without a subscription (free tier):

const subscription = await platform.billing.getSubscription(userId)

if (!subscription) {
  // User is on free tier
  // Apply free tier limits
}

// Client-side
const { subscription } = useBilling()
const isPro = subscription?.plan.slug === 'pro'
const isFree = !subscription

Trials

You can configure trial periods for plans in the Sylphx Dashboard. Trials allow users to access paid features for a limited time before billing begins.

Checkout

Create checkout sessions

Subscriptions

Manage active subscriptions

Webhooks

Handle billing events