Logo

菜单

发布于 2026-01-06 2 阅读
0

从副业项目到付费SaaS，为我的AI应用添加订阅和使用层级

从副业项目到付费SaaS，为我的AI应用添加订阅和使用层级

在第二部分中，我们为 Learnflow AI 打下了坚实的基础——身份验证、受保护的路由和基于积分的使用。

现在到了实现可持续发展的最重要阶段：将 Learnflow AI 变成真正的产品。

这意味着：

  • 定价层级
  • 每个套餐的使用上限
  • 升级流程
  • 实际计费集成

Kinde Billing + Convex 为我提供了在数小时内（而不是数天）启动订阅所需的技术栈，并且与我已经构建的基础设施紧密结合。

为什么要订阅？

用语音与 GPT-4 对话非常神奇——但也很昂贵。

每次用户会话都涉及实时音频、转录和 GPT-4 词元生成。如果我想避免大规模烧钱，就需要一个合理的计费模式。

以下是不容商量的事项：

  • Stripe 支付
  • 层级划分，界限清晰
  • 升级/降级支持
  • 后端功能门控

Kinde Billing完全实现了所有这些功能——与第二部分中现有的身份验证层完全集成。无需自定义 Stripe 服务器，也无需脆弱的 Webhook。只需配置、套餐和安全结账即可。

Learnflow AI 的定价模型

为了产品上市，我采用了简单的定价策略：

层级 鸣谢 使用权
自由的 10 有限的语音会话
专业版 100+ 无限 GPT 会话，更快的语音延迟

每个登录用户都已经拥有一个credits字段，并且plan已经导入到 Convex 系统中。现在我只需要在此基础上集成计费功能即可。

步骤 1：在 Kinde 中启用计费

Kinde 会代表您处理 Stripe 付款。在 Kinde 控制面板中：

  1. 前往“账单” →点击“启用账单”
  2. 连接您的Stripe 账户
  3. 制定您的计划（免费版、专业版）
  4. 添加定价表键和方案别名

这将使您获得：

  • 托管结账页面
  • 订阅同步
  • Webhook 支持

您无需搭建 Stripe 后端——这一切都由 Kinde 管理。

您可以阅读这篇文章，了解完整的设置步骤。

步骤 2：访问用户会话中的计费信息

用户登录后，Kinde 会将他们的计费层级直接注入到他们的会话中。你可以这样获取它：

import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";

export async function getCurrentUser() {
  const { getUser } = getKindeServerSession();
  const user = await getUser();

  return {
    email: user?.email ?? "",
    name: user?.given_name ?? "",
    tier: user?.user_metadata?.plan || "free",
  };
}
Enter fullscreen mode Exit fullscreen mode

现在，您可以在任何页面、布局或服务器操作中访问用户的计费级别（free，，等）。pro

步骤 3：将计划同步到 Convex

如果您想要完全控制或离线逻辑，也可以将计费层级存储在 Convex 中。

export const syncUserPlan = mutation({
  args: {
    email: v.string(),
    plan: v.string(),
  },
  handler: async (ctx, args) => {
    const user = await ctx.db
      .query("users")
      .filter((q) => q.eq(q.field("email"), args.email))
      .unique();

    if (!user) return null;

    return await ctx.db.patch(user._id, { plan: args.plan });
  },
});
Enter fullscreen mode Exit fullscreen mode

您可以在登录、新用户注册期间，甚至在 webhook 处理程序中调用此函数。

步骤 4：添加包含计费门户访问权限的升级页面

当用户达到使用上限时，您希望他们看到清晰的升级路径，而不仅仅是“您的积分已用完”的错误提示。

为了支持这一点，我们创建了一个专门的升级页面。Kinde 通过托管的计费门户实现了这一点，该门户由 Stripe 提供支持，并与用户现有的 Kinde 帐户关联。

以下是我们的实施方案。

"use client";

import { PortalLink } from "@kinde-oss/kinde-auth-react";

export default function UpgradePage() {
  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Upgrade your plan</h1>
      <p className="mb-6">
        Get more credits and unlock advanced features like voice-first learning and longer sessions.
      </p>
      <PortalLink path="organization_billing">
        <button className="btn btn-primary">Upgrade to Pro</button>
      </PortalLink>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

这会将用户重定向到 Kinde 托管的底层门户。

用户体验提示：当用户达到限制时显示此提示

如果用户积分用完或尝试访问仅限专业版用户使用的功能，请使用醒目的横幅或弹窗引导他们前往此处：

<div className="p-4 bg-yellow-50 text-yellow-700 text-sm rounded">
  You’ve used all your credits. Upgrade to continue learning.
  <Link href="/dashboard/upgrade" className="underline ml-2">
    Upgrade now →
  </Link>
</div>
Enter fullscreen mode Exit fullscreen mode

这种提示方式可以在试用用户遇到摩擦时轻松地将他们转化为付费客户，而无需单独的电子邮件流程或提醒。

启用后，用户可以：

  • 查看或更改他们的账单计划
  • 查看使用情况和付款记录
  • 取消或恢复订阅
  • 实时触发套餐升级（通过 Kinde 会话元数据反映在您的应用中）

而且你无需自己管理这些——这一切都由Stripe + Kinde 负责。

步骤 5：按计划设置门禁功能（用户界面 + 服务器）

一旦计划在 Convex 或您的会话中可用，设置门禁就很容易了。

后端检查：

if (user.plan !== "pro" && sessionType === "voice") {
  throw new Error("Upgrade to Pro to use voice sessions.");
}
Enter fullscreen mode Exit fullscreen mode

前端锁定：

{user?.plan === "free" && (
  <div className="p-4 bg-yellow-50 text-yellow-700 text-sm rounded">
    Voice companions are available on the Pro plan.
    <Link href="/dashboard/upgrade" className="underline ml-2">
      Upgrade now →
    </Link>
  </div>
)}
Enter fullscreen mode Exit fullscreen mode

这有助于引导用户，而不会阻碍整个用户体验。

步骤 6：分级信用处理

假设您希望专业版用户享有无限流量或折扣流量。您可以根据请求强制执行此设置：

const creditCost = user.plan === "pro" ? 0 : 1;

if (user.credits < creditCost) {
  throw new Error("You’re out of credits. Please upgrade.");
}

await ctx.db.patch(user._id, {
  credits: user.credits - creditCost,
});
Enter fullscreen mode Exit fullscreen mode

您还可以：

  • 每月重置信用额度
  • 升级时可获得额外奖励积分
  • 每个功能的成本各不相同

你刚刚构建了什么

  • 通过 Kinde + Stripe 进行订阅计费
  • 带有升级逻辑的结账页面
  • 基于层级的功能锁定
  • 按计划灵活扣除信用额度
  • 基于凸函数的后端逻辑

您现在拥有：

  • 真正的盈利引擎
  • 支持 GPT 成本的可扩展方法
  • 从爱好到事业的基础设施

接下来是什么？

您已准备好：

  • 引导您的首批用户上线
  • 获取真实使用数据
  • 交付一个精良的V1版本

有了身份验证、访问权限、使用情况跟踪和计费功能，您现在就可以像真正的 SaaS 一样运营了。

最后想说的话

打造真正的AI优先产品从未如此简单。

组合方式：

……使得在3 个周末内将想法转化为付费产品成为可能。

如果你有有价值的东西，不要止步于原型。

不要只是发货，要卖出去。

文章来源：https://dev.to/sholajgede/from-side-project-to-paid-saas-adding-subscriptions-usage-tiers-to-an-ai-app-1ml4
极简 Arch Linux 安装指...
速度背后看不见的代价：如果今天让我...