Autumn Billing
Autumn 是一款用于运行 SaaS 定价计划的开源基础设施。它位于您的应用程序和 Stripe 之间，充当您客户订阅状态、用量计量和功能权限的数据库。
在 Autumn 的 Discord 上获取帮助
我们随时在线，为您解答任何问题。
功能特性
- 单一函数处理所有结账、订阅和支付流程
- 无需 webhooks：直接向 Autumn 查询所需数据
- 管理您应用的免费和付费方案
- 支持用量计费和周期限制的使用量追踪
- 通过 Autumn 仪表板自定义方案和定价变更
设置 Autumn 账户
首先，在 Autumn 的仪表板中创建您的定价方案，在此定义每个方案和产品可访问的内容以及计费方式。在本示例中，我们将处理 AI 聊天机器人的免费版和专业版方案，每月包含一定数量的 messages（消息数）。
将 Autumn 插件添加到您的 auth 配置中
import { autumn } from "autumn-js/better-auth";
export const auth = betterAuth({
// ...
plugins: [autumn()],
});Autumn 将在用户注册时自动创建客户，并为他们分配您创建的任何默认方案（例如您的免费方案）
添加 <AutumnProvider />
在客户端，使用 AutumnProvider 组件包装您的应用程序，并传入在 better-auth 的 authClient 中定义的 baseUrl。
import { AutumnProvider } from "autumn-js/react";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
{/* 对于 vite 可使用 meta.env.BETTER_AUTH_URL */}
<AutumnProvider betterAuthUrl={process.env.NEXT_PUBLIC_BETTER_AUTH_URL}>
{children}
</AutumnProvider>
</body>
</html>
);
}使用方法
处理支付
当客户想要购买 Pro 套餐时，调用 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检查客户是否被允许发送消息track在 Autumn 中追踪使用事件（通常在服务器端执行）customer在用户界面中显示相关的账单数据（订阅情况、功能余额）
在服务器端，您可以通过 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" })) {
//... 在服务器端发送聊天机器人消息，然后
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: {
feature_id: "messages",
},
});
// 发送消息的服务器端函数
// 然后追踪使用情况
await auth.api.track({
headers: await headers(),
body: {
feature_id: "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>
);
}获取发票历史记录
向 useCustomer 传入 expand 参数以获取额外信息。您可以扩展 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>
);
}