Skip to main content
Software applications typically ship with a billing page. This allows customers to change plan, cancel subscription and view their usage. The customer endpoint returns the current state of the customer, including their active subscriptions, one-time purchases, and feature balances.

​
Active plans

Display the plan the user is currently on. Users can have multiple active subscriptions and purchases (e.g., main plan and add-ons).
  • subscriptions - Free and paid recurring plans
  • purchases - One-off plans (e.g., credit top-ups)
import { useCustomer } from "autumn-js/react";

const { data: customer } = useCustomer();

const active = customer?.subscriptions.filter(
  (sub) => sub.status === "active"
);

console.log(active?.map((sub) => sub.planId).join(", "));

​
Usage balances

Metered features have granted, usage, and remaining fields. Use these to display current usage and remaining balance. 
import { useCustomer } from "autumn-js/react";

const { data: customer } = useCustomer();

const messages = customer?.balances.messages;

console.log(`${messages?.remaining} / ${messages?.granted}`);

​
Switching or cancelling plans

Switching plans uses billing.attach. See Attaching Plans for the full guide. 
import { useCustomer } from "autumn-js/react";

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

  return (
    <button onClick={() => attach({ planId: "pro" })}>
      Upgrade to Pro
    </button>
  );
}
To cancel a plan, use billing.update with a cancelAction. See Updating Subscriptions for details. 
import { useCustomer } from "autumn-js/react";

const { updateSubscription } = useCustomer();

// Cancel at end of billing cycle
await updateSubscription({ 
  planId: "pro", 
  cancelAction: "cancel_end_of_cycle" 
});

​
Stripe billing portal

The Stripe billing portal lets users manage their payment method, view past invoices, and cancel their plan.
Enable the billing portal in your Stripe settings.
import { useCustomer } from "autumn-js/react";

const { openCustomerPortal } = useCustomer();

// Opens Stripe billing portal in current tab
await openCustomerPortal({ 
  returnUrl: "https://your-app.com/billing" 
});

​
Usage history chart

Autumn replicates usage data to Clickhouse for aggregate time series queries. Pass the response to a charting library like Recharts. 
import { useAggregateEvents } from "autumn-js/react";

const { list, total } = useAggregateEvents({
  featureId: "messages",
  range: "30d",
});

// list: [{ period: 1234567890, values: { messages: 42 } }, ...]
// total: { messages: { count: 100, sum: 500 } }