告别手动发货：零后端构建全自动数字商品商店实战

作者提米哥
👉 工具网址：https://t.me/m3lmhermes_bot

大家好，我是提米大门（TMDM.cn）的提米哥。

如果你正在售卖 PDF 指南、代码片段包或者设计素材，你可能遇到过这样的尴尬：用户在你的 Stripe 结账页面付了款，然后呢？你不得不手动登录邮箱，把文件下载下来，再传到网盘里，最后把链接发给客户。

这种纯手工的工作流不仅慢、容易出错，还会因为客户等待时间过长而严重拉低转化率。

今天，提米哥就教大家如何在不写一行后端代码、不搭建数据库的情况下，构建一个全自动的数字商品发货商店。我们只需要两样东西：一个靠谱的支付网关，以及一个支持直接访问链接的云存储服务。

1. 核心架构：纯前端搞定一切

核心问题在于：如何在不经过我们自己服务器的情况下，把文件安全地交给已付款的用户？

解决方案是：把文件存在第三方云服务上，利用它们的“直接链接”功能。当支付成功后，支付平台会发送一个 Webhook（回调通知）给你的网站。你的网站拿到文件 URL 和用户邮箱，直接向云存储请求一个唯一的、限时的下载链接。最后，前端代码把“支付按钮”直接替换成“下载链接”，用户点击即可瞬间下载。

2. 支付网关：Stripe

Stripe 是行业标杆，对于简单的前端商店，我们只需要用它标准的 Checkout（结账）流程。你不需要后端来处理支付细节，Stripe 会搞定加密、令牌化和安全合规。

设置步骤：
– 注册一个 Stripe 账户。
– 进入 Products（产品），创建一个“Digital Product（数字产品）”。
– 在 Checkout 设置中，选择“Send the customer a download link（向客户发送下载链接）”。

这一步非常关键，Stripe 会在客户付款后自动处理邮件发送。但如果你想在自己的网站上直接触发下载动作，就需要使用 Webhooks 功能。

3. 云存储：Cloudinary

你需要一个地方来托管文件。Cloudinary 非常适合这个场景，因为它能生成预签名 URL（临时安全链接）。

设置步骤：
– 注册一个免费账户。
– 上传你的数字产品（PDF、ZIP 等）。
– 获取你的 API Key 和 Secret。
– 重点：在控制台获取“Direct Upload（直接上传/访问）”的 URL。

这个 URL 是核心，它允许你的前端代码直接与 Cloudinary 对话，完全不需要后端做中间人。

4. 代码实现：前端逻辑

我们将使用 JavaScript 把这两个服务连接起来。你不需要服务器，这些逻辑可以直接跑在你网站或落地页的客户端代码里。

步骤 A：创建 Webhook 端点
你需要一个公开的 URL，让 Stripe 把“支付成功”的事件发过来。
1. 在 Stripe 控制台，进入 Develop > Webhooks。
2. 点击“Add endpoint（添加端点）”。
3. 选择事件 checkout.session.completed。
4. 输入一个你前端可以监听的公开 URL（例如 https://yoursite.com/api/payment-success）。

步骤 B：客户端监听代码
当页面加载时，监听来自 Stripe 的消息。

// 前端代码：监听来自 Stripe 的消息
window.addEventListener('message', function(event) {
  // 验证消息来源，确保安全性，防止跨站攻击
  if (event.origin !== 'https://checkout.stripe.com') return;

  const data = event.data;

  // 判断是否为支付成功的事件
  if (data.type === 'checkout.session.completed') {
    // 获取我们在 Stripe 中预设的文件 ID
    const fileId = data.metadata.fileId; 
    // 获取付款用户的邮箱
    const userEmail = data.customer_details.email;

    // 调用前端函数，获取下载链接
    initiateDownload(fileId, userEmail);
  }
});

function initiateDownload(fileId, userEmail) {
  // 1. 调用云存储服务商（此处以 Cloudinary 为例）
  // 假设你有一个函数（或无服务器函数）使用 API 凭证生成临时链接
  fetch(`https://api.cloudinary.com/v1_1/YOUR_NAME/resources/upload/${fileId}`, {
    headers: {
      // 使用 Base64 编码 API 密钥进行身份验证
      'Authorization': 'Basic ' + btoa('API_KEY:API_SECRET')
    }
  })
  .then(response => response.json())
  .then(data => {
    // 获取安全的直接下载链接
    const directUrl = data.resource.secure_url;

    // 2. 更新页面 UI
    // 找到页面上的支付按钮
    const paymentButton = document.getElementById('payment-button');
    // 将按钮文字改为“立即获取”
    paymentButton.innerText = 'Get Instant Access';
    // 点击按钮时，在新标签页打开下载链接
    paymentButton.onclick = () => window.open(directUrl, '_blank');
  });
}

步骤 C：传递 Metadata（元数据）
在配置 Stripe 结账会话时，记得带上 metadata 字段，告诉系统用户买的是哪个文件。

// 创建 Stripe 结账会话 (Checkout Session)
const session = await stripe.checkout.sessions.create({
  // 配置购买的商品和数量
  line_items: [{ price: 'price_1234', quantity: 1 }],
  // 设置为支付模式
  mode: 'payment',
  // 支付成功后的跳转链接
  success_url: 'https://yoursite.com/success',
  // 传递自定义元数据：这里放入 Cloudinary 中的文件 ID
  metadata: { fileId: 'v123456789abcdef' }
});

当 Webhook 触发时，data.metadata.fileId 就能准确告诉你该下发哪个资产。

5. 权限管理：防止链接被白嫖

纯前端发货最大的风险就是链接被分享。如果用户把链接发给朋友，所有人都能免费下载。

为了防止这种情况，必须在文件层面做好权限控制：
– Cloudinary：将文件可见性设置为“Private（私有）”。Cloudinary 支持生成带时间戳的临时链接，你可以动态生成一个仅在 24 小时内有效的链接。
– Google Drive / Dropbox：可以将文件权限设置为“特定用户”，并在支付成功后动态生成邀请链接。

对于没有后端的架构，链接过期机制是最简单且最稳妥的安全方案。

总结

不写一行后端代码，你也能搭建一个像魔法一样自动运转的数字商店：
– Stripe 负责处理支付，并通过 Webhook 通知前端。
– Cloudinary 负责安全存储文件，并生成限时的直接下载链接。
– 你的前端代码 负责监听成功信号，把“支付按钮”无缝切换为“下载按钮”。

这套方案能把你的开发时间从几天缩短到几个小时，省下服务器成本，还能给客户带来丝滑的购买体验。

直达网址：https://t.me/m3lmhermes_bot

微信联系：timidamen

类似文章