AI Builders

# Integrating Pricing Model

## Before Integration

1. Check that the user has provided the productIds for the pricing tiers they have. If they have not explicitly mentioned it, prompt them for it. Do not guess.
2. If they mention usage based features that are being tracked or limited, make sure they mention the featureIds. You may ask if you’re unsure whether it’s a usage-based feature.

## Pricing Logic integration

1. Use the `attach` hook to handle payments. This will redirect to a checkout URL if a new purchase, or handle any upgrades/downgrades/cancellations.


import ProductChangeDialog from "@components/autumn/product-change-dialog";
import { useAutumn } from "autumn-js/react";

<Button
  onClick={async () =>
    await attach({
      productId: "pro",
      dialog: ProductChangeDialog,
    })
  }
>

2. Build a productChangeDialog and pass it into the `attach` hook as above. This is a simplified version you can style to match the app’s theme.


import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { useAutumn } from "autumn-js/react"

const ProductChangeDialog = (params) => {
  const [isLoading, setIsLoading] = useState(false);
  const { attach } = useAutumn();
  const { open, setOpen, preview } = params;

  const handleConfirm = async () => {
    setIsLoading(true);
    await attach({productId: preview.product_id});
    setOpen(false);
    setIsLoading(false);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent>
          <DialogTitle>{preview?.title}</DialogTitle>
        <div>{preview?.message}</div>
        {preview?.due_today?.price && <div>Due today: ${preview?.due_today?.price}</div>}
          <button onClick={() => setOpen(false)}>Cancel</button>
          <button onClick={handleConfirm} disabled={isLoading}>
            {isLoading ? 'Processing...' : 'Confirm'}
          </button>
      </DialogContent>
    </Dialog>
  );
};

export default ProductChangeDialog;


3. Check for product access from the customer state object, and use it to gate features. Replace “pro” with the provided productId.
   DO NOT check for active status, as the product may be “trialing”.


import { useCustomer } from "autumn-js/react";

const premiumUser = customer.products.find((p) => p.id === "pro");


4. For usage-based features, you can use the check and track functions, to check access and then record usage. Replace “messages” with the provided featureId


import { useAutumn, useCustomer } from "autumn-js/react";

export default function SendChatMessage() {
  const { check } = useAutumn();
  const { customer, refetch } = useCustomer();

  return (
    <button
      onClick={async () => {
        let { data } = await check({ featureId: "messages" });

        if (data?.allowed) {
          //... send message, then
          await track({ featureId: "messages" });
          await refetch(); // refetch customer usage data
        }
      }}
    >
      Send Message
    </button>
  );
}


5. You can use the customer state hook to display any relevant information if the user needs


{
  "created_at": 1677649423000,
  “env": "production",
  "id": "user_123",
  "name": "John Yeo",
  "email": "john@example.com",
  "fingerprint": "",
  "stripe_id": "cus_abc123",
  "products": [
    {
      "id": "pro",
      "name": "Pro Plan",
      "group": "",
      "status": "active",
      "started_at": 1677649423000,
      "canceled_at": null,
      "subscription_ids": [
        "sub_123"
      ],
      "current_period_start": 1677649423000,
      "current_period_end": 1680327823000
    }
  ],
  "features": {
    "messages": {
      "feature_id": "messages",
      "unlimited": false,
      "interval": "month",
      "balance": 80,
      "usage": 20,
      "included_usage": 100,
      "next_reset_at": 1680327823000
    }
  }
}

# Handling failed payments with Autumn

1. If a payment is overdue, a customer’s product status will be `past_due`. If this is the case then you should direct the customer to the billing portal to update their payment method, before the product expires.


import { useCustomer } from "autumn-js/react";

const failed_payment = customer.products.find((p) => p.status === "past_due");


2. Billing portal


import { useAutumn } from "autumn-js/react";

export default function BillingSettings() {
  const { openBillingPortal } = useAutumn();

  return (
    <button
      onClick={async () => {
        await openBillingPortal({
          returnUrl: "https://google.com",
        });
      }}
    >
      Update Payment Method
    </button>
  );
}