Files
myeasycms-v2/apps/web/content/documentation/billing/subscriptions.mdoc
Giancarlo Buomprisco 116d41a284 Changelog (#399)
* feat: add changelog feature and update site navigation

- Introduced a new Changelog page with pagination and detailed entry views.
- Added components for displaying changelog entries, pagination, and entry details.
- Updated site navigation to include a link to the new Changelog page.
- Enhanced localization for changelog-related texts in marketing.json.

* refactor: enhance Changelog page layout and entry display

- Increased the number of changelog entries displayed per page from 2 to 20 for better visibility.
- Improved the layout of the Changelog page by adjusting the container styles and removing unnecessary divs.
- Updated the ChangelogEntry component to enhance the visual presentation of entries, including a new date badge with an icon.
- Refined the CSS styles for Markdoc headings to improve typography and spacing.

* refactor: enhance Changelog page functionality and layout

- Increased the number of changelog entries displayed per page from 20 to 50 for improved user experience.
- Updated ChangelogEntry component to make the highlight prop optional and refined the layout for better visual clarity.
- Adjusted styles in ChangelogHeader and ChangelogPagination components for a more cohesive design.
- Removed unnecessary order fields from changelog markdown files to streamline content management.

* feat: enhance Changelog entry navigation and data loading

- Refactored ChangelogEntry page to load previous and next entries for improved navigation.
- Introduced ChangelogNavigation component to facilitate navigation between changelog entries.
- Updated ChangelogDetail component to display navigation links and entry details.
- Enhanced data fetching logic to retrieve all changelog entries alongside the current entry.
- Added localization keys for navigation text in marketing.json.

* Update package dependencies and enhance documentation layout

- Upgraded various packages including @turbo/gen and turbo to version 2.6.0, and react-hook-form to version 7.66.0.
- Updated lucide-react to version 0.552.0 across multiple packages.
- Refactored documentation layout components for improved styling and structure.
- Removed deprecated loading components and adjusted navigation elements for better user experience.
- Added placeholder notes in changelog entries for clarity.
2025-11-01 11:59:52 +07:00

144 lines
3.2 KiB
Plaintext

---
title: "Billing Overview"
description: "Learn how to manage subscriptions and billing in your application."
publishedAt: 2024-04-11
order: 0
status: "published"
---
> **Note:** This is mock/placeholder content for demonstration purposes.
The billing system supports subscription-based pricing with multiple tiers and payment providers.
## Supported Providers
### Stripe
Industry-standard payment processing with comprehensive features:
- Credit card payments
- Subscription management
- Invoice generation
- Tax calculation
- Customer portal
### Paddle
Merchant of record solution that handles:
- Global tax compliance
- Payment processing
- Subscription billing
- Revenue recovery
## Subscription Tiers
Define your subscription tiers in the billing configuration:
```typescript
export const plans = [
{
id: 'free',
name: 'Free',
price: 0,
features: ['Feature 1', 'Feature 2'],
},
{
id: 'pro',
name: 'Professional',
price: 29,
interval: 'month',
features: ['All Free features', 'Feature 3', 'Feature 4'],
},
{
id: 'enterprise',
name: 'Enterprise',
price: 99,
interval: 'month',
features: ['All Pro features', 'Feature 5', 'Priority support'],
},
];
```
## Subscription Lifecycle
1. **Customer selects plan** - User chooses subscription tier
2. **Payment processed** - Provider handles payment collection
3. **Webhook received** - Your app receives confirmation
4. **Subscription activated** - User gains access to features
5. **Recurring billing** - Automatic renewal each period
6. **Cancellation** - User can cancel anytime
## Managing Subscriptions
### Creating a Subscription
```typescript
import { createCheckoutSession } from '~/lib/billing/checkout';
const session = await createCheckoutSession({
accountId: user.accountId,
planId: 'pro',
returnUrl: '/dashboard',
});
// Redirect user to payment page
redirect(session.url);
```
### Checking Subscription Status
```typescript
import { getSubscription } from '~/lib/billing/subscription';
const subscription = await getSubscription(accountId);
if (subscription.status === 'active') {
// User has active subscription
}
```
### Canceling a Subscription
```typescript
import { cancelSubscription } from '~/lib/billing/subscription';
await cancelSubscription(subscriptionId);
```
## Webhook Handling
Webhooks notify your application of billing events:
```typescript
export async function POST(request: Request) {
const signature = request.headers.get('stripe-signature');
const payload = await request.text();
const event = stripe.webhooks.constructEvent(
payload,
signature,
process.env.STRIPE_WEBHOOK_SECRET
);
switch (event.type) {
case 'customer.subscription.created':
await handleSubscriptionCreated(event.data.object);
break;
case 'customer.subscription.updated':
await handleSubscriptionUpdated(event.data.object);
break;
case 'customer.subscription.deleted':
await handleSubscriptionCanceled(event.data.object);
break;
}
return new Response('OK');
}
```
## Testing
Use test mode credentials for development:
- Test card: 4242 4242 4242 4242
- Any future expiry date
- Any CVC
All test transactions will appear in your provider's test dashboard.