Quickstart

In this tutorial, we’ll set up pricing for an AI chatbot product. Here are the products we want to offer:

​

Step 1: Define product features

We can define the chatbot’s features in the Autumn dashboard, under the Features tab. We’ll create two features:

1. “Chat messages”: a metered feature, as it has a quantity that can be used up.
2. “Pro Analytics”: a boolean feature, as it’s a simple on-off toggle depending on the tier

We’ll use the feature_id and event_name defined here when calling the Autumn APIs from our application (see Step 4).

​

Step 2: Create a product

Next, let’s head over to the Products tab and create our 2 products.

1. “Free”: and give it the entitlement “Chat messages” with a limit of 10 messages per month. Make sure you set it as a default product, so that it’s automatically attached to any new customers.
2. “Pro”: and set the entitlement “Chat messages” to 50 per month, add the entitlement “Pro Analytics” and set the price to $99 per month.

​

Step 3: Attach a product on purchase

Now we can integrate this pricing model into our application. When our user clicks on our ‘Upgrade to Pro’ button from our frontend, we’ll call the /attach endpoint.

This will return a Stripe Checkout URL, which we can redirect the customer to, in order to complete their payment.

const response = await fetch('https://api.useautumn.com/v1/attach', {
  method: "POST",
  headers: {Authorization: 'Bearer <AUTUMN_PUBLISHABLE_KEY>', 'Content-Type': 'application/json'},
  body: JSON.stringify({
    "customer_id": "YOUR_INTERNAL_USER_ID",
    "product_id": "pro"
  })
})

const data = await response.json()

if (data.checkout_url) {
  // Redirect user to checkout_url
  window.location.href = data.checkout_url
}

​

Step 4: Check access and send usage events

Finally, whenever a customer tries to use a chat message, you can check if they are allowed by calling the /entitled endpoint. When they successfully use a chat message, send a usage event by calling the /events endpoint, and Autumn will update the customer’s usage.

// 1. Check if customer is entitled to chat messages
const response = await fetch("https://api.useautumn.com/v1/entitled", {
  method: "POST",
  headers: {
    Authorization: "Bearer <AUTUMN_PUBLISHABLE_KEY>",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    customer_id: "YOUR_INTERNAL_USER_ID",
    feature_id: "chat-message",
  }),
});

// 2. If user is not entitled, throw an error
let data = await response.json();
if (!data.allowed) {
  throw new Error(`You're out of chat messages!`);
}

// 3. Send event when a chat message is successfully used
await fetch("https://api.useautumn.com/v1/events", {
  method: "POST",
  headers: {
    Authorization: "Bearer <AUTUMN_SECRET_KEY>",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    customer_id: "YOUR_INTERNAL_USER_ID",
    event_name: "chat-message",
  }),
});

const ProAnalytics = () => {
  const [hasAccess, setHasAccess] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const checkAccess = async () => {
      try {
        const response = await fetch("https://api.useautumn.com/v1/entitled", {
          method: "POST",
          headers: {
            Authorization: "Bearer <AUTUMN_PUBLISHABLE_KEY>",
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            customer_id: "YOUR_INTERNAL_USER_ID",
            feature_id: "pro-analytics",
          }),
        });

        const data = await response.json();
        setHasAccess(data.allowed);
      } catch (error) {
        console.error("Failed to check access:", error);
      } finally {
        setIsLoading(false);
      }
    };

    checkAccess();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!hasAccess) {
    return (
      <div className="text-red-500">
        Please upgrade to Pro to access Pro Analytics
      </div>
    );
  }

  return (
    <div>
      {/* Your Pro Analytics feature content here */}
      <h2>Pro Analytics Dashboard</h2>
      {/* Add your analytics components */}
    </div>
  );
};