为何Stripe按钮未显示？网站集成Stripe Checkout网关问题

可能的原因及修复方案 #

1. 模板继承未正确使用块标签 #

你使用了{% extends 'basic.html' %}，但直接在模板中写入<h2>和<script>标签，大概率是没将内容放入父模板定义的block块中。父模板basic.html通常会有类似{% block content %}的预留块，你需要把代码放到这个块内，否则渲染时这些内容不会被加载到页面里：

{% extends 'basic.html' %}

{% block content %}
<h2>buy</h2>

<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="{{ key }}"
        data-description="payment gateway"
        data-amount="500"
        data-locale="auto">
</script>
{% endblock %}

2. 确认{{ key }}已正确渲染为Stripe公钥 #

查看页面源代码，检查data-key的值是否是你的Stripe公钥（格式类似pk_test_xxxxxx），而不是原样显示{{ key }}。如果还是模板变量，说明视图函数没有将key传入模板上下文，需要在视图中补充：

# Django视图示例代码
from django.shortcuts import render

def buy_page(request):
    stripe_public_key = "你的Stripe公钥"
    return render(request, '你的模板文件名.html', {'key': stripe_public_key})

3. 检查旧版Checkout脚本的兼容性 #

你用的是Stripe旧版Checkout（checkout.js），现在Stripe官方推荐使用基于Stripe.js v3的新版Checkout。如果旧版脚本加载异常，可以切换到新版实现，示例代码如下：

{% extends 'basic.html' %}

{% block content %}
<h2>buy</h2>

<button id="checkout-button">立即购买</button>

<script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe('{{ key }}');
    const checkoutBtn = document.getElementById('checkout-button');

    checkoutBtn.addEventListener('click', async () => {
        // 调用后端接口生成结账会话
        const session = await fetch('/create-checkout-session', { method: 'POST' }).then(res => res.json());
        // 跳转到Stripe结账页面
        const result = await stripe.redirectToCheckout({ sessionId: session.id });
        
        if (result.error) {
            alert(result.error.message);
        }
    });
</script>
{% endblock %}

同时需要在后端实现/create-checkout-session接口，用于生成Stripe结账会话（具体逻辑可参考Stripe官方的会话创建规则）。

4. 用浏览器控制台排查JS错误 #

打开浏览器开发者工具（按F12）切换到控制台标签，查看是否有JS报错信息，比如脚本加载失败、权限错误等，这些都会直接导致按钮无法渲染。

内容的提问来源于stack exchange，提问作者Abdul Moiz Shah