秋季计费

Autumn 是一个开源的基础设施，用于运行 SaaS 定价计划。它位于您的应用和 Stripe 之间，并充当客户订阅状态、使用计量和功能权限的数据库。

在 Autumn 的 Discord 上获取帮助

我们在线为您解答任何问题。

功能

  • 一个函数处理所有结账、订阅和支付流程
  • 无需 Webhook：查询 Autumn 获取所需数据
  • 管理您应用中的免费和付费计划
  • 用于使用计费和周期性限制的使用跟踪
  • 通过 Autumn 的仪表板自定义计划和定价变更

设置 Autumn 账户

首先，在 Autumn 的 仪表板 中创建您的定价计划，在那里定义每个计划和产品获得访问权限的内容以及计费方式。在本例中，我们为 AI 聊天机器人处理免费和专业版计划，每个月附带一定数量的 messages。

安装 Autumn SDK

npm install autumn-js

如果您使用单独的客户端和服务器设置，请确保在项目的所有部分安装插件。

将 AUTUMN_SECRET_KEY 添加到您的环境变量

您可以在 Autumn 的仪表板中的“Developer”下找到它。

.env
AUTUMN_SECRET_KEY=am_sk_xxxxxxxxxx

将 Autumn 插件添加到您的 auth 配置

auth.ts
import { autumn } from "autumn-js/better-auth";

export const auth = betterAuth({
  // ...
  plugins: [autumn()],
});
auth.ts
import { autumn } from "autumn-js/better-auth";
import { organization } from "better-auth/plugins";

export const auth = betterAuth({
  // ...
  plugins: [organization(), autumn({ customerScope: "organization" })],
});
auth.ts
import { autumn } from "autumn-js/better-auth";
import { organization } from "better-auth/plugins";

export const auth = betterAuth({
  // ...
  plugins: [
    organization(),
    autumn({ customerScope: "user_and_organization" })
  ],
});
auth.ts
import { autumn } from "autumn-js/better-auth";
import { organization } from "better-auth/plugins";

export const auth = betterAuth({
  // ...
  plugins: [
    organization(),
    autumn({
      identify: async ({ session, organization }) => {
        return {
          customerId: "your_customer_id",
          customerData: {
            name: "Customer Name",
            email: "customer@gmail.com",
          },
        };
      },
    }),
  ],
});

当客户注册时，Autumn 将自动创建您的客户，并为他们分配您创建的任何默认计划（例如您的免费计划）。您可以选择谁成为客户：个人用户、组织、两者，或像工作区这样的自定义。

添加 <AutumnProvider />

在客户端，用 AutumnProvider 组件包装您的应用，并传入您在 better-auth 的 authClient 中定义的 baseUrl。

app/layout.tsx
import { AutumnProvider } from "autumn-js/react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        {/* or meta.env.BETTER_AUTH_URL for vite */}
        <AutumnProvider betterAuthUrl={process.env.NEXT_PUBLIC_BETTER_AUTH_URL}>
          {children}
        </AutumnProvider>
      </body>
    </html>
  );
}

使用

处理支付

当客户想要购买专业版计划时，调用 attach 将客户重定向到 Stripe 结账页面。

如果他们的支付方式已在文件中，AttachDialog 将打开以让客户确认他们的全新订阅或购买，并处理支付。

确保您已在 Autumn 仪表板 中粘贴您的 Stripe 测试密钥 。

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

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

  return (
    <button
      onClick={async () => {
        await attach({
          productId: "pro",
          dialog: AttachDialog,
        });
      }}
    >
      升级到 Pro
    </button>
  );
}

AttachDialog 组件可以直接从 autumn-js/react 库中使用（如上例所示），或作为 shadcn/ui 组件 下载以进行自定义。

集成定价逻辑

使用以下函数将您的客户端和服务器定价层逻辑集成：

  • check 检查客户是否 allowed 发送消息。
  • 在 Autumn 中 track 使用事件（通常在服务器端完成）
  • customer 在您的 UI 中显示任何相关计费数据（订阅、功能余额）

在服务器端，您可以通过 auth 对象访问 Autumn 的函数。

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

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

  return (
    <>
      <button
        onClick={async () => {
          if (allowed({ featureId: "messages" })) {
            //... server-side 发送聊天机器人消息，然后
            await refetch(); // 重新获取客户使用数据
            alert(
              "剩余消息：" + customer?.features.messages?.balance
            );
          } else {
            alert("您已用完消息");
          }
        }}
      >
        发送消息
      </button>
    </>
  );
}
import { auth } from "@/lib/auth";

// 在后端检查客户是否可以发送消息
const { allowed } = await auth.api.check({
  headers: await headers(), // 传递请求头
  body: {
    featureId: "messages",
  },
});

// 服务器端函数发送消息

// 然后跟踪使用
await auth.api.track({
  headers: await headers(),
  body: {
    featureId: "messages",
    value: 2,
  },
});

附加函数

openBillingPortal()

打开计费门户，客户可以在其中更新他们的支付方式或取消他们的计划。

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

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

  return (
    <button
      onClick={async () => {
        await openBillingPortal({
          returnUrl: "/settings/billing",
        });
      }}
    >
      管理计费
    </button>
  );
}

cancel()

取消产品或订阅。

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

export default function CancelSubscription() {
  const { cancel } = useCustomer();

  return (
    <button
      onClick={async () => {
        await cancel({ productId: "pro" });
      }}
    >
      取消订阅
    </button>
  );
}

获取发票历史

将 expand 参数传入 useCustomer 以获取附加信息。您可以扩展 invoices、trials_used、payment_method 或 rewards。

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

export default function CustomerProfile() {
  const { customer } = useCustomer({ expand: ["invoices"] });

  return (
    <div>
      <h2>客户资料</h2>
      <p>姓名：{customer?.name}</p>
      <p>电子邮件：{customer?.email}</p>
      <p>余额：{customer?.features.chat_messages?.balance}</p>
    </div>
  );
}
Edit on GitHub

Previous Page

Polar

Next Page

Dodo Payments

On this page