跳转到内容
无痕工具库 无痕工具库

Hostinger AI Builder 代理模式接入 Stripe 销售订阅教程

在你的 Hostinger AI Builder 智能体模式项目中，使用 Stripe 销售订阅。你也可以连接其他第三方工具，但本教程重点介绍 Stripe。

如果你想销售实体或数字产品，我们建议使用内置的在线商店集成。

步骤 1 – 连接你的域名

创建 Stripe 账户时，你需要将自定义域名连接到项目，因此请先完成域名连接再继续。

  1. 点击右上角的发布。
  2. 看到“项目已发布”提示后，点击 Get domain（获取域名）。
  3. 选择已有域名或购买新域名。

步骤 2 – 为项目设置数据库

Hostinger AI Builder 内置了集成数据库，你可以直接在编辑器中通过 Data 按钮访问。当你要求 Hostinger AI Builder 添加需要数据收集的功能（例如用户账户或联系表单）时，数据控制面板就会显示出来。

你无需连接任何外部服务——只需描述你的需求，Hostinger AI Builder 就会为你创建所需的数据库集合。

消息示例：

为我的项目添加用户账户功能。

添加一个包含姓名、邮箱和消息字段的联系表单页面。

添加一个包含姓名、邮箱、日期和时间选择器的预约页面。

你也可以通过编辑器中的 Data 按钮手动管理数据。要查看和管理真实的用户数据，你需要先发布网站。

步骤 3 – 为项目添加注册/登录功能

对于订阅功能，你很可能还需要添加用户账户创建功能，以便将你销售的订阅与用户账户关联起来。我们建议在连接 Stripe 之前先添加注册/登录功能。

消息示例：

为我的项目添加带有安全身份验证的注册和登录流程。

如果你已经添加了该功能，可以让 AI 验证其设置是否正确。

消息示例：

检查注册和登录流程是否已完整、安全地与数据库集成。我计划使用 Stripe 销售订阅，因此请确保用户账户得到妥善管理。

步骤 4 – 设置 Stripe 账户和订阅

首先，你需要创建 Stripe 账户（如果已有账户则直接登录），并设置你想销售的订阅产品。

  1. 创建 Stripe 账户： 如果你还没有账户，请先注册 Stripe 账户。
    • 创建账户后，你将被重定向到 Stripe 沙盒模式（Sandbox）。该模式允许你在正式连接之前测试 Stripe 集成。
    • 如果你对 Stripe 这类工具不太熟悉，我们建议从一开始就完整设置你的 Stripe 账户。为此，请点击右上角的“Switch to live account”（切换到正式账户）按钮，继续创建正式的 Stripe 账户。
  2. 创建订阅：
    • 进入 Stripe 控制面板中的 Product catalog（产品目录）。
    • 点击 + Add a product（添加产品）。
    • 为产品命名（例如“Pro Plan”），并设置周期性价格。出于测试目的，我们建议暂时将价格设置为 0。这样你无需支付订阅费用即可测试购买流程，之后可以再调整价格。
    • 创建完成后，复制 Price ID。你可以打开已创建的产品 → 点击三个点图标 → 点击 Copy price ID（复制价格 ID）找到它（格式类似于 price_...）。请将其复制并保存到安全的地方，稍后会用到。
      Hostinger Pro Plan 定价菜单，突出显示了 Copy price ID 选项
  3. 复制 Stripe API 密钥：
    1. 进入 API Keys 页面。
    2. 你需要两个密钥：
      1. Publishable key（可公开密钥），格式类似于 pk_live_...
      2. Secret key（秘密密钥），格式类似于 sk_live_...。此密钥高度敏感，切勿与任何人分享。复制后请将其保存到安全的地方。

步骤 5 – 设置 Stripe Webhook

Webhook 是 Stripe 与你的项目 API 服务器通信的方式，用于保持订阅状态同步（例如支付成功或失败时）。

  1. 让 AI 创建 Webhook 端点： Hostinger AI Builder 使用 Express API 服务器处理服务端逻辑。你需要让 AI 创建一个用于接收和验证 Stripe Webhook 事件的 API 路由。
    消息示例： *在服务器上创建一个 API 路由，公开一个用于处理 Stripe Webhook 的端点 URL。你可以将其命名为 stripe-webhook。*不要对项目做任何其他更改！
  2. 在 Stripe 中创建 Webhook 端点：
    • 进入 Stripe 的 Webhooks 部分。
    • 点击 + Add destination（添加目标）。
    • 第一步中，选择 Your account（你的账户），然后在事件部分选择以下事件（可以使用搜索框搜索）：
      • checkout.session.completed
      • customer.subscription.updated
      • customer.subscription.deleted
      • 选择完成后，点击 Continue（继续）。
    • 下一步中，选择 Webhook endpoint，然后点击 Continue。
    • 下一步中，填写以下字段：
      • Destination name（目标名称）：输入一个名称，例如“Subscription webhook”
      • Endpoint URL（端点 URL）：输入你的项目域名，后跟 /api/stripe-webhook，例如 https://domain.tld/api/stripe-webhook。
  3. 复制 Webhook 签名密钥：
    • 完成上述步骤后，Stripe 会提供一个签名密钥（格式类似于 whsec_...）。
    • 请将其复制并保存到安全的地方，稍后会用到。
      Stripe 目标详情中突出显示的签名密钥字段

步骤 6 – 安全保存 Stripe 密钥

你需要将 Stripe 秘密密钥和 Webhook 签名密钥保存为环境变量，以免它们暴露在项目的前端代码中。Hostinger AI Builder 将服务端环境变量存储在 API 服务器配置中，AI 可以帮你完成设置。

消息示例：

在 API 服务器中添加以下环境变量：

STRIPE_SECRET_KEY = sk_live_…

STRIPE_WEBHOOK_SECRET = whsec_…

不要对项目做任何其他更改！

请将 sk_live_… 和 whsec_… 替换为你在步骤 4 和步骤 5 中获得的实际密钥。

步骤 7 – 将 Stripe 与你的 Hostinger AI Builder 项目连接

这是最后的连接步骤。你需要让 AI 将你的 Stripe 账户与你为 Hostinger AI Builder 项目创建的订阅完整、安全地连接起来。

请将下面的消息作为模板使用——发送前务必替换其中的占位符值：

  • Stripe 产品价格 ID，格式类似于 price_…
  • Stripe 可公开密钥，格式类似于 pk_live_…
  • 将 your_domain 替换为你的 Hostinger AI Builder 项目域名。

消息示例：

我想在 Hostinger AI Builder 项目中安全地集成 Stripe 以销售订阅。

我已将 Stripe 密钥作为环境变量存储在 API 服务器上：

秘密密钥：STRIPE_SECRET_KEY

Webhook 签名密钥：STRIPE_WEBHOOK_SECRET

第 1 步：结账会话与 Webhook

在服务器上创建一个处理 Stripe 结账会话的 API 路由。当用户启动订阅购买流程时，使用我存储的秘密密钥安全地创建一个 Stripe Checkout 会话，并返回会话 URL 用于重定向用户。

创建 Stripe Checkout 会话时，请同时传入 success_url 和 cancel_url。确保这些 URL 使用我的网站域名：your_domain。

创建一个 Stripe 客户，并将生成的 stripe_customer_id 保存到数据库中。

对于从 Stripe Webhook 收到的任何更新，使用 stripe_customer_id 在数据库中查找并更新正确的用户记录。

第 2 步：订阅产品

将我的 Stripe 订阅产品添加到 Hostinger AI Builder 项目中。

Stripe 产品价格 ID：price_…

Stripe 可公开密钥：pk_live_…

在项目中添加一个“Upgrade”（升级）按钮，用于触发订阅购买流程。

确保订阅与用户数据库完全关联。

仅拥有有效订阅的用户才能访问高级功能。

第 3 步：访问控制

购买后立即授予用户高级访问权限。

确保在用户登录、创建账户或尝试访问高级功能时实时检查订阅状态。

第 4 步：安全性与正确性

确保集成是安全的，不会将秘密密钥暴露给前端。

所有与 Stripe 的通信都通过 API 服务器在服务端处理。

步骤 8 – 允许用户管理自己的订阅

订阅购买流程完全正常运行后，你可以添加 Stripe 的客户门户，允许用户管理自己的订阅（更新支付方式、查看发票、取消订阅等）。

  1. 进入 Stripe 客户门户设置。
  2. 找到 Launch customer portal with a link（通过链接启动客户门户）部分。
  3. 点击 Activate link（激活链接）以启用客户门户。
  4. 回到 Hostinger AI Builder，让 AI 将 Stripe 客户门户集成到你的项目中。

消息示例：

在服务器上创建一个新的 API 路由，为已登录的用户安全地生成一个 Stripe 客户门户链接。

然后，在我的项目中添加一个“管理订阅”按钮。该按钮仅对付费用户可见。点击后应将用户重定向到 Stripe 客户门户，在那里他们可以管理自己的订阅。

其他提示

  • 进行更改后请发布项目，并通过在项目中创建新账户来测试订阅购买流程。
  • 你可以在 Stripe 客户页面查找和管理所有订阅。如果你想取消某个用户的订阅，选择用户 → 在 Subscriptions 部分点击三个点图标 → 点击 Cancel subscription（取消订阅）。
  • 你可以让 AI 在用户已拥有订阅时隐藏订阅购买流程，并添加一个显示用户已拥有订阅的标识。
  • 你还可以让 AI 仅对拥有订阅的用户启用项目的某些功能。例如，在待办事项应用中，你可以为免费用户设置可创建任务的数量上限，达到上限后就需要订阅。

错误或 Bug 修复

如果在 Stripe 连接过程中或连接后遇到问题或发现 Bug，请尝试向 AI 提供尽可能多的上下文信息，让其进行修复。

示例 1： 如果在尝试进入订阅购买流程后出现错误，请截取错误的屏幕截图，将其附加到消息中，并描述错误发生的时间以及正确的流程应该是什么。

消息示例

点击“Upgrade”（升级）按钮时出现错误（见附件截图）。点击该按钮应将用户重定向到 Stripe 进行订阅购买，然后返回我的项目并完成账户升级。请找出并修复该问题。

示例 2： 如果购买后用户没有获得订阅，请说明问题发生的时间以及预期的流程。

消息示例

完成订阅购买流程后，用户被重定向回项目，但他们的订阅状态没有更新，高级功能也未解锁。请确保在返回时验证订阅，并立即授予用户高级功能的访问权限。找出并修复该问题。