Stripe API的payment-element与link-authentication-element无法显示求助

问题概述 #

使用Stripe API时，payment-element和link-authentication-element无法渲染，页面仅显示“Pay now”按钮，JavaScript代码未按预期注入表单内容。已尝试调整脚本位置、更换SDK版本（当前v22.0.0），但未解决，预期页面显示邮箱输入框、支付方式选择模块等内容。

核心排查方向 #

1. Stripe对象加载顺序错误：checkout.js在Stripe SDK之前加载，导致stripe变量未定义
2. Payment Intent接口异常：后端/create-payment-intent未返回有效的clientSecret
3. 代码不完整：缺失checkStatus、setLoading等关键函数，handleSubmit未完成
4. CSS样式隐藏元素：checkout.css可能设置了元素隐藏规则

分步修复方案 #

1. 调整脚本加载顺序 #

将checkout.js的引入放在Stripe SDK之后，确保Stripe对象先初始化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Accept a payment</title>
    <meta name="description" content="A demo of a payment on Stripe" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="checkout.css" />
</head>
<body>
    <form id="payment-form">
        <div id="link-authentication-element"></div>
        <div id="payment-element"></div>
        <button id="submit">
            <div class="spinner hidden" id="spinner"></div>
            <span id="button-text">Pay now</span>
        </button>
        <div id="payment-message" class="hidden"></div>
    </form>
    <script src="https://js.stripe.com/v3/"></script>
    <script src="/checkout.js"></script> <!-- 移至Stripe SDK之后，移除defer -->
</body>
</html>

2. 补全并修正JavaScript代码 #

添加缺失的函数，增加错误处理，确保stripe对象正确初始化：

let elements;
// 替换为你的Stripe公钥
let stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxxxxxxxx');

initialize();
checkStatus();

document.querySelector("#payment-form").addEventListener("submit", handleSubmit);

let emailAddress = '';

async function initialize() {
    try {
        const response = await fetch("/create-payment-intent", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            // 确保items参数符合后端要求，若无商品可传空数组
            body: JSON.stringify({ items: [] }),
        });
        
        if (!response.ok) throw new Error('获取Payment Intent失败');
        
        const { clientSecret } = await response.json();
        
        if (!clientSecret) throw new Error('未获取到有效的clientSecret');
        
        const appearance = { theme: 'stripe' };
        elements = stripe.elements({ appearance, clientSecret });
        
        // 渲染Link Authentication Element
        const linkAuthenticationElement = elements.create("linkAuthentication");
        linkAuthenticationElement.mount("#link-authentication-element");
        
        linkAuthenticationElement.on('change', (event) => {
            emailAddress = event.value.email;
        });
        
        // 渲染Payment Element
        const paymentElementOptions = { layout: "tabs" };
        const paymentElement = elements.create("payment", paymentElementOptions);
        paymentElement.mount("#payment-element");
    } catch (error) {
        showMessage(`初始化错误: ${error.message}`);
        setLoading(false);
    }
}

async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true);
    
    try {
        const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: {
                return_url: "http://localhost:8080/checkout.html",
                receipt_email: emailAddress,
            },
        });
        
        if (error) showMessage(error.message);
    } catch (error) {
        showMessage(`支付错误: ${error.message}`);
    } finally {
        setLoading(false);
    }
}

// 检查支付状态
async function checkStatus() {
    const clientSecret = new URLSearchParams(window.location.search).get(
        "payment_intent_client_secret"
    );
    
    if (!clientSecret) return;
    
    const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);
    
    switch (paymentIntent.status) {
        case "succeeded":
            showMessage("支付成功！");
            break;
        case "processing":
            showMessage("支付处理中，请稍候...");
            break;
        case "requires_payment_method":
            showMessage("支付失败，请重新尝试。");
            break;
        default:
            showMessage("支付失败，请联系客服。");
            break;
    }
}

// 控制按钮加载状态
function setLoading(isLoading) {
    const submitBtn = document.querySelector("#submit");
    const spinner = document.querySelector("#spinner");
    const btnText = document.querySelector("#button-text");
    
    submitBtn.disabled = isLoading;
    spinner.classList.toggle("hidden", !isLoading);
    btnText.classList.toggle("hidden", isLoading);
}

// 显示提示消息
function showMessage(messageText) {
    const messageContainer = document.querySelector("#payment-message");
    messageContainer.classList.remove("hidden");
    messageContainer.textContent = messageText;
    
    setTimeout(() => messageContainer.classList.add("hidden"), 4000);
}

3. 验证后端接口 #

确保/create-payment-intent接口：

• 返回HTTP 200状态码
• 响应体为包含clientSecret的JSON，格式如下：

  { "clientSecret": "pi_xxxxxx_secret_xxxxxx" }
  

• 正确创建Payment Intent，金额、货币等参数配置无误

4. 检查CSS样式 #

暂时注释掉checkout.css的引入，测试元素是否显示。若显示，排查CSS中是否有display: none或visibility: hidden等隐藏规则。

关键注意事项 #

• 必须替换代码中的Stripe公钥为你账号的Publishable Key
• 打开浏览器开发者工具（F12）查看控制台错误，这是快速定位问题的核心方式
• 确保前端域名已添加到Stripe控制台的允许域名列表中

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