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

We’re going to have a “Pro” plan that gives users 10 chat messages per month for $20 per month.

​
1. Create the product

Create the Pro plan in the Products tab.

​
2. Install autumn-js

To add the Pro plan to your app, first install the Autumn library.

npm install autumn-js

If you’re using a separate backend and frontend, make sure to install the library in both.

​
3. Add your Autumn secret key

Create an Autumn Secret API key from the dashboard, and add it to your backend .env file.

.env
AUTUMN_SECRET_KEY=am_sk_1234567890

​
4. Mount the Autumn handler server-side

This creates routes in the /api/autumn/* path, which will be used by Autumn’s frontend React hooks. These routes interact with Autumn’s API (eg attach, check, track, customer) to handle the billing logic.

The handler takes in an identify function that returns a customerId. This is typically your internal user ID or organization ID from your auth provider. These examples use better-auth.

// app/api/autumn/[...all]/route.ts

import { autumnHandler } from "autumn-js/next";
import { auth } from "@/lib/auth";

export const { GET, POST } = autumnHandler({
  identify: async (request) => {
    const session = await auth.api.getSession({
      headers: request.headers,
    });

    return {
      customerId: session?.user.id,
      customerData: {
        name: session?.user.name,
        email: session?.user.email,
      },
    };
  },
});

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

​
5. Set up <AutumnProvider /> client-side

Client side, wrap your application with the <AutumnProvider> component, and pass in your backend URL. This lets Autumn know how to reach the backend handler you mounted in the previous step.

If you’re using a fullstack framework like Next.js, your backend URL will be the same as your frontend URL (eg http://localhost:3000).

.env
AUTUMN_BACKEND_URL=http://localhost:8000
import { AutumnProvider } from "autumn-js/react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html>
      <body>
        <AutumnProvider backendUrl={process.env.AUTUMN_BACKEND_URL}>
          {children}
        </AutumnProvider>
      </body>
    </html>
  );
}

AutumnProvider can also take in a getBearerToken function, which should be used for auth frameworks with separate backend and frontend, eg using Clerk with Express.

​
6. Set up Payments

Call attach to redirect the customer to a Stripe checkout page when they want to purchase the Pro plan. Once they’ve paid, Autumn will grant them access to the features we defined.

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

React
import { useAutumn } from "autumn-js/react";

export default function PurchaseButton() {
  const { attach } = useAutumn();

  return (
    <button
      onClick={async () => {
        await attach({ productId: "pro" });
      }}
    >
      Upgrade to Pro
    </button>
  );
}

​
7. Integrate Pricing Logic

There are 3 key functions you need to handle the billing logic once the customer has purchased the Pro plan:

  • check to see if the customer is allowed to send a message.
  • track a usage event in Autumn.
  • customer to display usage data in the UI.
import { useAutumn, useCustomer } from "autumn-js/react";

export default function SendChatMessage() {
  const { check } = useAutumn();
  const { customer, refetch } = useCustomer();

  return (
    <>
      <button
        onClick={async () => {
          let { data } = await check({ featureId: "messages" });

          if (data?.allowed) {
            //... send chatbot message server-side, then
            await refetch(); // refetch customer usage data
            alert("Remaining messages: " + customer.features.messages.balance);
          } else {
            alert("You're out of messages");
          }
        }}
      >
        Send Message
      </button>
    </>
  );
}

​
8. Next steps

Nice! You’ve now integrated Autumn into your application. Next, learn how to handle billing flows like upgrades, cancellations and paywalls by using Autumn’s shadcn/ui components or building your own.