Billing

Customer Portal

Stripe Customer Portal integration.

Nuda Kit integrates Stripe Customer Portal to allow users to manage their subscriptions, payment methods, and billing information without you building custom UI.

Overview

The Customer Portal provides:

Subscription Management

Users can upgrade, downgrade, or cancel subscriptions.

Payment Methods

Add, remove, or update payment methods.

Billing History

View and download past invoices.

Hosted by Stripe

Secure, PCI-compliant, no custom UI needed.

How It Works

User clicks "Manage Subscription"
              │
              ▼
┌─────────────────────────┐
│   POST /billing/        │
│   create-portal         │
└───────────┬─────────────┘
            │
            ▼
┌─────────────────────────┐
│  Create Stripe Customer │ ◀── Only if not exists
│  (if needed)            │
└───────────┬─────────────┘
            │
            ▼
┌─────────────────────────┐
│  Create Portal Session  │ ◀── Stripe API
└───────────┬─────────────┘
            │
            ▼
┌─────────────────────────┐
│   Return Portal URL     │
└───────────┬─────────────┘
            │
            ▼
┌─────────────────────────┐
│  Redirect to Stripe     │ ◀── User manages subscription
│  Customer Portal        │
└───────────┬─────────────┘
            │
            ▼
┌─────────────────────────┐
│  Return to App          │ ◀── /settings/billing
└─────────────────────────┘

API Endpoint

MethodEndpointDescription
POST/billing/create-portalCreates a portal session

Response:

{
  "message": "portal created",
  "data": {
    "portalUrl": "https://billing.stripe.com/p/session/..."
  }
}

What's Included

Backend

  • CreatePortalController — Handles portal session creation
  • StripeService — Portal session with automatic customer creation
  • Automatic Stripe customer ID storage on user model

Frontend

  • Billing Settings Page — Complete UI at /settings/billing
  • Branded Stripe Button — Styled "Manage Subscription" button
  • Loading states and error handling
  • Conditional display for paid users only

Portal Features

When users access the Customer Portal, they can:

FeatureDescription
View SubscriptionSee current plan and billing cycle
Switch PlansUpgrade or downgrade (if configured)
Cancel SubscriptionEnd subscription with optional feedback
Update PaymentAdd or change credit card
Download InvoicesAccess billing history
Update AddressChange billing information

Stripe Dashboard Configuration

Configure the Customer Portal in your Stripe Dashboard:

  1. Go to SettingsBillingCustomer Portal
  2. Configure allowed actions:
SettingRecommended
Allow customers to update subscriptions✅ Enable
Allow customers to cancel subscriptions✅ Enable
Allow customers to update payment methods✅ Enable
Allow customers to view invoice history✅ Enable
  1. Customize branding (logo, colors, business info)
  2. Set terms of service and privacy policy URLs

Security Features

FeatureDescription
User IsolationUsers can only access their own portal
Session ExpirationPortal sessions expire after ~5 minutes
PCI ComplianceAll payment data handled by Stripe
No Sensitive DataOnly portal URL returned to frontend

Return URL

After users finish in the portal, they're automatically redirected back to:

/settings/billing

This can be customized in the StripeService configuration.


Testing

EnvironmentNotes
Test ModeUse test cards (4242 4242 4242 4242)
Stripe CLIForward webhooks during local testing
Portal PreviewTest in Stripe Dashboard before production

Resources