Skip to main content
The pricing table component displays your available plans, plan features and pricing. The pricing card button will dynamically update it’s text (eg upgrade, downgrade) and disabled state based on the user’s current product and plan, and handle payments.
Pricing Table
You can use the component as is, or download the shadcn/ui component and edit it to your needs. Use React component directly 
import { PricingTable } from "autumn-js/react";
Download shadcn/ui component 
npx shadcn@latest add https://ui.useautumn.com/pricing-table
This will download the pricing-table component in your /components directory, under a /autumn folder.

​
Usage

import { PricingTable } from "@components/autumn/pricing-table";

export const PricingTableExample = () => (
  <div>
    <PricingTable productDetails={productDetails} />
  </div>
);
The Pricing Table component calls the products endpoint, which does not require a customer_id. This means you can display the pricing table to unauthenticated users.
The component can take in productDetails, which can be used to pass in content that can override the default contents (which are generated from your Autumn products). The example below was used to render the screenshot above. 
const productDetails = [
  {
    id: "free",
    description: "A great free plan to get started with",
  },
  {
    id: "pro",
    description: "For all your extra messaging needs",
    recommendText: "Most Popular",
    price: {
      primaryText: "$10/month",
      secondaryText: "billed monthly",
    },
    items: [
      {
        featureId: "messages",
      },
      {
        primaryText: "Premium support",
        secondaryText: "Get help from our team",
      },
    ],
  },
  {
    id: "pro_annual",
  },
  {
    id: "premium",
    description: "For those of you who are really serious",
  },
  {
    id: "premium_annual",
  },
];
You can choose which products should be displayed, and what items each card should have. The items array can either take an object with primaryText and secondaryText properties, or a string with the featureId, which will just take the item from Autumn’s default contents.

​
Scenarios

When you install pricing-table, a @/lib/autumn/pricing-table-content.tsx file is also installed. This file contains the pricing card button texts for each scenario, which you can customize how you want.
/lib/autumn/get-checkout-content.tsx
import { type Product } from "autumn-js";

export const getPricingTableContent = (product: Product) => {
  const { scenario, free_trial, properties } = product;
  const { is_one_off, has_prepaid, has_trial } = properties;

  if (has_trial) {
    return {
      buttonText: <p>Start Free Trial</p>,
    };
  }

  switch (scenario) {
    case "scheduled":
      return {
        buttonText: <p>Plan Scheduled</p>,
      };

    case "active":
      if (has_prepaid) {
        return {
          buttonText: <p>Update Plan</p>,
        };
      }

      return {
        buttonText: <p>Current Plan</p>,
      };

    case "new":
      if (is_one_off) {
        return {
          buttonText: <p>Purchase</p>,
        };
      }

      return {
        buttonText: <p>Get started</p>,
      };

    case "renew":
      return {
        buttonText: <p>Renew</p>,
      };

    case "upgrade":
      return {
        buttonText: <p>Upgrade</p>,
      };

    case "downgrade":
      return {
        buttonText: <p>Downgrade</p>,
      };

    case "cancel":
      return {
        buttonText: <p>Cancel Plan</p>,
      };

    default:
      return {
        buttonText: <p>Get Started</p>,
      };
  }
};

​
Build your own

Display a list of the products you offer by fetching your product data from Autumn’s API. This gives you a dynamic, single source of truth for your app’s pricing plans. 
import { useCustomer, usePricingTable } from "autumn-js/react";

const { products, isLoading, error } = usePricingTable();
Each product in the array returned will contain a scenario enum, that can be used to determine its relation to the user’s currenct product. This can be used to control the button text of each pricing card you display. See our shadcn/ui pricing table texts for an example.
ScenarioDescription
upgradeThe product is an upgrade to the user’s current product
downgradeThe product is a downgrade to the user’s current product
cancelThe product is a free product which would cancel the user’s current subscription
renewThe product would be a renewal of a product that’s scheduled to downgrade
scheduledThe product is already scheduled to start at a future date (eg, for downgrades)
activeThe product is already active