Payments

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

Tailar is a production-ready Next.js foundation. The CLI setup wizard composes templates, modules, and providers into code you own, including auth, billing, email, and database.

Last updated

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 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
}