Skip to main content
Autumn’s client-side hooks and UI components allow you to handle billing directly from your frontend.
Client libraries are supported for React and Node.js apps. Please use our Server-side SDK for other frameworks and languages.
In this example we’ll create the pricing for a premium AI chatbot. We’re going to have:
  • A Free plan that gives users 5 chat messages per month for free
  • A Pro plan that gives users 100 chat messages per month for $20 per month.

​
1. Create your pricing plans

Create a product for each plan that your app offers. In our example we’ll create a “Free” and “Pro” plan.
  • Dashboard
  • CLI
Create your Autumn account, and the Free and Pro plans in the Plans tab.
  • On the Plans page, click Create Plan.
  • Name the plan (eg, “Free”) and select plan type Free
  • Toggle the auto-enable flag, so that the plan is assigned whenever customers are created
  • In the plan editor, click Add Feature to Plan, and create a Metered, Consumable feature for “messages”
  • Configure the plan to grant 5 messages, and set the interval to per month
  • Click Save

Your Free plan should look like this

  • On the Plans page, click Create Plan.
  • Name the plan (eg, “Pro”) and select plan type Paid, Recurring, and set the price to $20 per month
  • In the plan editor, click Add Feature to Plan, and add the messages feature that you created in the Free plan
  • Configure the plan to grant 100 messages, and set the interval to per month
  • Click Save

Your Pro plan should look like this

Browse our Cookbooks for guides on setting up credit systems, top ups and other common pricing models.

​
2. Installation

Create an Autumn Secret key, and paste it in your .env variables. Then, install the Autumn SDK.
.env
AUTUMN_SECRET_KEY=am_sk_test_42424242...

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

​
Add Endpoints Server-side

Server-side, mount the Autumn handler. This will create endpoints in the /api/autumn/* path, which will be called by Autumn’s frontend React hooks. These endpoints in turn call Autumn’s API. The handler takes in an identify function where you should pass in the 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, //or org ID
      customerData: {
        name: session?.user.name,
        email: session?.user.email,
      },
    };
  },
});
Autumn will automatically create a customer if the customer ID is new, and enable the Free plan for them.
Once you login to your app, you will see your user under the customers page.

​
Add Provider Client-side

Client side, wrap your application with the <AutumnProvider> component. If your backend is hosted on a separate URL (eg, when using Vite), pass it into the backendUrl prop. 
//layout.tsx
import { AutumnProvider } from "autumn-js/react";

export default function RootLayout({ children }: {
  children: React.ReactNode,
}) {
  return (
    <html>
      <body>
        <AutumnProvider>
          {children}
        </AutumnProvider>
      </body>
    </html>
  );
}
The Provider component can also take in a getBearerToken function, which should be used for auth frameworks with separate backend and frontend, eg using Clerk with Express.This will pass the auth token in the Authorization header from the request to the backend, which can be used in the autumnHandler identify function.

​
3. Stripe Payment Flow

Call checkout to redirect the customer to a Stripe checkout page when they want to purchase the Pro plan. Once they’ve paid, Autumn will grant access to “100 messages per month” defined in Step 1. For subsequent payments, no Checkout URL is required. You can pass in Autumn’s <CheckoutDialog /> component to the function, which will automatically open instead if there’s no checkout URL returned.
Use Stripe’s test card 4242 4242 4242 4242 to make a purchase in sandbox. You can enter any Expiry and CVV.
React
import { useCustomer, CheckoutDialog } from "autumn-js/react";

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

  return (
    <button
      onClick={async () => {
        await checkout({
          productId: "pro",
          dialog: CheckoutDialog,
        });
      }}
    >
      Upgrade to Pro
    </button>
  );
}
This dialog will let users confirm their payment, and supports any scenario (eg upgrades, downgrades, topups).
Autumn also has a prebuilt <PricingTable /> UI component, which you can drop in to dynamically display plans and upgrade states.Alternatively, you can build your own components and flows using our underlying API for full configurability.
Next step: Gating and Usage Limits Now that the plan is enabled and you’ve handled payments, you can now make sure that customers have the correct access and limits based on their plan.

Gating Features

Enforce usage limits and feature permissions using Autumn’s check and track functions