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

From our application’s frontend, whenever a customer wants to send a chatbot messages, we’ll first check if they’re allowed to.

If they are, we’ll send a usage event to Autumn. Autumn will then update the customer’s usage and remaining balance.

When they click the “Upgrade to Pro” button, they’ll be redirected to a Stripe checkout page to subscribe.

You can use a Publishable Key when making attach and entitled requests from the frontend. To handle product upgrades and downgrades however, you’ll need to use a Secret Key from the backend.

// 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 handleUpgrade = async () => {
    let { data, error } = await autumn.attach({ product_id: "pro" });

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

  const checkAccess = async () => {
    let { data, error } = await autumn.entitled({ 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.

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