feat: add subscription and billing system with Stripe integration

- Add database models for subscription tiers, vendor subscriptions,
  add-ons, billing history, and webhook events
- Implement BillingService for subscription operations
- Implement StripeService for Stripe API operations
- Implement StripeWebhookHandler for webhook event processing
- Add vendor billing API endpoints for subscription management
- Create vendor billing page with Alpine.js frontend
- Add limit enforcement for products and team members
- Add billing exceptions for proper error handling
- Create comprehensive unit tests (40 tests passing)
- Add subscription billing documentation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

static/vendor/js/billing.js

@@ -0,0 +1,187 @@
+// static/vendor/js/billing.js
+// Vendor billing and subscription management
+
+function billingData() {
+    return {
+        // State
+        loading: true,
+        subscription: null,
+        tiers: [],
+        addons: [],
+        myAddons: [],
+        invoices: [],
+
+        // UI state
+        showTiersModal: false,
+        showAddonsModal: false,
+        showCancelModal: false,
+        showSuccessMessage: false,
+        showCancelMessage: false,
+        cancelReason: '',
+
+        // Initialize
+        async init() {
+            // Check URL params for success/cancel
+            const params = new URLSearchParams(window.location.search);
+            if (params.get('success') === 'true') {
+                this.showSuccessMessage = true;
+                // Clean URL
+                window.history.replaceState({}, document.title, window.location.pathname);
+            }
+            if (params.get('cancelled') === 'true') {
+                this.showCancelMessage = true;
+                window.history.replaceState({}, document.title, window.location.pathname);
+            }
+
+            await this.loadData();
+        },
+
+        async loadData() {
+            this.loading = true;
+            try {
+                // Load all data in parallel
+                const [subscriptionRes, tiersRes, addonsRes, invoicesRes] = await Promise.all([
+                    this.apiGet('/billing/subscription'),
+                    this.apiGet('/billing/tiers'),
+                    this.apiGet('/billing/addons'),
+                    this.apiGet('/billing/invoices?limit=5'),
+                ]);
+
+                this.subscription = subscriptionRes;
+                this.tiers = tiersRes.tiers || [];
+                this.addons = addonsRes || [];
+                this.invoices = invoicesRes.invoices || [];
+
+            } catch (error) {
+                console.error('Error loading billing data:', error);
+                this.showNotification('Failed to load billing data', 'error');
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        async selectTier(tier) {
+            if (tier.is_current) return;
+
+            try {
+                const response = await this.apiPost('/billing/checkout', {
+                    tier_code: tier.code,
+                    is_annual: false
+                });
+
+                if (response.checkout_url) {
+                    window.location.href = response.checkout_url;
+                }
+            } catch (error) {
+                console.error('Error creating checkout:', error);
+                this.showNotification('Failed to create checkout session', 'error');
+            }
+        },
+
+        async openPortal() {
+            try {
+                const response = await this.apiPost('/billing/portal', {});
+                if (response.portal_url) {
+                    window.location.href = response.portal_url;
+                }
+            } catch (error) {
+                console.error('Error opening portal:', error);
+                this.showNotification('Failed to open payment portal', 'error');
+            }
+        },
+
+        async cancelSubscription() {
+            try {
+                await this.apiPost('/billing/cancel', {
+                    reason: this.cancelReason,
+                    immediately: false
+                });
+
+                this.showCancelModal = false;
+                this.showNotification('Subscription cancelled. You have access until the end of your billing period.', 'success');
+                await this.loadData();
+
+            } catch (error) {
+                console.error('Error cancelling subscription:', error);
+                this.showNotification('Failed to cancel subscription', 'error');
+            }
+        },
+
+        async reactivate() {
+            try {
+                await this.apiPost('/billing/reactivate', {});
+                this.showNotification('Subscription reactivated!', 'success');
+                await this.loadData();
+
+            } catch (error) {
+                console.error('Error reactivating subscription:', error);
+                this.showNotification('Failed to reactivate subscription', 'error');
+            }
+        },
+
+        // API helpers
+        async apiGet(endpoint) {
+            const response = await fetch(`/api/v1/vendor${endpoint}`, {
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                credentials: 'include'
+            });
+
+            if (!response.ok) {
+                throw new Error(`API error: ${response.status}`);
+            }
+
+            return response.json();
+        },
+
+        async apiPost(endpoint, data) {
+            const response = await fetch(`/api/v1/vendor${endpoint}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                credentials: 'include',
+                body: JSON.stringify(data)
+            });
+
+            if (!response.ok) {
+                const error = await response.json().catch(() => ({}));
+                throw new Error(error.detail || `API error: ${response.status}`);
+            }
+
+            return response.json();
+        },
+
+        // Formatters
+        formatDate(dateString) {
+            if (!dateString) return '-';
+            const date = new Date(dateString);
+            return date.toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric'
+            });
+        },
+
+        formatCurrency(cents, currency = 'EUR') {
+            if (cents === null || cents === undefined) return '-';
+            const amount = cents / 100;
+            return new Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: currency
+            }).format(amount);
+        },
+
+        showNotification(message, type = 'info') {
+            // Use Alpine's $dispatch if available, or fallback to alert
+            if (window.Alpine) {
+                window.dispatchEvent(new CustomEvent('show-notification', {
+                    detail: { message, type }
+                }));
+            } else {
+                alert(message);
+            }
+        }
+    };
+}