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, mount the handler. This will create routes in the /api/autumn/* path, which will be called by Autumn’s frontend React library. These routes in turn call Autumn’s API.

The handler takes in an identify function that should return a customerId. This is typically your internal user ID or organization ID from your auth provider.

// 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) => {
    // get the user from your auth provider (example: better-auth)
    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, 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).

NEXT_PUBLIC_AUTUMN_BACKEND_URL=http://localhost:3000

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html>
      <body>
        <AutumnProvider backendUrl={process.env.NEXT_PUBLIC_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. Enable 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.

If their payment method is already on file, AttachDialog will open instead to let the customer confirm their new subscription or purchase, then handle the payment.

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

React
import { useCustomer, AttachDialog } from "autumn-js/react";

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

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

​
7. Handle 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 (typically done server-side)
  • customer to display usage data in the UI.
import { useCustomer } from "autumn-js/react";

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

  return (
    <>
      <button
        onClick={async () => {
          if (allowed({ featureId: "messages" })) {
            //... 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 use Autumn’s components to show a pricing table, and handle upgrades, downgrades and paywalls.