88 lines
2.3 KiB
Markdown
88 lines
2.3 KiB
Markdown
# Next.js Autumn Starter Template
|
|
|
|
[Autumn](https://useautumn.com) is an open-source layer between Stripe and your application, allowing you to create any pricing model and embed it with a couple lines of code.
|
|
|
|
This template demonstrates how you can set up pricing in just 3 lines of code using Autumn. The example used is a simple AI chat message app.
|
|
|
|
View the example app here: https://nextjs-autumn-template.vercel.app/
|
|
|
|
## Getting Started
|
|
|
|
1. Clone the repository:
|
|
|
|
```bash
|
|
git clone https://github.com/useautumn/nextjs-autumn-template.git
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
2. Create an account at [app.useautumn.com](https://app.useautumn.com)
|
|
|
|
3. Get your Autumn secret key from the [sandbox environment](https://app.useautumn.com/sandbox/dev) and add it to `.env.local`:
|
|
|
|
```env
|
|
AUTUMN_SECRET_KEY=am_sk_test_OAFUOL0meFCjpMMmFeU13gHnrEOGAHWp2YTLECyY7k
|
|
```
|
|
|
|
4. Connect your Stripe account in the [integrations page](https://app.useautumn.com/sandbox/integrations/stripe)
|
|
|
|
## Understanding the Implementation
|
|
|
|
This template implements a simple AI chat message app where users can:
|
|
|
|
- Send messages (with usage limits)
|
|
- Upgrade to a pro plan
|
|
- View their usage and subscription details
|
|
|
|
### Key Endpoints
|
|
|
|
1. **Check if a user can access a feature** (`/entitled`)
|
|
|
|
```typescript
|
|
// Check if user can send a message
|
|
const allowed = await entitled({
|
|
customerId: CUSTOMER_ID,
|
|
featureId: FEATURE_ID,
|
|
});
|
|
|
|
if (!allowed) {
|
|
toast.error("You're out of messages!");
|
|
return;
|
|
}
|
|
```
|
|
|
|
2. **Track a user's usage of a feature** (`/events`)
|
|
|
|
```typescript
|
|
// Record that a message was sent
|
|
await sendEvent({
|
|
customerId: CUSTOMER_ID,
|
|
featureId: FEATURE_ID,
|
|
});
|
|
```
|
|
|
|
3. **Get a Stripe Checkout URL so the customer can purchase a plan** (`/attach`)
|
|
|
|
```typescript
|
|
// Upgrade user to pro plan
|
|
const res = await attachProduct({
|
|
customerId: CUSTOMER_ID,
|
|
productId: "pro",
|
|
});
|
|
window.open(res.checkout_url, "_blank");
|
|
```
|
|
|
|
<!-- ### Additional Features
|
|
|
|
The template also includes `getOrCreateCustomer` to fetch customer details, entitlements, and subscription status, which is used in the customer details card in the UI:
|
|
|
|
```typescript
|
|
const customer = await getOrCreateCustomer(CUSTOMER_ID);
|
|
// Returns: customer details, product subscriptions, and feature entitlements
|
|
``` -->
|
|
|
|
## Learn More
|
|
|
|
- [Autumn Documentation](https://docs.useautumn.com)
|
|
- [Next.js Documentation](https://nextjs.org/docs)
|