Stripe Payment Element 跨函数访问与管理指南

// 初始的Stripe和Elements对象声明（存在作用域问题）
// const stripe = Stripe("pk_test_...");
// const elements = stripe.elements(options);

export function mountStripePaymentElement() {
    const stripePublicKey = "pk_test_YOUR_STRIPE_PUBLISHABLE_KEY"; // 替换为你的Stripe公钥
    const stripe = Stripe(stripePublicKey); // Stripe实例

    const options = {
        mode: 'subscription', // 或 'payment'
        amount: 1099, // 金额，以最小单位计（例如，1099美分 = $10.99）
        currency: 'usd',
        appearance: { /* 自定义外观 */ },
    };

    // 创建Elements对象
    const elements = stripe.elements(options);

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

    console.log("Stripe Payment Element 已挂载。");
    // 在这里，`stripe`和`elements`是局部变量，外部函数无法直接访问
}

// 尝试在另一个函数中访问elements（会失败，因为elements是undefined）
export async function createStripeSubscription() {
    // ... 错误处理和UI禁用逻辑 ...

    // 假设我们在这里需要访问elements对象
    // const { error: submitError } = await elements.submit(); // elements会是undefined

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

    // ... 后续逻辑 ...
}

// 在模块顶层声明变量，使其在整个模块中可访问
let stripe;
let elements;
const stripePublicKey = "pk_test_YOUR_STRIPE_PUBLISHABLE_KEY"; // 替换为你的Stripe公钥

export function mountStripePaymentElement() {
    // 仅在首次挂载时初始化Stripe和Elements
    if (!stripe) {
        stripe = Stripe(stripePublicKey);
    }

    const options = {
        mode: 'subscription',
        amount: 1099,
        currency: 'usd',
        appearance: { /* 自定义外观 */ },
    };

    if (!elements) {
        elements = stripe.elements(options);
    }

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

    console.log("Stripe Payment Element 已成功挂载，Stripe和Elements对象已共享。");
}

export async function createStripeSubscription(event, clientSecret) {
    event.preventDefault(); // 阻止表单默认提交行为

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

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

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

    // 确保elements对象已存在
    if (!elements) {
        handleError({ message: "Stripe Payment Element 未初始化。" });
        return;
    }

    // 1. 提交Payment Element收集的用户数据
    const { error: submitError } = await elements.submit();

    if (submitError) {
        handleError(submitError);
        return;
    }

    // 2. 获取Payment Element实例（如果需要，尽管confirmPayment通常可以直接接受elements对象）
    // const paymentElement = elements.getElement('payment'); // 也可以直接传递elements对象

    // 3. 确认支付意图 (PaymentIntent)
    // clientSecret 应从你的后端安全获取
    const { error } = await stripe.confirmPayment({
        elements, // 直接传递elements对象
        clientSecret, // 从后端获取的客户端密钥
        confirmParams: {
            return_url: 'https://www.your-website.com/payment-success', // 支付成功后的重定向URL
        },
    });

    if (error) {
        handleError(error);
    } else {
        // 支付成功，处理后续逻辑
        messageContainer.textContent = "支付成功！";
        console.log("支付成功，重定向至成功页面或处理后续业务逻辑。");
        // 例如：window.location.href = 'https://www.your-website.com/payment-success';
    }
    submitBtn.disabled = false; // 重新启用按钮
}