Payments | Tailar

Installation

Install the Package

Add Payments to your project using the Tailar CLI:

pnpm dlx tailar@latest add payments

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 for your whole studio
Commercial use for client work

File Tree

The following files are installed when you add Payments:

File Structure

1
├─ app/
2
│  ├─ (protected)/
3
│  │  ├─ choose-plan/
4
│  │  │  └─ page.tsx
5
│  │  └─ (app)/
6
│  │     └─ settings/
7
│  │        └─ plan/
8
│  │           └─ page.tsx
9
│  ├─ api/
10
│  │  └─ stripe/
11
│  │     └─ webhook/
12
│  │        └─ route.ts
13
│  └─ payment/
14
│     └─ success/
15
│        └─ page.tsx
16
├─ components/
17
│  ├─ payments/
18
│  │  ├─ choose-plan-form.tsx
19
│  │  ├─ payment-card.tsx
20
│  │  ├─ payment-icons.tsx
21
│  │  ├─ plan-card.tsx
22
│  │  ├─ plan-settings-form.tsx
23
│  │  └─ price-card.tsx
24
│  └─ settings/
25
│     └─ setting-tabs.tsx
26
├─ lib/
27
│  ├─ auth/
28
│  │  └─ actions/
29
│  │     └─ deletion-rules.ts
30
│  └─ payments/
31
│     ├─ config.ts
32
│     ├─ types.ts
33
│     ├─ plans.ts
34
│     ├─ plan-tier.ts
35
│     ├─ index.ts
36
│     ├─ hooks.ts
37
│     └─ actions.ts
38
├─ messages/
39
│  ├─ en.json
40
│  ├─ es.json
41
│  └─ fr.json
42
└─ prisma/
43
   └─ schema/
44
      └─ payments.prisma

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
}