Stripe Checkout脚本中data-description无法读取JS变量的问题求助

嘿，别担心基础问题，谁都有在细节上卡壳的时候😉 我来帮你理清楚这里的问题所在：

问题根源 #

你直接写data-description='bonjour'能生效，是因为浏览器会把这个字符串直接作为属性值解析；但你写data-description=desc时，浏览器只会把desc当成字符串字面量，而不会去读取你定义的JS变量desc的值——静态HTML属性本身不支持直接引用JS变量哦。

两种可行的解决方案 #

方案1：动态创建Stripe Checkout脚本标签 #

这种方法最稳妥，因为我们用JS生成脚本元素时，可以直接把变量值赋给对应的data属性：

// 先定义你的变量
var desc = 'bonjour';
var amount = 1000; // 替换成你的实际金额（注意Stripe用分作为单位）
var userName = '<%= current_user.full_name %>';

// 创建script元素
const stripeScript = document.createElement('script');
stripeScript.src = 'https://checkout.stripe.com/checkout.js';
stripeScript.className = 'stripe-button';

// 给元素设置所有需要的data属性
stripeScript.setAttribute('data-key', '你的Stripe API密钥'); // 记得替换成实际密钥
stripeScript.setAttribute('data-amount', amount);
stripeScript.setAttribute('data-name', userName);
stripeScript.setAttribute('data-description', desc);

// 将脚本添加到页面（比如body末尾）
document.body.appendChild(stripeScript);

方案2：静态写标签后用JS修改属性 #

如果你更习惯先写静态HTML标签，也可以在JS里动态修改它的data属性，但要注意修改操作要在checkout.js加载之前完成，这样脚本加载时才能读到正确的属性值：

<!-- 先写静态脚本标签，属性可以留空或设默认值 -->
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="" data-amount="" data-name="<%= current_user.full_name %>" data-description=""></script>

<script>
// 定义变量
var desc = 'bonjour';
var amount = 1000;

// 获取Stripe按钮的脚本元素
const stripeBtn = document.querySelector('.stripe-button');

// 更新属性值
stripeBtn.setAttribute('data-description', desc);
stripeBtn.setAttribute('data-amount', amount);
stripeBtn.setAttribute('data-key', '你的Stripe API密钥'); // 补充密钥
</script>

额外提醒 #

Stripe的金额单位是分，比如你要收10美元，data-amount就要设为1000，别搞错啦！

内容的提问来源于stack exchange，提问作者Gregoire Mulliez