Stripe Payment Element 在多函数场景下的正确访问与管理

// mount.js
import { Stripe } from '@stripe/stripe-js'; // 假设您通过npm安装了Stripe.js

export function MountStripeElement() {
    const stripe = Stripe("pk_test_..."); // 初始化Stripe对象

    const options = {
        mode: 'subscription',
        amount: 1099,
        currency: 'usd',
        appearance: { /* ... */ },
    };

    const elements = stripe.elements(options); // 创建elements实例
    const paymentElement = elements.create('payment'); // 创建Payment Element
    paymentElement.mount('#payment-element'); // 挂载到DOM
}

// stripe-payment-module.js

// 1. 在模块顶部声明变量，使其成为模块级变量
let stripeInstance; // 使用let以便后续赋值
let elementsInstance; // 使用let以便后续赋值

/**
 * 初始化并挂载Stripe Payment Element。
 * 该函数负责初始化Stripe对象和Elements实例，并将其存储在模块级变量中。
 */
export function MountStripeElement() {
    // 2. 在初始化函数中为模块级变量赋值
    stripeInstance = Stripe("pk_test_..."); // 使用您的公开测试密钥

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

    elementsInstance = stripeInstance.elements(options); // 创建并存储elements实例
    const paymentElement = elementsInstance.create('payment');
    paymentElement.mount('#payment-element'); // 挂载到DOM元素，例如 <div id="payment-element"></div>
}

/**
 * 提交支付并确认Stripe订阅。
 * 该函数将使用之前挂载的Payment Element和Elements实例。
 */
export async function CreateStripeSubscription() {
    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;

    // 3. 在提交函数中直接使用模块级变量
    if (!elementsInstance || !stripeInstance) {
        handleError({ message: "Stripe Payment Element 尚未初始化。" });
        return;
    }

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

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

    // 获取Payment Element实例（可选，如果需要直接操作paymentElement）
    // const paymentElement = elementsInstance.getElement('payment');

    // 确认PaymentIntent，需要一个clientSecret，通常从后端获取
    const clientSecret = "pi_..._secret_..."; // 替换为您的实际clientSecret

    const { error } = await stripeInstance.confirmPayment({
        elements: elementsInstance, // 传递elements实例
        clientSecret: clientSecret,
        confirmParams: {
            return_url: 'https://www.google.co.uk/', // 支付成功或失败后的跳转URL
        },
    });

    if (error) {
        handleError(error);
    } else {
        // 支付成功处理逻辑
        messageContainer.textContent = "支付成功！";
        // 可能需要重定向或更新UI
    }
    submitBtn.disabled = false; // 重新启用按钮
}