Create your Autumn account and let’s create the pricing for a premium AI chatbot.

We’re going to charge users $20 per month for 10 messages.

​
1. Create the product

Create a product in the Products tab.

1

2

3

​
2. Install autumn-js

npm
npm install autumn-js

​
3. Set up <AutumnProvider>

Wrap your application with the <AutumnProvider> component in your root layout.tsx file. This sets the the customer_id for the current user across your application.

Autumn provides native integrations with common auth libraries, like better-auth, Clerk and Supabase Auth

// app/layout.tsx

import { AutumnProvider } from "autumn-js/next";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html>
      <body>
        <AutumnProvider
          customerId="YOUR_CUSTOMER_ID"
          customerData={{ name: "John Doe" }}
        >
          {children}
        </AutumnProvider>
      </body>
    </html>
  );
}

Your layout file must be a server component (as it is by default in Next.js).

​
4. Integrate Autumn

From our application’s frontend, whenever a customer wants to send a chatbot messages, we’ll first check if they’re allowed to.

If they are, we’ll send a usage event to Autumn. Autumn will then update the customer’s usage and remaining balance.

When they click the “Upgrade to Pro” button, they’ll be redirected to a Stripe checkout page to subscribe.

// app/chatbot/page.tsx
"use client";

import { useAutumn } from "autumn-js/next";

export default function BillingPage() {
  const { customer, attach, entitled, sendEvent } = useAutumn();

  return (
    <div>
      <h1>Welcome {customer?.name}</h1>
      {/* Redirect to Stripe checkout page */}
      <button onClick={() => attach({ productId: "pro" })}>
        Upgrade to Pro
      </button>
      <button
        onClick={async () => {
          // Check if the customer is entitled to send a message
          let { allowed } = await entitled({ featureId: "messages" });

          if (allowed) {
            // Send a usage event to Autumn
            await event({ featureId: "messages" });
          } else {
            alert("You don't have access to this feature");
          }
        }}
      >
        Send message
      </button>
    </div>
  );
}

Autumn will automatically create a customer if the customer ID is new.

Make sure you’ve pasted in your Stripe test secret key sk_test_... in the Autumn dashboard.