Payments

Multi-provider payment system (Stripe, LemonSqueezy) with subscription management. Automatically adapts to user-based or organization-based auth.

Installation

1

Install the Package

Add Payments to your project using the Tailar CLI:

pnpm dlx tailar@latest add payments
2

Set Environment Variables

Create a `.env` file in the root of your project and add the following environment variables:

.env
1
# Stripe Configuration
2
STRIPE_SECRET_KEY=sk_test_...
3
STRIPE_WEBHOOK_SECRET=whsec_...
4
NEXT_PUBLIC_APP_URL=http://localhost:3000

Preview

Explore representative UI flows and snippets generated for this module (same previews as on the home page modules section).

Choose a plan

Select the perfect plan for your needs

Solo

For developers building their own products.

$199usd

One-time payment · Lifetime access

  • 1 seat
  • Unlimited projects
  • All available modules
  • UI Blocks
  • Future updates included
  • MIT — Code is yours, no attribution
  • Creating on behalf of clients

Team

For small product teams. The foundation is generated and shared.

$599usd

One-time payment · Lifetime access

  • Everything in Solo
  • Up to 5 developer seats
  • Unlimited projects across all seats
  • Consistent setup across the team
  • Creating on behalf of clients

Agency

For agencies building on behalf of clients. Commercial use is explicit.

$999usd

One-time payment · Lifetime access

  • Everything in Team
  • Unlimited seats — your whole studio
  • Commercial use for client work

Usage

Once you've installed Payments, you can start using the following actions:

getActivePrices

Get all active pricing plans from Stripe.

1
import { getActivePrices } from '@/lib/payments'
2
 
3
const prices = await getActivePrices()

getPrice

Get a specific price by ID from Stripe.

1
import { getPrice } from '@/lib/payments'
2
 
3
const price = await getPrice(priceId)

subscribeToPlan

Subscribe the current user/organization to a billing plan. Returns a redirect URL for paid plans or success status for free plans.

1
import { subscribeToPlan } from '@/lib/payments'
2
 
3
const result = await subscribeToPlan(priceId)
4
if (result.status === 'redirect') {
5
  redirect(result.url)
6
}

getSubscription

Get the current user's/organization's active subscription.

1
import { getSubscription } from '@/lib/payments'
2
 
3
const subscription = await getSubscription()

getSubscriptionDetails

Get detailed subscription information including payment method and billing period (organization-based only).

1
import { getSubscriptionDetails } from '@/lib/payments'
2
 
3
const details = await getSubscriptionDetails()

cancelSubscription

Cancel the current subscription. Access continues until the end of the billing period.

1
import { cancelSubscription } from '@/lib/payments'
2
 
3
await cancelSubscription()

usePaymentActions

React hook for payment operations in client components. Provides subscribe method and loading states.

1
import { usePaymentActions } from '@/lib/payments/hooks'
2
 
3
function PlanCard() {
4
  const { subscribe, isLoading } = usePaymentActions()
5
  
6
  const handleSubscribe = async () => {
7
    await subscribe(priceId)
8
  }
9
}