* 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.
144 lines
3.2 KiB
Plaintext
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.
|