Django中HTML向带addEventListener的独立JS传Stripe支付金额问题

你遇到的报错和变量传递问题是两个独立问题叠加导致的：

1. Stripe SDK调用语法错误是触发控制台报错的直接原因：你写的stripe.paymentRequest() ({...})属于语法写错了，相当于先无参调用stripe.paymentRequest()拿到返回值（该返回值不是函数），再尝试把配置对象作为参数传入这个非函数值，才会抛出total字段类型异常的报错，和amount变量本身的数值无关。
2. 变量传递方式不规范存在隐患：你在HTML内联脚本中隐式声明的amount变量没有明确的作用域约定，虽然当前DOMContentLoaded触发时能打印出值，但在严格模式下、或者被其他脚本污染时很容易出现读取失败的问题，不推荐这种隐式全局的写法。

1. 先修正Stripe接口的调用语法 #

把apple-pay.js中多余的括号删掉，paymentRequest方法本身就直接接收配置对象作为参数：

// 错误写法
// const paymentRequest = stripe.paymentRequest() ({

// 正确写法
const paymentRequest = stripe.paymentRequest({
    currency: 'usd',
    country: 'US',
    requestPayerName: true,
    requestPayerEmail: true,
    total: {
        label: 'Test payment',
        amount: amount,
    }
});

2. 用规范方式把Django模板变量传入静态JS #

两种方案二选一即可，优先推荐第二种无全局污染的写法：

方案A：显式挂载全局变量（适配现有代码改造成本最低） #

修改home.html中的内联脚本，显式把金额挂载到window全局对象上，避免作用域异常：

<div class="container container--narrow">
    <script>
        // 显式声明全局变量，parseInt必须传第二个基数参数避免进制解析错误
        window.stripePayAmount = parseInt("{{event.price}}", 10);
    </script>
    <div id="payment-request-button">
        <!-- Stripe支付组件将插入此处 -->
    </div>
</div>

在apple-pay.js中直接读取该全局值即可：

total: {
    label: 'Test payment',
    amount: window.stripePayAmount,
}

方案B：通过DOM的data属性传值（无全局变量污染，更符合规范） #

不需要写额外的内联脚本，直接把金额存在支付容器的自定义属性上：

<div class="container container--narrow">
    <div 
        id="payment-request-button"
        data-pay-amount="{{event.price}}"
    >
        <!-- Stripe支付组件将插入此处 -->
    </div>
</div>

注意两个细节：

• Stripe要求传入的金额为货币最小单位（比如美元单位是分），如果模板中{{event.price}}是元为单位，需要在模板层先乘100转换为分再传入
• 后续JS解析时parseInt必须传入第二个基数参数10，避免部分环境下把0开头的数字误解析为八进制值

在apple-pay.js中从DOM节点读取并解析金额：

document.addEventListener('DOMContentLoaded', async () => {
    const stripe = Stripe('pk_test_testkey');
    // 从DOM属性读取金额
    const payContainer = document.getElementById('payment-request-button');
    const amount = parseInt(payContainer.dataset.payAmount, 10);

    const paymentRequest = stripe.paymentRequest({
        currency: 'usd',
        country: 'US',
        requestPayerName: true,
        requestPayerEmail: true,
        total: {
            label: 'Test payment',
            amount: amount,
        }
    });

    // 其余支付逻辑保持不变
});

修改完成后，先在控制台确认读取到的amount值为预期的整数类型，再初始化paymentRequest，只要语法正确、金额值读取正常，就不会再报类型错误。

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