BillingPortal

Hazır abonelik sayfaları — plan seçimi, ödeme formu, portal, yönetim paneli

Kullanım

app/billing/[[...billing]]/page.tsx

import { BillingPortal } from '@vinenastudio/recurr-nextjs/ui'
import { management } from '@/lib/billing'

export default BillingPortal({
  apiBase: '/api/billing',
  afterSuccessPath: '/dashboard',
  management,
})

CSS'i app layout'unuza bir kez import edin:

app/layout.tsx

import '@vinenastudio/recurr-nextjs/ui/styles.css'

Konfigürasyon

Alan	Tip	Varsayılan	Açıklama
`apiBase`	`string`	—	Billing API route'unun base path'i
`afterSuccessPath`	`string`	`"/"`	Başarılı ödeme sonrası yönlendirme
`billingBasePath`	`string`	`"/billing"`	Billing sayfalarının URL prefix'i
`management`	`Management`	—	Yönetim sayfasını cookie ile korur (opsiyonel)
`testMode`	`boolean`	`false`	Checkout sayfasında test kart seçici gösterir
`pages`	`object`	—	Sayfaları custom bileşenlerle override et (opsiyonel)

`createBillingApp` ile kullanım

lib/billing.ts

export const billingApp = createBillingApp({
  // ...
  pages: {
    'choose-plan': MyPlanSelector,
    portal: MyPortal,
  },
})

Sayfalar

Segment	Bileşen	Açıklama
`/billing/choose-plan`	`PlanSelectorPage`	Plan seçimi + email girişi
`/billing/checkout`	`DirectCheckoutPage`	Kart formu — doğrudan PayTR'ye gönderilir
`/billing/success`	`SuccessPage`	Ödeme sonrası onay
`/billing/portal`	`PortalPage`	Abonelik durumu sorgulama ve iptal
`/billing/management`	`ManagementPage`	Abone tablosu + gelir istatistikleri (cookie korumalı)

management ve login sayfaları override edilemez.

Sayfa Override

pages seçeneği ile 4 kullanıcı sayfasını kendi bileşeninizle değiştirebilirsiniz. Override ettiğiniz bileşen props almaz — tüm veri ve aksiyonlara headless hook'lar üzerinden ulaşırsınız.

app/billing/[[...billing]]/page.tsx

import { BillingPortal } from '@vinenastudio/recurr-nextjs/ui'
import { management } from '@/lib/billing'
import { MyPlanSelector } from './components/MyPlanSelector'
import { MyPortal } from './components/MyPortal'

export default BillingPortal({
  apiBase: '/api/billing',
  afterSuccessPath: '/dashboard',
  management,
  pages: {
    'choose-plan': MyPlanSelector,
    checkout: MyCheckout,
    success: MySuccess,
    portal: MyPortal,
  },
})

app/billing/components/MyPlanSelector.tsx

'use client'

import { usePlans } from '@vinenastudio/recurr-nextjs/ui'

export function MyPlanSelector() {
  const { plans, selectedPlanId, setSelectedPlanId, email, setEmail, goToCheckout } = usePlans()

  return (
    // kendi design system'inizle tamamen özgür bir UI
  )
}

Detaylı hook API'ı için Sayfa Özelleştirme sayfasına bakın.

CSS Stili

UI bileşenleri Tailwind CSS v4 ile stillendirilmiştir.

Tasarım Kararları

Explicit light surface — her wrapper bg-gray-50 / bg-white ve text-gray-900 set eder; host app'in koyu arka planında da doğru görünür.
Violet accent — birincil butonlar ve focus ring violet-600 / violet-500 kullanır.
Subtle card — her sayfa kartında rounded-xl border border-gray-200 shadow-sm.