Skip to main content
When you have paying users, you should display a billing page in your app. This typically allows them 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 { Autumn } from "autumn-js";

const autumn = new Autumn({
	secretKey: process.env.AUTUMN_SECRET_KEY,
});

const { data } = await autumn.customers.get("user_or_org_id_from_auth");

//filter for active products
const activeProducts = data?.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 { Autumn } from "autumn-js";

const autumn = new Autumn({
	secretKey: process.env.AUTUMN_SECRET_KEY,
});

const { data } = await autumn.customers.get("user_or_org_id_from_auth");

const messages = data?.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 { Autumn } from "autumn-js";

const autumn = new Autumn({ 
  secretKey: process.env.AUTUMN_SECRET_KEY 
});

const { data } = await autumn.checkout({
  customer_id: "user_or_org_id_from_auth",
  product_id: "pro",
});

if (data.url) {
  // Return Stripe checkout URL to frontend
} else {
  // Return upgrade preview data to frontend
}

//if user needs to confirm payment
const { data } = await autumn.attach({
  customer_id: "user_or_org_id_from_auth",
  product_id: "pro",
});
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 { Autumn } from "autumn-js";

const autumn = new Autumn({
  secretKey: process.env.AUTUMN_SECRET_KEY,
});

await autumn.cancel({
  customer_id: "user_or_org_id_from_auth",
  product_id: "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 { Autumn } from "autumn-js";

const autumn = new Autumn({
  secretKey: process.env.AUTUMN_SECRET_KEY,
});

await autumn.customers.billingPortal('customer_id', 
  {
    return_url: "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 { Autumn } from "autumn-js";

const autumn = new Autumn({
  secretKey: process.env.AUTUMN_SECRET_KEY,
});

const { data } = await autumn.query({
  customer_id: 'user_or_org_id_from_auth',
  feature_id: 'messages',
  range: '30d'
})