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 will return the current state of the customer, including their active plans, feature usage and remaining balances.

​
Active plans

Display the plan the user is currently on. You can also display price information and features granted with that plan. As users can have multiple active plans (eg, add ons), this is an array. 
import { useCustomer } from "autumn-js/react";

const { customer } = useCustomer();

const activeProducts = customer?.products.filter(
	(product) => product.status === "active",
);

console.log(`Users active plans are: ${activeProducts?.map((product) => product.name).join(", ")}`);

​
Usage balances

Metered features have a balance, usage and included_usage field. You can use these to display the current usage and remaining balance to the user. 
import { useCustomer } from "autumn-js/react";

const { customer } = useCustomer();

const messages = customer?.features.messages;

console.log(`Users messages balance is: ${messages?.balance} / ${messages?.included_usage}`);

​
Switching or cancelling plans

Switching plans follows the same Stripe payment flow as previously described.
You can alternatively use our pre-built pricing table component to handle all the various switching scenarios.
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>
  );
}
Cancelling a plan will schedule the cancellation for the end of the billing cycle, and enable any plan with the auto-enable property.
You can cancel a plan immediately by passing cancel_immediately: true.
import { useCustomer } from "autumn-js/react";

const { cancel } = useCustomer();

await cancel({ productId: "pro" });

​
Stripe billing portal

The Stripe billing portal is a convenient way to allow users to manage their payment method, see past invoices and also cancel their current plan. You can also set up “churn offers” to encourage users to stay with you.
To use the Stripe billing portal, you’ll need to enable it in your Stripe settings.
import { useCustomer } from "autumn-js/react";

const { openBillingPortal } = useCustomer();

await openBillingPortal({ returnUrl: "https://your-app.com/billing" });

​
Usage history chart

Autumn replicates your usage data to Clickhouse, so you can retrieve aggregate time series usage data for your customers. The response can be passed into a charting library like Recharts to display a usage history graph. 
import { useAnalytics } from "autumn-js/react";

const { list } = useAggregateEvents({
  featureId: 'messages',
  range: '30d'
})