Stripe Payment Element：跨函数访问与管理策略

// 假设这是在一个独立的模块文件内
export function MountStripeElement() {
    // stripe 和 elements 在此函数内部声明，作用域仅限于此函数
    const stripe = Stripe("pk_test_..."); 
    const options = {
        mode: 'subscription',
        amount: 1099,
        currency: 'usd',
        appearance: {/* ... 自定义样式 ... */},
    };

    const elements = stripe.elements(options);
    const paymentElement = elements.create('payment');
    paymentElement.mount('#payment-element');
}

export async function CreateStripeSubscription() {
    // ... 其他逻辑 ...

    // 期望访问之前 MountStripeElement 中创建的 elements 对象
    // const { error: submitError } = await elements.submit(); // 此时 elements 会是 undefined

    // var paymentElement = elements.getElement('payment'); // 此时 elements 会是 undefined
    // ...
}

// 声明在模块顶层，使其在整个模块中可访问
// 使用 let 替代 var 以避免污染全局命名空间，并遵循现代JS实践
let stripeInstance;
let stripeElements;

/**
 * 初始化并挂载Stripe Payment Element到DOM
 */
export function MountStripeElement() {
    // 确保Stripe.js库已加载
    if (typeof Stripe === 'undefined') {
        console.error("Stripe.js library not loaded. Please ensure it's included in your HTML.");
        return;
    }

    // 检查目标DOM元素是否存在
    if (!document.querySelector('#payment-element')) {
        console.error("Target DOM element '#payment-element' not found.");
        return;
    }

    // 初始化Stripe实例并赋值给模块级变量
    stripeInstance = Stripe("pk_test_YOUR_PUBLISHABLE_KEY"); // 替换为你的Stripe可发布密钥

    const options = {
        mode: 'subscription', // 或 'payment'
        amount: 1099, // 示例金额，单位为最小货币单位 (如美分)
        currency: 'usd',
        // 允许通过 Appearance API 自定义 Payment Element 的样式
        appearance: {
            theme: 'stripe',
            variables: {
                colorPrimary: '#6772E5',
            },
        },
    };

    // 创建Elements对象并赋值给模块级变量
    stripeElements = stripeInstance.elements(options);

    // 创建并挂载Payment Element
    const paymentElement = stripeElements.create('payment');
    paymentElement.mount('#payment-element');

    console.log("Stripe Payment Element mounted successfully.");
}

/**
 * 提交Stripe订阅支付请求
 * @param {Event} event - 提交事件对象，用于阻止默认表单提交行为
 */
export async function CreateStripeSubscription(event) {
    event.preventDefault();

    const submitBtn = document.getElementById('submit');
    const messageContainer = document.querySelector('#error-message');

    const handleError = (error) => {
        messageContainer.textContent = error.message;
        submitBtn.disabled = false;
    };

    // 检查 stripeElements 和 stripeInstance 是否已初始化
    if (!stripeElements || !stripeInstance) {
        handleError({ message: "Stripe Payment Element has not been initialized. Please mount it first." });
        return;
    }

    submitBtn.disabled = true; // 禁用提交按钮防止重复提交

    try {
        // 1. 提交Payment Element收集支付信息
        // 这一步会触发表单验证和Stripe内部的数据收集
        const { error: submitError } = await stripeElements.submit();
        if (submitError) {
            handleError(submitError);
            return;
        }

        // 2. 确认PaymentIntent或SetupIntent
        // clientSecret 必须从你的后端安全地获取，绝不能在前端硬编码或暴露
        const clientSecret = '{{CLIENT_SECRET_FROM_YOUR_SERVER}}'; // !!! 替换为你的实际client secret !!!

        const { error: confirmError } = await stripeInstance.confirmPayment({
            elements: stripeElements, // 传递已初始化的 elements 对象
            clientSecret,
            confirmParams: {
                // 支付完成后Stripe将用户重定向到的URL
                return_url: window.location.origin + '/payment-success', 
            },
        });

        if (confirmError) {
            handleError(confirmError);
        } else {
            // 支付成功，通常会重定向到 return_url
            // 如果不重定向，可以在此处处理成功后的UI更新或API调用
            messageContainer.textContent = '支付成功！正在处理...';
            // 成功后，用户将被重定向到 return_url
        }
    } catch (error) {
        // 捕获异步操作中可能发生的其他错误
        handleError(error);
    } finally {
        // 确保在所有情况下（除了重定向）都重新启用按钮
        // 如果 confirmPayment 导致重定向，下面的代码可能不会执行
        if (!messageContainer.textContent.includes('重定向')) { 
            submitBtn.disabled = false;
        }
    }
}