Next.js
BillingPortal
Hazır abonelik sayfaları — plan seçimi, ödeme formu, portal, yönetim paneli
Kullanım
import { BillingPortal } from '@vinenastudio/recurr/nextjs/ui'
import { management } from '@/lib/subscriptions'
import '@vinenastudio/recurr/nextjs/ui/styles.css'
export default BillingPortal({
apiBase: '/api/billing',
afterSuccessPath: '/dashboard',
management, // opsiyonel — yönetim sayfasını cookie ile korur
})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ı) |
CSS Stili
UI bileşenleri Tailwind CSS v4 ile stillendirilmiştir. Stylesheet'i app layout'unuza bir kez import edin:
import '@vinenastudio/recurr/nextjs/ui/styles.css'Tasarım Kararları
- Explicit light surface — her wrapper
bg-gray-50/bg-whitevetext-gray-900set 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-500kullanır. - Subtle card — her sayfa kartında
rounded-xl border border-gray-200 shadow-sm.