Create your Autumn account and let’s create a 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. Integrate Autumn

There are 3 main functions you need to integrate Autumn into your application.

1

When the customer clicks the “Upgrade to Pro” button, we call attach() to redirect them to a Stripe checkout page.

2

When the customer wants to use a chatbot message, we call check() to check if they have remaining messages and are allowed to send one.

3

If they are, we call track() to send a usage event to Autumn.

You can use your Publishable Key when making attach and check requests from the frontend. Attach will return a checkout_url that you can redirect the customer to.

To handle product upgrades and downgrades however, you’ll need to use a Secret Key from the backend, by opening a backend endpoint and passing the attach result to the frontend.

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

// src/chatbot.tsx

import { Autumn } from "autumn-js";

const autumn = new Autumn({
  publishableKey: import.meta.env.VITE_AUTUMN_PUBLISHABLE_KEY,
});

export default function Chatbot() {
  const user_id = auth().id; // get your internal user id

  const handleUpgrade = async () => {
    let { data, error } = await autumn.attach({
      customer_id: user_id,
      product_id: "pro",
    });

    if (data?.checkout_url) {
      window.location.href = data.checkout_url;
    }
  };

  const checkAccess = async () => {
    let { data, error } = await autumn.check({
      customer_id: user_id,
      feature_id: "messages",
    });

    if (data?.allowed) {
      await fetch("http://localhost:8080/messages", {
        method: "POST",
      });
      // Handle chatbot message from the backend
    } else {
      alert("You don't have access to this feature");
    }
  };

  return (
    <div>
      <button onClick={handleUpgrade}>Upgrade to Pro</button>
      <button onClick={checkAccess}>Send message</button>
    </div>
  );
}
{
  (" ");
}

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