本文探讨了在纯静态网站环境下，如何在不暴露 Stripe Secret Key 的前提下，动态生成 Stripe Payment Link 的问题。由于 Stripe API 的安全机制限制，直接在客户端创建 Payment Link 存在安全风险。本文提供了两种替代方案：预先生成固定 Payment Link，或通过后端服务动态生成 Payment Link。同时，建议对于高度定制化的购物车场景，直接使用 Checkout Sessions。
在构建一个完全静态的电商网站时，你可能希望使用 Stripe Payment Link 来简化支付流程。然而，直接在客户端代码中使用 Stripe Secret Key 来创建 Payment Link 会带来严重的安全风险。本文将讨论如何在不暴露 Secret Key 的情况下，实现类似的功能。
核心问题：安全地创建 Payment Link
Stripe Payment Link 提供了一种便捷的方式来销售商品和服务，而无需编写大量的后端代码。但是，Stripe API 要求使用 Secret Key 才能创建 Payment Link，这使得在客户端直接创建 Payment Link 变得不可行。因为任何访问你网站的用户都可以通过查看源代码或网络请求来获取 Secret Key，从而可能造成安全问题。
解决方案一：预先生成固定 Payment Link
最简单的解决方案是预先在 Stripe 后台或通过后端脚本生成一组固定的 Payment Link。然后，在你的静态网站中，根据用户选择的商品，将他们重定向到相应的 Payment Link。
- 优点： 实现简单，无需后端服务器。
- 缺点： 不够灵活，无法处理动态变化的购物车内容。适用于商品种类较少，或者商品组合固定的情况。
示例：
假设你销售两种商品：商品 A 和商品 B。你可以在 Stripe 后台创建两个 Payment Link，分别对应商品 A 和商品 B。然后在你的网站上，你可以根据用户的选择，将他们重定向到相应的 Payment Link。
<a href="https://buy.stripe.com/YOUR_PAYMENT_LINK_A">购买商品 A</a> <a href="https://buy.stripe.com/YOUR_PAYMENT_LINK_B">购买商品 B</a>
解决方案二：使用后端服务动态生成 Payment Link 或 Checkout Sessions
如果你的购物车内容是动态变化的，预先生成 Payment Link 的方式就无法满足需求。这时，你需要一个后端服务来动态生成 Payment Link。
-
工作流程：
- 客户端将购物车信息发送到后端服务。
- 后端服务使用 Secret Key 调用 Stripe API 创建 Payment Link。
- 后端服务将 Payment Link 返回给客户端。
- 客户端将用户重定向到 Payment Link 进行支付。
优点： 灵活，可以处理动态变化的购物车内容。
缺点： 需要搭建和维护后端服务器。
示例 (Node.js):
const stripe = require('stripe')('YOUR_STRIPE_SECRET_KEY');
const express = require('express');
const app = express();
app.use(express.json());
app.post('/create-payment-link', async (req, res) => {
try {
const { line_items } = req.body; // 接收来自客户端的购物车信息
const paymentLink = await stripe.paymentLinks.create({
line_items: line_items, // 购物车信息
after_completion: {
type: 'redirect',
redirect: {
url: 'https://your-website.com/success?session_id={CHECKOUT_SESSION_ID}', // 支付成功后的重定向地址
},
},
});
res.json({ url: paymentLink.url }); // 将 Payment Link 返回给客户端
} catch (error) {
console.error(error);
res.status(500).json({ error: error.message });
}
});
app.listen(4242, () => console.log('Running on port 4242'));客户端代码：
async function createPaymentLink(cartItems) {
const response = await fetch('/create-payment-link', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ line_items: cartItems }), // 将购物车信息发送到后端
});
const data = await response.json();
window.location.href = data.url; // 重定向到 Payment Link
}更进一步：使用 Checkout Sessions
对于高度定制化的购物车场景，Stripe 官方更推荐使用 Checkout Sessions 。 Checkout Sessions 提供了更灵活的配置选项，例如自定义支付页面、处理订阅等。 Checkout Sessions 的创建也需要在后端进行，客户端只需要重定向到 Checkout Sessions 的 URL 即可。
注意事项：
- 安全性： 务必保护好你的 Stripe Secret Key，不要将其暴露在客户端代码中。
- 错误处理： 在后端服务中，要对 Stripe API 的调用进行错误处理，并向客户端返回合适的错误信息。
- 数据验证： 在后端服务中，要对客户端发送的购物车信息进行验证，防止恶意篡改。
总结：
在纯静态网站环境下，直接在客户端创建 Stripe Payment Link 是不安全的。你可以选择预先生成固定 Payment Link，或者搭建一个后端服务来动态生成 Payment Link 或 Checkout Sessions。 选择哪种方案取决于你的具体需求和场景。对于简单的商品销售，预先生成 Payment Link 可能足够。对于复杂的购物车场景，后端服务是更好的选择。
