@seaverse/payment-sdk 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -1093,6 +1093,4068 @@ function getSDKLocale(locale) {
     return LOCALE_MAP[locale] || LOCALE_MAP['en'];
 }
 
+/**
+ * Payment Storage
+ * 支付数据存储 - 统一管理 localStorage 操作
+ */
+class PaymentStorage {
+    /**
+     * 保存交易数据
+     */
+    static saveTransaction(data) {
+        const storageData = {
+            transactionId: data.transactionId,
+            orderId: data.orderId,
+            createdAt: Date.now(),
+            expiresAt: Date.now() + data.expiresIn,
+        };
+        try {
+            localStorage.setItem(this.KEY, JSON.stringify(storageData));
+            console.log('[PaymentStorage] Transaction saved:', {
+                transactionId: data.transactionId,
+                expiresIn: `${Math.round(data.expiresIn / 1000)}s`,
+            });
+        }
+        catch (error) {
+            console.error('[PaymentStorage] Failed to save transaction:', error);
+        }
+    }
+    /**
+     * 获取交易数据
+     */
+    static getTransaction() {
+        try {
+            const stored = localStorage.getItem(this.KEY);
+            if (!stored) {
+                return null;
+            }
+            const data = JSON.parse(stored);
+            // 检查是否过期
+            if (Date.now() > data.expiresAt) {
+                console.warn('[PaymentStorage] Transaction expired, removing');
+                this.clearTransaction();
+                return null;
+            }
+            const remainingSeconds = Math.round((data.expiresAt - Date.now()) / 1000);
+            console.log('[PaymentStorage] Transaction retrieved:', {
+                transactionId: data.transactionId,
+                remainingTime: `${remainingSeconds}s`,
+            });
+            return data;
+        }
+        catch (error) {
+            console.error('[PaymentStorage] Failed to get transaction:', error);
+            return null;
+        }
+    }
+    /**
+     * 清除交易数据
+     */
+    static clearTransaction() {
+        try {
+            localStorage.removeItem(this.KEY);
+            console.log('[PaymentStorage] Transaction cleared');
+        }
+        catch (error) {
+            console.error('[PaymentStorage] Failed to clear transaction:', error);
+        }
+    }
+}
+PaymentStorage.KEY = 'seaverse_payment_transaction';
+
+/**
+ * LinkPaymentComponent
+ * Link 支付组件（跳转支付）- payment_type = 1
+ */
+class LinkPaymentComponent {
+    constructor(params) {
+        this.linkPayment = null;
+        this.paymentInstance = params.paymentInstance;
+        this.orderId = params.orderId;
+        this.accountToken = params.accountToken;
+        this.paymentMethod = params.paymentMethod;
+        this.callbackUrl = params.callbackUrl;
+        console.log('[LinkPaymentComponent] Created:', {
+            orderId: this.orderId,
+            paymentMethod: this.paymentMethod.payment_method_name,
+            callbackUrl: this.callbackUrl,
+        });
+    }
+    /**
+     * 创建订单并获取支付链接
+     */
+    async createOrder() {
+        console.log('[LinkPaymentComponent] Creating order...');
+        try {
+            // 创建 Link 支付实例
+            this.linkPayment = this.paymentInstance.createLink(this.paymentMethod, {
+                callback_url: this.callbackUrl,
+            });
+            // 创建订单
+            const result = await this.linkPayment.createOrder();
+            console.log('[LinkPaymentComponent] Order created:', {
+                transactionId: result.data.transaction_id,
+            });
+            // 保存 transactionId 到 localStorage（30 分钟过期）
+            PaymentStorage.saveTransaction({
+                transactionId: result.data.transaction_id,
+                orderId: this.orderId,
+                expiresIn: 30 * 60 * 1000, // 30 分钟
+            });
+            return result;
+        }
+        catch (error) {
+            console.error('[LinkPaymentComponent] Create order failed:', error);
+            throw error;
+        }
+    }
+    /**
+     * 跳转到支付页面（当前窗口）
+     */
+    async redirectToPayment() {
+        console.log('[LinkPaymentComponent] Redirecting to payment...');
+        try {
+            const result = await this.createOrder();
+            const payment_url = result.data?.payment_url;
+            console.log('[LinkPaymentComponent] Redirecting to:', payment_url);
+            window.location.href = payment_url;
+        }
+        catch (error) {
+            console.error('[LinkPaymentComponent] Redirect failed:', error);
+            throw error;
+        }
+    }
+    /**
+     * 新窗口打开支付页面
+     */
+    async openPayment(windowFeatures = 'width=850,height=680') {
+        console.log('[LinkPaymentComponent] Opening payment in new window...');
+        try {
+            const result = await this.createOrder();
+            const payment_url = result.data?.payment_url;
+            console.log('[LinkPaymentComponent] Opening URL:', payment_url);
+            const newWindow = window.open(payment_url, '_blank', windowFeatures);
+            if (!newWindow) {
+                console.warn('[LinkPaymentComponent] Failed to open new window (popup blocked?)');
+            }
+            return newWindow;
+        }
+        catch (error) {
+            console.error('[LinkPaymentComponent] Open payment failed:', error);
+            throw error;
+        }
+    }
+}
+
+/**
+ * DropinPaymentComponent
+ * Dropin 支付组件（嵌入式支付）- payment_type = 2
+ */
+class DropinPaymentComponent {
+    constructor(params) {
+        this.dropinPayment = null;
+        this.rendered = false;
+        this.paymentInstance = params.paymentInstance;
+        this.orderId = params.orderId;
+        this.accountToken = params.accountToken;
+        this.paymentMethod = params.paymentMethod;
+        this.containerId = params.containerId;
+        this.callbacks = {
+            onSubmit: params.onSubmit,
+            onError: params.onError,
+            onCreateOrder: params.onCreateOrder,
+            onCompleted: params.onCompleted,
+            onFailed: params.onFailed,
+            onLoading: params.onLoading,
+        };
+        console.log('[DropinPaymentComponent] Created:', {
+            orderId: this.orderId,
+            paymentMethod: this.paymentMethod.payment_method_name,
+            containerId: this.containerId,
+        });
+    }
+    /**
+     * 渲染支付组件到容器
+     */
+    async render() {
+        if (this.rendered) {
+            console.warn('[DropinPaymentComponent] Already rendered');
+            return;
+        }
+        console.log('[DropinPaymentComponent] Rendering...');
+        try {
+            // 检查容器是否存在
+            const container = document.querySelector(this.containerId);
+            if (!container) {
+                throw new Error(`Container not found: ${this.containerId}`);
+            }
+            // 创建 Dropin 支付实例
+            this.dropinPayment = this.paymentInstance.createDropin(this.paymentMethod, {
+                onSubmit: (payload) => {
+                    console.log('[DropinPaymentComponent] onSubmit:', payload);
+                    this.callbacks.onSubmit?.(payload);
+                },
+                onError: (payload, error) => {
+                    console.error('[DropinPaymentComponent] onError:', error);
+                    this.callbacks.onError?.(payload, error);
+                },
+                onCreateOrder: (payload) => {
+                    console.log('[DropinPaymentComponent] onCreateOrder:', payload);
+                    // 保存 transactionId
+                    if (payload.transactionId || payload.transaction_id) {
+                        PaymentStorage.saveTransaction({
+                            transactionId: payload.transactionId || payload.transaction_id,
+                            orderId: this.orderId,
+                            expiresIn: 30 * 60 * 1000, // 30分钟
+                        });
+                    }
+                    this.callbacks.onCreateOrder?.(payload);
+                },
+                onCompleted: (payload) => {
+                    console.log('[DropinPaymentComponent] onCompleted:', payload);
+                    this.callbacks.onCompleted?.(payload);
+                },
+                onFailed: (payload) => {
+                    console.error('[DropinPaymentComponent] onFailed:', payload);
+                    this.callbacks.onFailed?.(payload);
+                },
+                onLoading: (loading) => {
+                    console.log('[DropinPaymentComponent] onLoading:', loading);
+                    this.callbacks.onLoading?.(loading);
+                },
+            });
+            // 渲染到容器
+            await this.dropinPayment.render(this.containerId);
+            this.rendered = true;
+            console.log('[DropinPaymentComponent] Rendered successfully');
+        }
+        catch (error) {
+            console.error('[DropinPaymentComponent] Render failed:', error);
+            throw error;
+        }
+    }
+    /**
+     * 销毁组件
+     */
+    destroy() {
+        if (!this.rendered || !this.dropinPayment) {
+            console.warn('[DropinPaymentComponent] Not rendered, nothing to destroy');
+            return;
+        }
+        try {
+            // 调用 SDK 的销毁方法（防御性检查）
+            if (typeof this.dropinPayment.destroy === 'function') {
+                this.dropinPayment.destroy();
+            }
+            else {
+                console.warn('[DropinPaymentComponent] Dropin payment instance does not have destroy method, skipping');
+            }
+            this.dropinPayment = null;
+            this.rendered = false;
+            console.log('[DropinPaymentComponent] Destroyed');
+        }
+        catch (error) {
+            console.error('[DropinPaymentComponent] Destroy failed:', error);
+            // 即使销毁失败，也清理引用
+            this.dropinPayment = null;
+            this.rendered = false;
+        }
+    }
+}
+
+/**
+ * BindCardPaymentComponent
+ * BindCard 支付组件（已绑定卡片支付）
+ */
+class BindCardPaymentComponent {
+    constructor(params) {
+        this.bindCardPayment = null;
+        this.paymentInstance = params.paymentInstance;
+        this.orderId = params.orderId;
+        this.paymentMethod = params.paymentMethod;
+        this.callbacks = {
+            onCompleted: params.onCompleted,
+            onFailed: params.onFailed,
+        };
+        console.log('[BindCardPaymentComponent] Created:', {
+            orderId: this.orderId,
+            paymentMethod: this.paymentMethod.payment_method_name,
+        });
+    }
+    /**
+     * 获取用户已绑定的卡列表
+     */
+    async getCardList() {
+        console.log('[BindCardPaymentComponent] Getting card list...');
+        try {
+            // 创建 BindCard 支付实例
+            this.bindCardPayment = this.paymentInstance.createBindCard(this.paymentMethod, {
+                onCompleted: this.callbacks.onCompleted,
+                onFailed: this.callbacks.onFailed,
+            });
+            // 获取卡列表
+            const result = await this.bindCardPayment.getCardList();
+            if (result.err) {
+                throw new Error(result.message || 'Failed to get card list');
+            }
+            const cardList = result.data?.user_bind_info_list || [];
+            console.log('[BindCardPaymentComponent] Card list retrieved:', {
+                count: cardList.length,
+            });
+            return cardList;
+        }
+        catch (error) {
+            console.error('[BindCardPaymentComponent] Get card list failed:', error);
+            throw error;
+        }
+    }
+    /**
+     * 使用已绑定的卡创建订单
+     */
+    async createOrder(instrumentId) {
+        console.log('[BindCardPaymentComponent] Creating order with card:', instrumentId);
+        try {
+            // 创建 BindCard 支付实例（如果还没有创建）
+            if (!this.bindCardPayment) {
+                this.bindCardPayment = this.paymentInstance.createBindCard(this.paymentMethod, {
+                    onCompleted: (payload) => {
+                        console.log('[BindCardPaymentComponent] onCompleted:', payload);
+                        this.callbacks.onCompleted?.(payload);
+                    },
+                    onFailed: (payload) => {
+                        console.error('[BindCardPaymentComponent] onFailed:', payload);
+                        this.callbacks.onFailed?.(payload);
+                    },
+                });
+            }
+            // 创建订单
+            await this.bindCardPayment.createOrder(instrumentId);
+            console.log('[BindCardPaymentComponent] Order created');
+        }
+        catch (error) {
+            console.error('[BindCardPaymentComponent] Create order failed:', error);
+            throw error;
+        }
+    }
+}
+
+/**
+ * OrderPayment
+ * 订单支付实例 - 为每个订单创建独立的支付实例
+ */
+class OrderPayment {
+    constructor(params) {
+        this.paymentInstance = params.paymentInstance;
+        this.orderId = params.orderId;
+        this.accountToken = params.accountToken;
+        console.log('[OrderPayment] Created:', {
+            orderId: this.orderId,
+            hasAccountToken: !!this.accountToken,
+        });
+    }
+    /**
+     * 获取订单信息
+     */
+    async getOrderInfo() {
+        console.log('[OrderPayment] Getting order info...');
+        try {
+            const result = await this.paymentInstance.getOrderInfo();
+            if (result.err) {
+                throw new Error(result.message || 'Failed to get order info');
+            }
+            const orderInfo = result.data?.order_info;
+            if (!orderInfo) {
+                throw new Error('No order info returned');
+            }
+            // 检查订单状态
+            if (orderInfo.order_status !== 1) {
+                console.warn('[OrderPayment] Order status is not pending:', orderInfo.order_status);
+            }
+            console.log('[OrderPayment] Order info retrieved:', {
+                orderId: orderInfo.sys_order_id,
+                status: orderInfo.order_status,
+                expireTime: orderInfo.expire_time,
+            });
+            return orderInfo;
+        }
+        catch (error) {
+            console.error('[OrderPayment] Get order info failed:', error);
+            throw error;
+        }
+    }
+    /**
+     * 创建 Link 支付组件（按需加载）
+     * 适用于 payment_type = 1
+     */
+    createLinkPayment(paymentMethod, options) {
+        if (paymentMethod.payment_type !== 1) {
+            throw new Error('[OrderPayment] Payment method is not Link type (payment_type should be 1)');
+        }
+        return new LinkPaymentComponent({
+            paymentInstance: this.paymentInstance,
+            orderId: this.orderId,
+            accountToken: this.accountToken,
+            paymentMethod,
+            callbackUrl: options.callback_url,
+        });
+    }
+    /**
+     * 创建 Dropin 支付组件（按需加载）
+     * 适用于 payment_type = 2
+     */
+    createDropinPayment(paymentMethod, options) {
+        if (paymentMethod.payment_type !== 2) {
+            throw new Error('[OrderPayment] Payment method is not Dropin type (payment_type should be 2)');
+        }
+        return new DropinPaymentComponent({
+            paymentInstance: this.paymentInstance,
+            orderId: this.orderId,
+            accountToken: this.accountToken,
+            paymentMethod,
+            ...options,
+        });
+    }
+    /**
+     * 创建 BindCard 支付组件（按需加载）
+     * 适用于 payment_type = 2 且支持绑卡的支付方式
+     */
+    createBindCardPayment(paymentMethod, options) {
+        if (paymentMethod.payment_type !== 2) {
+            throw new Error('[OrderPayment] Payment method is not Dropin type (payment_type should be 2)');
+        }
+        return new BindCardPaymentComponent({
+            paymentInstance: this.paymentInstance,
+            orderId: this.orderId,
+            accountToken: this.accountToken,
+            paymentMethod,
+            ...options,
+        });
+    }
+}
+
+/**
+ * Error Handler
+ * 错误处理器 - 标准化错误和友好提示
+ */
+/**
+ * 支付错误类
+ */
+class PaymentError extends Error {
+    constructor(code, bizCode, message) {
+        super(message);
+        this.code = code;
+        this.bizCode = bizCode;
+        this.name = 'PaymentError';
+    }
+}
+class ErrorHandler {
+    /**
+     * 标准化错误
+     */
+    static normalize(error) {
+        if (error instanceof PaymentError) {
+            return error;
+        }
+        // 从错误对象中提取信息
+        const code = error.code || error.status || -1;
+        const bizCode = error.bizCode || error.business_code;
+        const message = error.message || error.msg || 'Unknown payment error';
+        return new PaymentError(code, bizCode, message);
+    }
+    /**
+     * 根据错误码获取友好提示
+     */
+    static getFriendlyMessage(error) {
+        // 发行服务错误码
+        const errorMessages = {
+            300000: '请稍后重试或切换支付方式',
+            301000: '系统异常，请稍后再试',
+            302000: '卡授权状态异常',
+            303000: '交易异常识别高风险',
+            304000: '交易金额超范围限制，使用其它支付方式',
+            305000: '支付交易被拒绝',
+            306000: '退款失败',
+            307000: '支付验证错误',
+            308000: '账户余额不足',
+            309000: '商户服务可用性异常',
+        };
+        return errorMessages[error.code] || error.message;
+    }
+}
+
+/**
+ * Script Loader
+ * 动态加载 SeaartPaymentComponent SDK 脚本
+ */
+class ScriptLoader {
+    /**
+     * 动态加载 SeaartPaymentComponent SDK
+     */
+    static async loadSeaartPaymentComponent(options) {
+        const { scriptUrl, timeout = 10000 } = options;
+        // 1. 检查是否已经加载
+        if (this.loadedScripts.has(scriptUrl) && window.SeaartPaymentComponent) {
+            console.log('[ScriptLoader] SeaartPaymentComponent already loaded');
+            return;
+        }
+        // 2. 检查脚本标签是否已存在
+        const existingScript = document.querySelector(`script[src="${scriptUrl}"]`);
+        if (existingScript) {
+            console.log('[ScriptLoader] Script tag exists, waiting for load...');
+            return this.waitForSeaartPaymentComponent(timeout);
+        }
+        // 3. 创建并注入脚本标签
+        console.log('[ScriptLoader] Loading script:', scriptUrl);
+        return new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = scriptUrl;
+            script.defer = true;
+            // 超时处理
+            const timeoutId = setTimeout(() => {
+                reject(new Error(`[ScriptLoader] Script load timeout after ${timeout}ms`));
+            }, timeout);
+            // 加载成功
+            script.onload = async () => {
+                clearTimeout(timeoutId);
+                console.log('[ScriptLoader] Script loaded');
+                try {
+                    // 等待 window.SeaartPaymentComponent 可用
+                    await this.waitForSeaartPaymentComponent(timeout);
+                    this.loadedScripts.add(scriptUrl);
+                    resolve();
+                }
+                catch (error) {
+                    reject(error);
+                }
+            };
+            // 加载失败
+            script.onerror = () => {
+                clearTimeout(timeoutId);
+                reject(new Error('[ScriptLoader] Failed to load script'));
+            };
+            // 添加到 DOM
+            document.head.appendChild(script);
+        });
+    }
+    /**
+     * 等待 window.SeaartPaymentComponent 可用
+     */
+    static async waitForSeaartPaymentComponent(timeout) {
+        const startTime = Date.now();
+        const checkInterval = 100; // 每 100ms 检查一次
+        return new Promise((resolve, reject) => {
+            const check = () => {
+                // 检查是否超时
+                if (Date.now() - startTime > timeout) {
+                    reject(new Error('[ScriptLoader] window.SeaartPaymentComponent not available'));
+                    return;
+                }
+                // 检查是否可用
+                if (window.SeaartPaymentComponent) {
+                    console.log('[ScriptLoader] window.SeaartPaymentComponent is available');
+                    resolve();
+                    return;
+                }
+                // 继续等待
+                setTimeout(check, checkInterval);
+            };
+            check();
+        });
+    }
+    /**
+     * 清除已加载的脚本记录（测试用）
+     */
+    static clearLoadedScripts() {
+        this.loadedScripts.clear();
+    }
+}
+ScriptLoader.loadedScripts = new Set();
+/**
+ * Stylesheet Loader
+ * 动态加载 CSS 样式表
+ */
+class StylesheetLoader {
+    /**
+     * 加载支付组件样式表
+     * @param url CSS 文件 URL
+     * @returns Promise<void>
+     */
+    static async loadPaymentStylesheet(url) {
+        console.log('[StylesheetLoader] Loading stylesheet:', url);
+        // 检查是否已加载
+        if (this.loadedStylesheets.has(url)) {
+            console.log('[StylesheetLoader] Stylesheet already loaded (cached)');
+            return;
+        }
+        // 检查 DOM 中是否已存在
+        const existingLink = document.querySelector(`link[href="${url}"]`);
+        if (existingLink) {
+            console.log('[StylesheetLoader] Stylesheet already exists in DOM');
+            this.loadedStylesheets.add(url);
+            return;
+        }
+        // 创建并注入 link 标签
+        return new Promise((resolve, reject) => {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = url;
+            link.onload = () => {
+                console.log('[StylesheetLoader] Stylesheet loaded successfully:', url);
+                this.loadedStylesheets.add(url);
+                resolve();
+            };
+            link.onerror = () => {
+                const error = new Error(`Failed to load stylesheet: ${url}`);
+                console.error('[StylesheetLoader] Load failed:', error);
+                reject(error);
+            };
+            document.head.appendChild(link);
+            console.log('[StylesheetLoader] Link tag appended to head');
+        });
+    }
+    /**
+     * 清除缓存（用于测试）
+     */
+    static clearCache() {
+        this.loadedStylesheets.clear();
+        console.log('[StylesheetLoader] Cache cleared');
+    }
+}
+/**
+ * 已加载的样式表 URL 缓存
+ */
+StylesheetLoader.loadedStylesheets = new Set();
+
+/**
+ * Order API
+ * 订单管理 - 查询和轮询订单状态
+ */
+/**
+ * 查询订单状态
+ * @param transactionId SDK checkout 返回的 transaction_id
+ * @param apiHost Payment API 地址
+ * @param authToken 认证 Token
+ * @returns 订单状态
+ */
+async function checkOrderStatus(transactionId, apiHost, authToken) {
+    if (!authToken) {
+        throw new Error('Authentication token is required');
+    }
+    const response = await fetch(`${apiHost}/api/v1/payment/sdk/order/status`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${authToken}`,
+        },
+        body: JSON.stringify({
+            transaction_id: transactionId,
+        }),
+    });
+    if (!response.ok) {
+        throw new Error(`Failed to check order status: ${response.status} ${response.statusText}`);
+    }
+    const result = await response.json();
+    if (result.code !== 0 || !result.data) {
+        throw new Error(result.msg || 'Failed to check order status');
+    }
+    return result.data.status;
+}
+/**
+ * 轮询订单状态直到支付完成或超时
+ * @param transactionId SDK checkout 返回的 transaction_id
+ * @param apiHost Payment API 地址
+ * @param authToken 认证 Token
+ * @param options 轮询配置
+ * @returns 最终订单状态
+ */
+async function pollOrderStatus(transactionId, apiHost, authToken, options = {}) {
+    const { interval = 2000, maxAttempts = 30, onPoll } = options;
+    let attempt = 0;
+    console.log('[OrderAPI] Starting poll:', {
+        transactionId,
+        interval: `${interval}ms`,
+        maxAttempts,
+    });
+    while (attempt < maxAttempts) {
+        attempt++;
+        try {
+            const status = await checkOrderStatus(transactionId, apiHost, authToken);
+            console.log(`[OrderAPI] Poll attempt ${attempt}/${maxAttempts}, status: ${status}`);
+            // 回调
+            if (onPoll) {
+                onPoll(status, attempt);
+            }
+            // 终止条件：支付成功、失败、过期、退款
+            if (status === 'paid' || status === 'failed' || status === 'expired' || status === 'refunded') {
+                console.log(`[OrderAPI] Final status reached: ${status}`);
+                return status;
+            }
+            // 如果还在 pending 状态，等待后继续轮询
+            if (status === 'pending') {
+                await new Promise((resolve) => setTimeout(resolve, interval));
+                continue;
+            }
+            // 未知状态，停止轮询
+            console.warn(`[OrderAPI] Unknown order status: ${status}`);
+            return status;
+        }
+        catch (error) {
+            console.error(`[OrderAPI] Poll attempt ${attempt} failed:`, error);
+            // 如果还有剩余次数，继续轮询
+            if (attempt < maxAttempts) {
+                await new Promise((resolve) => setTimeout(resolve, interval));
+                continue;
+            }
+            // 超过最大次数，抛出错误
+            throw error;
+        }
+    }
+    // 超时，返回 pending 状态
+    console.warn(`[OrderAPI] Polling timeout after ${maxAttempts} attempts`);
+    return 'pending';
+}
+
+/**
+ * PaymentModal - 原生 JavaScript 支付弹框组件
+ * 提供类似 next-meta 的 BaseModal 体验，但使用纯 JavaScript 实现
+ * 支持 Dropin 支付模式的嵌入式展示
+ */
+class PaymentModal {
+    constructor(options = {}) {
+        this.overlay = null;
+        this.modal = null;
+        this.contentContainer = null;
+        this.isOpen = false;
+        this.isExiting = false;
+        this.escHandler = null;
+        this.savedScrollY = 0;
+        this.savedScrollbarWidth = 0;
+        this.options = {
+            title: options.title ?? '',
+            showCloseButton: options.showCloseButton ?? true,
+            closeOnOverlayClick: options.closeOnOverlayClick ?? true,
+            closeOnEsc: options.closeOnEsc ?? true,
+            onClose: options.onClose ?? (() => { }),
+            className: options.className ?? '',
+            maxWidth: options.maxWidth ?? '480px',
+        };
+    }
+    /**
+     * 打开弹框
+     */
+    open() {
+        if (this.isOpen)
+            return;
+        this.isOpen = true;
+        this.isExiting = false;
+        // 保存滚动位置并阻止 body 滚动
+        this.lockBodyScroll();
+        // 创建弹框元素
+        this.createModal();
+        // 添加到 DOM
+        document.body.appendChild(this.overlay);
+        // 触发动画
+        requestAnimationFrame(() => {
+            this.overlay?.classList.add('payment-modal-fade-in');
+            this.modal?.classList.add('payment-modal-slide-in');
+        });
+        // 绑定 ESC 键
+        if (this.options.closeOnEsc) {
+            this.escHandler = (e) => {
+                if (e.key === 'Escape') {
+                    this.close();
+                }
+            };
+            document.addEventListener('keydown', this.escHandler);
+        }
+    }
+    /**
+     * 关闭弹框
+     */
+    close() {
+        if (!this.isOpen || this.isExiting)
+            return;
+        this.isExiting = true;
+        // 触发退出动画
+        this.overlay?.classList.remove('payment-modal-fade-in');
+        this.overlay?.classList.add('payment-modal-fade-out');
+        this.modal?.classList.remove('payment-modal-slide-in');
+        this.modal?.classList.add('payment-modal-slide-out');
+        // 等待动画完成后移除
+        setTimeout(() => {
+            this.destroy();
+            this.isOpen = false;
+            this.isExiting = false;
+            this.options.onClose();
+        }, 200);
+    }
+    /**
+     * 设置弹框内容
+     */
+    setContent(content) {
+        if (!this.contentContainer)
+            return;
+        if (typeof content === 'string') {
+            this.contentContainer.innerHTML = content;
+        }
+        else {
+            this.contentContainer.innerHTML = '';
+            this.contentContainer.appendChild(content);
+        }
+    }
+    /**
+     * 获取内容容器
+     */
+    getContentContainer() {
+        return this.contentContainer;
+    }
+    /**
+     * 销毁弹框
+     */
+    destroy() {
+        // 解绑事件
+        if (this.escHandler) {
+            document.removeEventListener('keydown', this.escHandler);
+            this.escHandler = null;
+        }
+        // 恢复 body 滚动
+        this.unlockBodyScroll();
+        // 移除 DOM
+        if (this.overlay && this.overlay.parentNode) {
+            this.overlay.parentNode.removeChild(this.overlay);
+        }
+        this.overlay = null;
+        this.modal = null;
+        this.contentContainer = null;
+    }
+    /**
+     * 创建弹框元素
+     */
+    createModal() {
+        // 创建遮罩层
+        this.overlay = document.createElement('div');
+        this.overlay.className = 'payment-modal-overlay';
+        this.overlay.style.cssText = `
+      position: fixed;
+      inset: 0;
+      z-index: 9999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+      background: rgba(0, 0, 0, 0.7);
+      backdrop-filter: blur(8px);
+      opacity: 0;
+    `;
+        // 点击遮罩层关闭
+        if (this.options.closeOnOverlayClick) {
+            this.overlay.addEventListener('click', (e) => {
+                if (e.target === this.overlay) {
+                    this.close();
+                }
+            });
+        }
+        // 创建弹框主体
+        this.modal = document.createElement('div');
+        this.modal.className = `payment-modal ${this.options.className}`;
+        this.modal.style.cssText = `
+      position: relative;
+      max-height: 90vh;
+      width: 100%;
+      max-width: ${this.options.maxWidth};
+      overflow-y: auto;
+      border-radius: 16px;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      background: #ffffff;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      transform: translateY(20px);
+      opacity: 0;
+    `;
+        // 自定义滚动条样式
+        this.modal.style.cssText += `
+      scrollbar-width: thin;
+      scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+    `;
+        // 关闭按钮
+        if (this.options.showCloseButton) {
+            const closeButton = document.createElement('button');
+            closeButton.className = 'payment-modal-close';
+            closeButton.innerHTML = `
+        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      `;
+            closeButton.style.cssText = `
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border: none;
+        border-radius: 8px;
+        background: rgba(0, 0, 0, 0.05);
+        color: rgba(0, 0, 0, 0.6);
+        cursor: pointer;
+        transition: all 0.2s;
+      `;
+            closeButton.addEventListener('mouseenter', () => {
+                closeButton.style.background = 'rgba(0, 0, 0, 0.1)';
+                closeButton.style.color = 'rgba(0, 0, 0, 0.9)';
+            });
+            closeButton.addEventListener('mouseleave', () => {
+                closeButton.style.background = 'rgba(0, 0, 0, 0.05)';
+                closeButton.style.color = 'rgba(0, 0, 0, 0.6)';
+            });
+            closeButton.addEventListener('click', () => this.close());
+            this.modal.appendChild(closeButton);
+        }
+        // 标题（如果有）
+        if (this.options.title) {
+            const title = document.createElement('h2');
+            title.className = 'payment-modal-title';
+            title.textContent = this.options.title;
+            title.style.cssText = `
+        margin: 0 0 24px 0;
+        padding: 40px 32px 0 32px;
+        font-size: 24px;
+        font-weight: 600;
+        color: #1a1a1a;
+        text-align: center;
+      `;
+            this.modal.appendChild(title);
+        }
+        // 内容容器
+        this.contentContainer = document.createElement('div');
+        this.contentContainer.className = 'payment-modal-content';
+        this.contentContainer.style.cssText = `
+      padding: ${this.options.title ? '0 32px 32px 32px' : '40px 32px 32px 32px'};
+    `;
+        this.modal.appendChild(this.contentContainer);
+        this.overlay.appendChild(this.modal);
+        // 添加样式到 head（如果还没有）
+        this.injectStyles();
+    }
+    /**
+     * 注入动画样式
+     */
+    injectStyles() {
+        if (document.getElementById('payment-modal-styles'))
+            return;
+        const style = document.createElement('style');
+        style.id = 'payment-modal-styles';
+        style.textContent = `
+      @keyframes payment-modal-fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      @keyframes payment-modal-fade-out {
+        from { opacity: 1; }
+        to { opacity: 0; }
+      }
+      @keyframes payment-modal-slide-in {
+        from {
+          transform: translateY(20px);
+          opacity: 0;
+        }
+        to {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+      @keyframes payment-modal-slide-out {
+        from {
+          transform: translateY(0);
+          opacity: 1;
+        }
+        to {
+          transform: translateY(20px);
+          opacity: 0;
+        }
+      }
+      .payment-modal-fade-in {
+        animation: payment-modal-fade-in 0.2s ease-out forwards;
+      }
+      .payment-modal-fade-out {
+        animation: payment-modal-fade-out 0.2s ease-out forwards;
+      }
+      .payment-modal-slide-in {
+        animation: payment-modal-slide-in 0.3s ease-out forwards;
+      }
+      .payment-modal-slide-out {
+        animation: payment-modal-slide-out 0.2s ease-out forwards;
+      }
+
+      /* Webkit 滚动条样式 */
+      .payment-modal::-webkit-scrollbar {
+        width: 6px;
+      }
+      .payment-modal::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      .payment-modal::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 3px;
+      }
+      .payment-modal::-webkit-scrollbar-thumb:hover {
+        background: rgba(0, 0, 0, 0.3);
+      }
+    `;
+        document.head.appendChild(style);
+    }
+    /**
+     * 锁定 body 滚动
+     */
+    lockBodyScroll() {
+        this.savedScrollY = window.scrollY;
+        this.savedScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        document.body.style.position = 'fixed';
+        document.body.style.top = `-${this.savedScrollY}px`;
+        document.body.style.left = '0';
+        document.body.style.right = '0';
+        document.body.style.overflow = 'hidden';
+        // 补偿滚动条宽度，防止页面跳动
+        if (this.savedScrollbarWidth > 0) {
+            document.body.style.paddingRight = `${this.savedScrollbarWidth}px`;
+        }
+    }
+    /**
+     * 解锁 body 滚动
+     */
+    unlockBodyScroll() {
+        document.body.style.position = '';
+        document.body.style.top = '';
+        document.body.style.left = '';
+        document.body.style.right = '';
+        document.body.style.overflow = '';
+        document.body.style.paddingRight = '';
+        // 恢复滚动位置
+        window.scrollTo(0, this.savedScrollY);
+    }
+    /**
+     * 检查弹框是否打开
+     */
+    isModalOpen() {
+        return this.isOpen;
+    }
+}
+
+/**
+ * DropinPaymentModal - Dropin 支付弹框
+ * 封装 DropinPaymentComponent 并在弹框中展示
+ */
+class DropinPaymentModal {
+    constructor(paymentInstance, orderId, accountToken, paymentMethod, options) {
+        this.paymentInstance = paymentInstance;
+        this.orderId = orderId;
+        this.accountToken = accountToken;
+        this.paymentMethod = paymentMethod;
+        this.options = options;
+        this.dropinPayment = null;
+        this.containerElement = null;
+        // 创建弹框
+        this.modal = new PaymentModal({
+            title: options.modalTitle ?? `Pay with ${paymentMethod.payment_method_name}`,
+            showCloseButton: true,
+            closeOnOverlayClick: false, // Dropin 支付中不允许点击遮罩关闭
+            closeOnEsc: true,
+            maxWidth: '600px',
+            onClose: () => {
+                this.cleanup();
+            },
+            ...options.modalOptions,
+        });
+        console.log('[DropinPaymentModal] Created:', {
+            orderId: this.orderId,
+            paymentMethod: this.paymentMethod.payment_method_name,
+        });
+    }
+    /**
+     * 打开弹框并渲染支付组件
+     */
+    async open() {
+        console.log('[DropinPaymentModal] Opening modal...');
+        // 打开弹框
+        this.modal.open();
+        // 创建容器元素
+        this.containerElement = document.createElement('div');
+        this.containerElement.id = 'dropin-payment-container';
+        this.containerElement.style.cssText = `
+      min-height: 500px;
+      width: 100%;
+    `;
+        // 设置弹框内容 - 必须先添加到 DOM，再创建 Dropin 组件
+        const contentContainer = this.modal.getContentContainer();
+        if (!contentContainer) {
+            throw new Error('Modal content container not found');
+        }
+        contentContainer.appendChild(this.containerElement);
+        // 验证订单信息（关键：确保后端订单已创建）
+        try {
+            console.log('[DropinPaymentModal] Validating order info...');
+            const response = await this.paymentInstance.getOrderInfo();
+            if (response.err || !response.data?.order_info) {
+                throw new Error(response.message || 'Order information not found');
+            }
+            const orderInfo = response.data.order_info;
+            if (!orderInfo.sys_order_id) {
+                throw new Error('Order ID (sys_order_id) is missing');
+            }
+            console.log('[DropinPaymentModal] Order validated:', {
+                orderInfo,
+                orderId: orderInfo.sys_order_id,
+                status: orderInfo.order_status,
+            });
+        }
+        catch (error) {
+            console.error('[DropinPaymentModal] Order validation failed:', error);
+            this.close();
+            throw new Error(`Order validation failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+        // 创建并渲染 Dropin 支付组件
+        try {
+            this.dropinPayment = new DropinPaymentComponent({
+                paymentInstance: this.paymentInstance,
+                orderId: this.orderId,
+                accountToken: this.accountToken,
+                paymentMethod: this.paymentMethod,
+                containerId: '#dropin-payment-container',
+                onSubmit: (payload) => {
+                    console.log('[DropinPaymentModal] onSubmit:', payload);
+                    this.options.onSubmit?.(payload);
+                },
+                onError: (payload, error) => {
+                    console.error('[DropinPaymentModal] onError:', error);
+                    this.options.onError?.(payload, error);
+                },
+                onCreateOrder: (payload) => {
+                    console.log('[DropinPaymentModal] onCreateOrder:', payload);
+                    this.options.onCreateOrder?.(payload);
+                },
+                onCompleted: (payload) => {
+                    console.log('[DropinPaymentModal] onCompleted:', payload);
+                    this.options.onCompleted?.(payload);
+                    // 支付成功后自动关闭弹框（可选）
+                    setTimeout(() => this.close(), 2000);
+                },
+                onFailed: (payload) => {
+                    console.error('[DropinPaymentModal] onFailed:', payload);
+                    this.options.onFailed?.(payload);
+                },
+                onLoading: (loading) => {
+                    this.options.onLoading?.(loading);
+                    // 可以在这里显示加载状态
+                    if (loading) {
+                        this.showLoading();
+                    }
+                    else {
+                        this.hideLoading();
+                    }
+                },
+            });
+            await this.dropinPayment.render();
+            console.log('[DropinPaymentModal] Dropin component rendered');
+        }
+        catch (error) {
+            console.error('[DropinPaymentModal] Failed to render dropin:', error);
+            this.close();
+            throw error;
+        }
+    }
+    /**
+     * 关闭弹框
+     */
+    close() {
+        console.log('[DropinPaymentModal] Closing modal...');
+        this.modal.close();
+    }
+    /**
+     * 清理资源
+     */
+    cleanup() {
+        console.log('[DropinPaymentModal] Cleaning up...');
+        if (this.dropinPayment) {
+            this.dropinPayment.destroy();
+            this.dropinPayment = null;
+        }
+        this.containerElement = null;
+    }
+    /**
+     * 显示加载状态
+     */
+    showLoading() {
+        if (!this.containerElement)
+            return;
+        const loadingEl = document.getElementById('dropin-loading');
+        if (loadingEl)
+            return; // 已经存在
+        const loading = document.createElement('div');
+        loading.id = 'dropin-loading';
+        loading.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(2px);
+      z-index: 10;
+    `;
+        loading.innerHTML = `
+      <div style="
+        width: 40px;
+        height: 40px;
+        border: 3px solid rgba(255, 255, 255, 0.2);
+        border-top-color: #ffffff;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+      "></div>
+    `;
+        // 添加旋转动画
+        if (!document.getElementById('dropin-loading-styles')) {
+            const style = document.createElement('style');
+            style.id = 'dropin-loading-styles';
+            style.textContent = `
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `;
+            document.head.appendChild(style);
+        }
+        this.containerElement.style.position = 'relative';
+        this.containerElement.appendChild(loading);
+    }
+    /**
+     * 隐藏加载状态
+     */
+    hideLoading() {
+        const loadingEl = document.getElementById('dropin-loading');
+        if (loadingEl && loadingEl.parentNode) {
+            loadingEl.parentNode.removeChild(loadingEl);
+        }
+    }
+    /**
+     * 检查弹框是否打开
+     */
+    isOpen() {
+        return this.modal.isModalOpen();
+    }
+}
+
+/**
+ * SeaartPaymentSDK
+ * 基于 SeaartPaymentComponent 的支付 SDK 封装
+ *
+ * 核心职责：
+ * 1. 动态加载 SeaartPaymentComponent 脚本
+ * 2. 全局初始化（仅一次）
+ * 3. 获取支付方式列表
+ * 4. 创建订单支付实例
+ */
+class SeaartPaymentSDK {
+    /**
+     * 私有构造函数（单例模式）
+     */
+    constructor() {
+        this.initialized = false;
+        this.config = null;
+    }
+    /**
+     * 获取 SDK 单例
+     */
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new SeaartPaymentSDK();
+        }
+        return this.instance;
+    }
+    /**
+     * 全局初始化（应用启动时调用一次）
+     */
+    async init(config) {
+        if (this.initialized) {
+            console.warn('[SeaartPaymentSDK] Already initialized');
+            return;
+        }
+        console.log('[SeaartPaymentSDK] Initializing...', {
+            scriptUrl: config.scriptUrl,
+            clientId: config.clientId,
+            language: config.language,
+            cssUrl: config.cssUrl,
+        });
+        try {
+            // 1. 并行加载 CSS 和 JavaScript
+            const loadTasks = [
+                ScriptLoader.loadSeaartPaymentComponent({
+                    scriptUrl: config.scriptUrl,
+                    timeout: config.scriptTimeout || 10000,
+                }),
+            ];
+            // 2. 如果提供了 CSS URL，则加载样式表
+            if (config.cssUrl) {
+                loadTasks.push(StylesheetLoader.loadPaymentStylesheet(config.cssUrl));
+            }
+            // 3. 等待所有资源加载完成
+            await Promise.all(loadTasks);
+            // 4. 初始化 SDK
+            await window.SeaartPaymentComponent.init({
+                client_id: config.clientId,
+                language: config.language || 'zhCN',
+            });
+            // 5. 保存配置并标记已初始化
+            this.config = config;
+            this.initialized = true;
+            console.log('[SeaartPaymentSDK] Initialized successfully');
+        }
+        catch (error) {
+            this.initialized = false;
+            this.config = null;
+            console.error('[SeaartPaymentSDK] Initialization failed:', error);
+            throw ErrorHandler.normalize(error);
+        }
+    }
+    /**
+     * 获取支付方式列表
+     */
+    async getPaymentMethods(params) {
+        this.ensureInitialized();
+        console.log('[SeaartPaymentSDK] Getting payment methods...', params);
+        try {
+            const result = await window.SeaartPaymentComponent.getPaymentMethodList({
+                country_code: params.country_code,
+                business_type: params.business_type,
+            });
+            if (result.err) {
+                throw new Error(result.message || 'Failed to get payment methods');
+            }
+            const methods = result.data?.payment_method_list || [];
+            console.log('[SeaartPaymentSDK] Payment methods retrieved:', {
+                count: methods.length,
+                methods: methods.map((m) => ({
+                    name: m.payment_method_name,
+                    type: m.payment_type === 1 ? 'Link' : 'Dropin',
+                })),
+            });
+            return methods;
+        }
+        catch (error) {
+            console.error('[SeaartPaymentSDK] Get payment methods failed:', error);
+            throw ErrorHandler.normalize(error);
+        }
+    }
+    /**
+     * 创建订单支付实例
+     */
+    createOrderPayment(params) {
+        this.ensureInitialized();
+        console.log('[SeaartPaymentSDK] Creating order payment instance:', {
+            orderId: params.orderId,
+            hasAccountToken: !!params.accountToken,
+        });
+        // 创建支付实例（基于 SDK 的 createPayment）
+        const paymentInstance = window.SeaartPaymentComponent.createPayment({
+            sys_order_id: params.orderId,
+            account_token: params.accountToken,
+        });
+        return new OrderPayment({
+            paymentInstance,
+            orderId: params.orderId,
+            accountToken: params.accountToken,
+        });
+    }
+    /**
+     * 创建 Dropin 支付弹框（快捷方法）
+     * 在弹框中直接展示 Dropin 支付组件
+     */
+    createDropinPaymentModal(params) {
+        this.ensureInitialized();
+        console.log('[SeaartPaymentSDK] Creating dropin payment modal:', {
+            orderId: params.orderId,
+            paymentMethod: params.paymentMethod.payment_method_name,
+        });
+        // 创建支付实例
+        const paymentInstance = window.SeaartPaymentComponent.createPayment({
+            sys_order_id: params.orderId,
+            account_token: params.accountToken,
+        });
+        // 创建弹框
+        return new DropinPaymentModal(paymentInstance, params.orderId, params.accountToken, params.paymentMethod, params);
+    }
+    /**
+     * 处理支付回调（在回调页面调用）
+     * @param params 回调参数
+     * @param apiHost Payment API 地址
+     * @param authToken 认证 Token
+     */
+    async handleCallback(params, apiHost, authToken) {
+        console.log('[SeaartPaymentSDK] Handling payment callback...', params);
+        try {
+            // 1. 从 localStorage 获取 transactionId
+            const transaction = PaymentStorage.getTransaction();
+            if (!transaction) {
+                throw new Error('No transaction found in storage');
+            }
+            // 2. 轮询订单状态
+            const finalStatus = await pollOrderStatus(transaction.transactionId, apiHost, authToken, {
+                interval: 1000,
+                maxAttempts: 30,
+            });
+            // 3. 清除存储
+            PaymentStorage.clearTransaction();
+            // 4. 返回结果
+            if (finalStatus === 'paid') {
+                console.log('[SeaartPaymentSDK] Payment callback succeeded');
+                return {
+                    success: true,
+                    status: 'paid',
+                    data: {
+                        orderId: transaction.orderId,
+                        transactionId: transaction.transactionId,
+                    },
+                };
+            }
+            else {
+                console.warn('[SeaartPaymentSDK] Payment callback failed:', finalStatus);
+                return {
+                    success: false,
+                    status: finalStatus,
+                };
+            }
+        }
+        catch (error) {
+            console.error('[SeaartPaymentSDK] Handle callback failed:', error);
+            PaymentStorage.clearTransaction();
+            throw ErrorHandler.normalize(error);
+        }
+    }
+    /**
+     * 确保 SDK 已初始化
+     */
+    ensureInitialized() {
+        if (!this.initialized) {
+            throw new Error('[SeaartPaymentSDK] Not initialized. Call init() first.');
+        }
+    }
+    /**
+     * 获取当前配置（用于组件访问）
+     */
+    getConfig() {
+        return this.config;
+    }
+    /**
+     * 销毁 SDK（测试用）
+     */
+    destroy() {
+        this.config = null;
+        this.initialized = false;
+        console.log('[SeaartPaymentSDK] Destroyed');
+    }
+}
+SeaartPaymentSDK.instance = null;
+
+/**
+ * 积分套餐数据
+ */
+const CREDIT_PACKAGES = [
+    {
+        id: 'pkg_starter',
+        name: 'Starter Pack',
+        price: '9.99',
+        currency: 'USD',
+        base_credits: '1000',
+        bonus_credits: '0',
+        credits: '1000',
+        day_limit: 1,
+        is_popular: true, // Daily Limit 标签
+    },
+    {
+        id: 'pkg_value',
+        name: 'Value Pack',
+        price: '19.99',
+        currency: 'USD',
+        base_credits: '1000',
+        bonus_credits: '200',
+        credits: '1200',
+        day_limit: 0,
+    },
+    {
+        id: 'pkg_pro',
+        name: 'Pro Pack',
+        price: '49.99',
+        currency: 'USD',
+        base_credits: '2500',
+        bonus_credits: '800',
+        credits: '3300',
+        day_limit: 0,
+    },
+    {
+        id: 'pkg_ultra',
+        name: 'Ultra Pack',
+        price: '99.99',
+        currency: 'USD',
+        base_credits: '5000',
+        bonus_credits: '2000',
+        credits: '7000',
+        day_limit: 0,
+    },
+];
+const CREATIVE_POWER_TYPES = [
+    {
+        icon: '🎬',
+        name: 'Video',
+        name_cn: '电影片段',
+        credits_range: '100-300',
+        description: '10-30s AI Movie Clips',
+        description_cn: '10-30 秒的 AI 电影片段',
+    },
+    {
+        icon: '🎮',
+        name: 'Game',
+        name_cn: '游戏场景',
+        credits_range: '50-200',
+        description: 'Interactive Game Scenes',
+        description_cn: '交互式游戏场景机制',
+    },
+    {
+        icon: '🎵',
+        name: 'Music',
+        name_cn: '音乐',
+        credits_range: '30-100',
+        description: '1-3 Min AI Music',
+        description_cn: '1-3 分钟 AI 生成的音乐',
+    },
+    {
+        icon: '🌍',
+        name: '3D World',
+        name_cn: '3D 世界',
+        credits_range: '150-500',
+        description: 'Immersive 3D Environment',
+        description_cn: '沉浸式 3D 环境和体验',
+    },
+    {
+        icon: '💬',
+        name: 'AI Chat',
+        name_cn: '智能对话',
+        credits_range: '10',
+        description: 'AI Smart Conversation',
+        description_cn: 'AI 智能对话协助',
+    },
+];
+
+/**
+ * Subscription API
+ * 订阅管理 - 查询、变更、重启订阅
+ */
+/**
+ * 获取当前订阅状态（用于升降级判断）
+ */
+async function getCurrentSubscription(apiHost, authToken, signal) {
+    if (!authToken) {
+        return null;
+    }
+    try {
+        const response = await fetch(`${apiHost}/api/v1/payment/sdk/subscription/current`, {
+            method: 'POST',
+            headers: {
+                Authorization: `Bearer ${authToken}`,
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({}),
+            signal,
+        });
+        // 检查 HTTP 状态码
+        if (!response.ok) {
+            console.error(`Failed to get current subscription: HTTP ${response.status}`);
+            return null;
+        }
+        const result = await response.json();
+        if (result.code === 0) {
+            return result.data;
+        }
+        // code !== 0 视为无订阅
+        return null;
+    }
+    catch (error) {
+        console.error('Failed to get current subscription:', error);
+        return null;
+    }
+}
+/**
+  * 创建订单
+  * @param apiHost 接口域名
+  * @param authToken 认证令牌
+  * @param params 创建订单参数
+  * @param product_id 产品ID
+  * @param purchase_type 购买类型（1=一次性, 2=订阅）
+  * @returns 创建订单响应
+  */
+async function createOrder(apiHost, authToken, params) {
+    if (!authToken) {
+        return null;
+    }
+    try {
+        // 确保 purchase_type 是 number 类型
+        const requestBody = {
+            product_id: params.product_id,
+            purchase_type: typeof params.purchase_type === 'string'
+                ? parseInt(params.purchase_type, 10)
+                : params.purchase_type,
+        };
+        const response = await fetch(`${apiHost}/api/v1/payment/sdk/checkout`, {
+            method: 'POST',
+            headers: {
+                Authorization: `Bearer ${authToken}`,
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(requestBody),
+        });
+        // 检查 HTTP 状态码
+        if (!response.ok) {
+            console.error(`Failed to get active subscription: HTTP ${response.status}`);
+            return null;
+        }
+        const result = await response.json();
+        if (result.code === 0) {
+            return result.data;
+        }
+    }
+    catch (error) {
+        console.error('Failed to get active subscription:', error);
+        throw error;
+    }
+}
+/**
+ * 获取活跃订阅详情
+ */
+async function getActiveSubscription(apiHost, authToken) {
+    if (!authToken) {
+        return null;
+    }
+    try {
+        const response = await fetch(`${apiHost}/api/v1/payment/sdk/subscription/active`, {
+            method: 'GET',
+            headers: {
+                Authorization: `Bearer ${authToken}`,
+            },
+        });
+        // 检查 HTTP 状态码
+        if (!response.ok) {
+            console.error(`Failed to get active subscription: HTTP ${response.status}`);
+            return null;
+        }
+        const result = await response.json();
+        if (result.code === 0) {
+            return result.data;
+        }
+        return null;
+    }
+    catch (error) {
+        console.error('Failed to get active subscription:', error);
+        return null;
+    }
+}
+/**
+ * 升降级订阅
+ */
+async function changeSubscription(apiHost, authToken, params) {
+    if (!authToken) {
+        throw new Error('Authentication token not found');
+    }
+    const response = await fetch(`${apiHost}/api/v1/payment/sdk/subscription/change`, {
+        method: 'POST',
+        headers: {
+            Authorization: `Bearer ${authToken}`,
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            product_id: params.productId,
+            billing_period: params.billingPeriod,
+            redirect_url: params.redirectUrl,
+        }),
+    });
+    const result = await response.json();
+    if (result.code !== 0) {
+        throw {
+            code: result.code,
+            bizCode: result.code,
+            message: result.msg || 'Change subscription failed',
+        };
+    }
+    return result.data;
+}
+/**
+ * 重新启动订阅
+ * 用于已取消但仍在有效期内的订阅，重新恢复自动续费
+ */
+async function restartSubscription(apiHost, authToken, params) {
+    if (!authToken) {
+        throw new Error('Authentication token not found');
+    }
+    const response = await fetch(`${apiHost}/api/v1/payment/sdk/subscription/restart`, {
+        method: 'POST',
+        headers: {
+            Authorization: `Bearer ${authToken}`,
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            subscription_id: params.subscriptionId,
+        }),
+    });
+    // 检查 HTTP 状态码
+    if (!response.ok) {
+        console.error(`Failed to restart subscription: HTTP ${response.status}`);
+        throw new Error(`HTTP ${response.status}: Failed to restart subscription`);
+    }
+    const result = await response.json();
+    if (result.code !== 0) {
+        throw {
+            code: result.code,
+            bizCode: result.code,
+            message: result.msg || 'Restart subscription failed',
+        };
+    }
+    return result.data;
+}
+/**
+ * 获取积分详情
+ * @param apiHost 接口域名（如 https://wallet.sg.seaverse.dev）
+ * @param authToken 认证令牌
+ * @returns 积分详情
+ */
+async function getCreditDetail(apiHost, authToken) {
+    if (!authToken) {
+        console.warn('[getCreditDetail] Auth token not provided');
+        return null;
+    }
+    try {
+        const response = await fetch(`${apiHost}/sdk/v1/credits/detail`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${authToken}`,
+                'X-App-Id': 'seaverse',
+            },
+        });
+        if (!response.ok) {
+            console.error(`[getCreditDetail] HTTP error! status: ${response.status}`);
+            return null;
+        }
+        const result = await response.json();
+        if (result.code === 0 && result.data) {
+            return result.data;
+        }
+        else {
+            console.error('[getCreditDetail] API error:', result.message || 'Unknown error');
+            return null;
+        }
+    }
+    catch (error) {
+        console.error('[getCreditDetail] Failed to fetch credit detail:', error);
+        return null;
+    }
+}
+
+/**
+ * 共享配置文件
+ * Shared configuration for CreditPackageModal and GenericPackageModal
+ */
+/**
+ * 环境配置映射表
+ * SDK 根据 environment 参数自动选择对应的配置
+ */
+const ENVIRONMENT_CONFIGS = {
+    development: {
+        scriptUrl: 'https://seaart-publish.sc-api-release.saconsole.com/payment-component/client.js',
+        clientId: 'XF49NOfyZ54O16GujB0ptio2',
+        orderApiUrl: 'https://payment.sg.seaverse.dev',
+        walletApiUrl: 'https://wallet.sg.seaverse.dev',
+        cssUrl: 'https://seaart-publish.sc-api-release.saconsole.com/payment-component/public/style.css',
+    },
+    production: {
+        scriptUrl: 'https://payment-static.seaverse.com/sdk/seaart-payment-component.js',
+        clientId: 'prod_client_id',
+        orderApiUrl: 'https://payment.seaverse.com',
+        walletApiUrl: 'https://wallet.seaverse.com',
+        cssUrl: 'https://payment-static.seaverse.com/sdk/seaart-payment-component.css',
+    },
+};
+/**
+ * 响应式断点配置
+ * Responsive breakpoints for grid layout
+ */
+const RESPONSIVE_BREAKPOINTS = {
+    mobile: 768,
+    tablet: 1200,
+    laptop: 1400,
+    desktop: Infinity,
+};
+/**
+ * 网格列数配置
+ * Grid columns for different screen sizes
+ */
+const GRID_COLUMNS = {
+    mobile: 1,
+    tablet: 2,
+    laptop: 2,
+    desktop: 4,
+};
+/**
+ * SDK 初始化配置
+ */
+const SDK_CONFIG = {
+    /** 默认脚本加载超时 (毫秒) */
+    DEFAULT_SCRIPT_TIMEOUT: 10000,
+    /** 默认 SDK 初始化超时 (毫秒) */
+    DEFAULT_INIT_TIMEOUT: 30000,
+    /** 默认最大重试次数 */
+    DEFAULT_MAX_RETRIES: 1,
+    /** 默认业务类型 (1=一次性购买, 2=订阅) */
+    DEFAULT_BUSINESS_TYPE: 1,
+};
+
+/**
+ * UI 反馈工具类
+ * 提供统一的用户界面反馈（错误提示、加载状态等）
+ */
+/**
+ * 显示错误消息
+ * 替代浏览器原生 alert()，提供更好的用户体验
+ *
+ * @param message 错误消息
+ * @param duration 显示时长（毫秒），默认 3000ms
+ */
+function showErrorMessage(message, duration = 3000) {
+    // 检查是否已存在错误提示，避免重复创建
+    const existingError = document.getElementById('payment-sdk-error-toast');
+    if (existingError) {
+        existingError.remove();
+    }
+    const errorDiv = document.createElement('div');
+    errorDiv.id = 'payment-sdk-error-toast';
+    errorDiv.style.cssText = `
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: linear-gradient(135deg, rgba(255, 59, 48, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%);
+    color: white;
+    padding: 16px 24px;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(255, 59, 48, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
+    z-index: 10001;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    max-width: 400px;
+    animation: slideInFromRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  `;
+    // 添加图标和消息
+    errorDiv.innerHTML = `
+    <div style="display: flex; align-items: start; gap: 12px;">
+      <svg style="flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+        <path d="M12 8V12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        <circle cx="12" cy="16" r="1" fill="currentColor"/>
+      </svg>
+      <div style="flex: 1; word-break: break-word;">${escapeHtml$1(message)}</div>
+    </div>
+  `;
+    // 添加 CSS 动画
+    const style = document.createElement('style');
+    style.textContent = `
+    @keyframes slideInFromRight {
+      from {
+        transform: translateX(400px);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+    @keyframes slideOutToRight {
+      from {
+        transform: translateX(0);
+        opacity: 1;
+      }
+      to {
+        transform: translateX(400px);
+        opacity: 0;
+      }
+    }
+  `;
+    document.head.appendChild(style);
+    document.body.appendChild(errorDiv);
+    // 自动移除
+    setTimeout(() => {
+        errorDiv.style.animation = 'slideOutToRight 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
+        setTimeout(() => {
+            errorDiv.remove();
+            style.remove();
+        }, 300);
+    }, duration);
+}
+/**
+ * 显示成功消息
+ *
+ * @param message 成功消息
+ * @param duration 显示时长（毫秒），默认 3000ms
+ */
+function showSuccessMessage(message, duration = 3000) {
+    // 检查是否已存在成功提示
+    const existingSuccess = document.getElementById('payment-sdk-success-toast');
+    if (existingSuccess) {
+        existingSuccess.remove();
+    }
+    const successDiv = document.createElement('div');
+    successDiv.id = 'payment-sdk-success-toast';
+    successDiv.style.cssText = `
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: linear-gradient(135deg, rgba(0, 255, 136, 0.95) 0%, rgba(34, 206, 156, 0.95) 100%);
+    color: #0a1a14;
+    padding: 16px 24px;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 255, 136, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
+    z-index: 10001;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    font-weight: 500;
+    max-width: 400px;
+    animation: slideInFromRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  `;
+    successDiv.innerHTML = `
+    <div style="display: flex; align-items: start; gap: 12px;">
+      <svg style="flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+        <path d="M8 12L11 15L16 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <div style="flex: 1; word-break: break-word;">${escapeHtml$1(message)}</div>
+    </div>
+  `;
+    document.body.appendChild(successDiv);
+    setTimeout(() => {
+        successDiv.style.animation = 'slideOutToRight 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
+        setTimeout(() => successDiv.remove(), 300);
+    }, duration);
+}
+/**
+ * 显示加载指示器
+ *
+ * @param message 加载消息，默认 'Initializing...'
+ * @returns 加载指示器的 HTML 元素（用于后续移除）
+ */
+function showLoadingIndicator(message = 'Initializing payment system...') {
+    // 移除已存在的加载指示器
+    const existing = document.getElementById('payment-sdk-loading-indicator');
+    if (existing) {
+        existing.remove();
+    }
+    const loader = document.createElement('div');
+    loader.id = 'payment-sdk-loading-indicator';
+    loader.style.cssText = `
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(10, 26, 20, 0.98);
+    padding: 40px 56px;
+    border-radius: 20px;
+    z-index: 10002;
+    text-align: center;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    border: 1px solid rgba(34, 206, 156, 0.2);
+    backdrop-filter: blur(20px);
+    animation: fadeIn 0.2s ease-out;
+  `;
+    loader.innerHTML = `
+    <style>
+      @keyframes fadeIn {
+        from { opacity: 0; transform: translate(-50%, -48%); }
+        to { opacity: 1; transform: translate(-50%, -50%); }
+      }
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+    </style>
+    <div style="
+      width: 48px;
+      height: 48px;
+      border: 4px solid rgba(34, 206, 156, 0.2);
+      border-top-color: #22ce9c;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      margin: 0 auto 20px;
+    "></div>
+    <div style="
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 15px;
+      font-weight: 500;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      letter-spacing: 0.01em;
+    ">${escapeHtml$1(message)}</div>
+  `;
+    document.body.appendChild(loader);
+    return loader;
+}
+/**
+ * 移除加载指示器
+ *
+ * @param loader 加载指示器元素（可选）
+ */
+function hideLoadingIndicator(loader) {
+    if (loader && loader.parentNode) {
+        loader.style.animation = 'fadeOut 0.2s ease-in';
+        setTimeout(() => loader.remove(), 200);
+    }
+    else {
+        const existing = document.getElementById('payment-sdk-loading-indicator');
+        if (existing) {
+            existing.style.animation = 'fadeOut 0.2s ease-in';
+            setTimeout(() => existing.remove(), 200);
+        }
+    }
+}
+/**
+ * HTML 转义工具函数
+ * 防止 XSS 攻击
+ */
+function escapeHtml$1(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+/**
+ * 显示信息提示
+ *
+ * @param message 信息内容
+ * @param duration 显示时长（毫秒），默认 3000ms
+ */
+function showInfoMessage(message, duration = 3000) {
+    const existing = document.getElementById('payment-sdk-info-toast');
+    if (existing) {
+        existing.remove();
+    }
+    const infoDiv = document.createElement('div');
+    infoDiv.id = 'payment-sdk-info-toast';
+    infoDiv.style.cssText = `
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95) 0%, rgba(37, 99, 235, 0.95) 100%);
+    color: white;
+    padding: 16px 24px;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
+    z-index: 10001;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    max-width: 400px;
+    animation: slideInFromRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  `;
+    infoDiv.innerHTML = `
+    <div style="display: flex; align-items: start; gap: 12px;">
+      <svg style="flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+        <path d="M12 11V16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        <circle cx="12" cy="8" r="1" fill="currentColor"/>
+      </svg>
+      <div style="flex: 1; word-break: break-word;">${escapeHtml$1(message)}</div>
+    </div>
+  `;
+    document.body.appendChild(infoDiv);
+    setTimeout(() => {
+        infoDiv.style.animation = 'slideOutToRight 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
+        setTimeout(() => infoDiv.remove(), 300);
+    }, duration);
+}
+
+/**
+ * PurchaseSuccessModal - 购买成功弹窗
+ * 纯 JavaScript 实现，不依赖 React
+ *
+ * 参考设计: credit-pack-success-modal
+ * - 邮件确认卡片风格
+ * - 精美的动画效果（淡入淡出、缩放）
+ * - 包含成功图标、套餐详情、积分数、支付金额
+ */
+/**
+ * 购买成功弹窗类
+ */
+class PurchaseSuccessModal {
+    constructor(options) {
+        this.overlay = null;
+        this.modal = null;
+        this.isExiting = false;
+        this.scrollY = 0;
+        this.boundHandleEscKey = null;
+        this.options = {
+            language: 'en',
+            ...options,
+        };
+    }
+    /**
+     * 打开弹窗
+     */
+    open() {
+        if (this.overlay)
+            return; // 防止重复打开
+        // 保存滚动位置并阻止 body 滚动
+        this.scrollY = window.scrollY;
+        document.body.style.position = 'fixed';
+        document.body.style.top = `-${this.scrollY}px`;
+        document.body.style.width = '100%';
+        // 创建遮罩层和弹窗
+        this.createModal();
+        // 添加事件监听
+        this.attachEventListeners();
+    }
+    /**
+     * 关闭弹窗
+     */
+    close() {
+        if (this.isExiting || !this.overlay)
+            return;
+        this.isExiting = true;
+        // 添加退出动画
+        this.overlay.style.animation = 'fadeOut 0.3s ease-in';
+        if (this.modal) {
+            this.modal.style.animation = 'slideOutDown 0.3s ease-in';
+        }
+        // 300ms 后移除元素
+        setTimeout(() => {
+            this.cleanup();
+            this.options.onClose?.();
+        }, 300);
+    }
+    /**
+     * 创建弹窗元素
+     */
+    createModal() {
+        const { data, language } = this.options;
+        const isZh = language === 'zh-CN';
+        // 创建遮罩层
+        this.overlay = document.createElement('div');
+        this.overlay.id = 'purchase-success-modal-overlay';
+        this.overlay.style.cssText = `
+      position: fixed;
+      inset: 0;
+      z-index: 10001;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+      background: rgba(15, 23, 42, 0.75);
+      backdrop-filter: blur(8px);
+      animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    `;
+        // 创建弹窗卡片
+        this.modal = document.createElement('div');
+        this.modal.style.cssText = `
+      position: relative;
+      width: 90vw;
+      max-width: 680px;
+      border-radius: 24px;
+      background: linear-gradient(to bottom, #0f172a, #1e293b);
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+      animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    `;
+        this.modal.innerHTML = this.getModalHTML(data, isZh);
+        this.overlay.appendChild(this.modal);
+        document.body.appendChild(this.overlay);
+        // 添加 CSS 动画
+        this.addStyles();
+    }
+    /**
+     * 生成弹窗 HTML
+     */
+    getModalHTML(data, isZh) {
+        const texts = isZh ? {
+            title: '购买成功！',
+            subtitle: '您的积分已到账',
+            greeting: '亲爱的用户，',
+            message: '感谢您的购买。您的积分已成功添加到账户中。',
+            packLabel: '套餐名称',
+            creditsLabel: '积分数量',
+            amountLabel: '支付金额',
+            badge: '已支付',
+        } : {
+            title: 'Purchase Successful!',
+            subtitle: 'Your credits have been added',
+            greeting: 'Hi there,',
+            message: 'Thank you for your purchase. Your credits have been successfully added to your account.',
+            packLabel: 'Package',
+            creditsLabel: 'Credits',
+            amountLabel: 'Amount',
+            badge: 'PAID',
+        };
+        const currency = data.currency || '$';
+        return `
+      <!-- 关闭按钮 -->
+      <button
+        type="button"
+        id="success-modal-close-btn"
+        style="
+          position: absolute;
+          top: 20px;
+          right: 20px;
+          z-index: 10;
+          display: flex;
+          width: 40px;
+          height: 40px;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.1);
+          color: rgba(255, 255, 255, 0.7);
+          border: none;
+          cursor: pointer;
+          transition: all 0.2s;
+        "
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+        </svg>
+      </button>
+
+      <!-- 头部 -->
+      <div style="
+        border-radius: 24px 24px 0 0;
+        background: linear-gradient(to bottom, rgba(16, 185, 129, 0.1), transparent);
+        padding: 48px 32px;
+        text-align: center;
+      ">
+        <!-- Success Icon -->
+        <div style="
+          margin: 0 auto 16px;
+          width: 80px;
+          height: 80px;
+          animation: scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        ">
+          <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
+            <circle cx="40" cy="40" r="36" fill="#10B981" fill-opacity="0.1" />
+            <circle cx="40" cy="40" r="28" fill="#10B981" fill-opacity="0.2" />
+            <path d="M28 40L36 48L52 32" stroke="#10B981" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </div>
+
+        <!-- Title -->
+        <h2 style="
+          margin: 0 0 8px;
+          font-size: 32px;
+          font-weight: 700;
+          color: white;
+          animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
+        ">${texts.title}</h2>
+
+        <!-- Subtitle -->
+        <p style="
+          margin: 0;
+          font-size: 15px;
+          color: rgba(255, 255, 255, 0.6);
+          animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s backwards;
+        ">${texts.subtitle}</p>
+      </div>
+
+      <!-- 内容区域 -->
+      <div style="padding: 0 32px 48px;">
+        <!-- 确认卡片 -->
+        <div style="
+          overflow: hidden;
+          border-radius: 16px;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          background: #1e293b;
+          animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
+        ">
+          <!-- 卡片头部 -->
+          <div style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            background: #0f172a;
+            padding: 24px;
+          ">
+            <div style="
+              display: flex;
+              align-items: center;
+              gap: 12px;
+              color: #10B981;
+            ">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <path d="M12 2L2 7L12 12L22 7L12 2Z" fill="currentColor" opacity="0.3" />
+                <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+              <span style="
+                font-size: 18px;
+                font-weight: 600;
+              ">SeaVerse</span>
+            </div>
+            <div style="
+              border-radius: 9999px;
+              border: 1px solid rgba(168, 85, 247, 0.3);
+              background: rgba(168, 85, 247, 0.1);
+              padding: 6px 16px;
+              font-size: 13px;
+              font-weight: 500;
+              color: #a855f7;
+            ">${texts.badge}</div>
+          </div>
+
+          <!-- 问候语 -->
+          <div style="
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            padding: 32px 24px;
+          ">
+            <p style="
+              margin: 0 0 12px;
+              font-size: 15px;
+              font-weight: 600;
+              color: rgba(255, 255, 255, 0.9);
+            ">${texts.greeting}</p>
+            <p style="
+              margin: 0;
+              font-size: 14px;
+              line-height: 1.6;
+              color: rgba(255, 255, 255, 0.7);
+            ">${texts.message}</p>
+          </div>
+
+          <!-- 详情列表 -->
+          <div style="
+            background: rgba(15, 23, 42, 0.5);
+            padding: 24px;
+          ">
+            <div style="
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+              padding: 16px 0;
+            ">
+              <span style="
+                font-size: 13px;
+                font-weight: 500;
+                color: rgba(255, 255, 255, 0.6);
+              ">${texts.packLabel}</span>
+              <span style="
+                font-size: 14px;
+                font-weight: 600;
+                color: rgba(255, 255, 255, 0.95);
+              ">${this.escapeHtml(data.packName)}</span>
+            </div>
+            <div style="
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+              padding: 16px 0;
+            ">
+              <span style="
+                font-size: 13px;
+                font-weight: 500;
+                color: rgba(255, 255, 255, 0.6);
+              ">${texts.creditsLabel}</span>
+              <span style="
+                font-size: 14px;
+                font-weight: 600;
+                color: rgba(255, 255, 255, 0.95);
+              ">${data.credits.toLocaleString()} Credits</span>
+            </div>
+            <div style="
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              background: linear-gradient(to right, rgba(16, 185, 129, 0.05), transparent);
+              margin: 0 -24px;
+              padding: 16px 24px;
+            ">
+              <span style="
+                font-size: 13px;
+                font-weight: 500;
+                color: rgba(255, 255, 255, 0.6);
+              ">${texts.amountLabel}</span>
+              <span style="
+                font-size: 20px;
+                font-weight: 600;
+                color: #10B981;
+              ">${currency}${this.escapeHtml(data.amount)}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * 添加 CSS 动画
+     */
+    addStyles() {
+        // 检查是否已添加样式
+        if (document.getElementById('purchase-success-modal-styles'))
+            return;
+        const style = document.createElement('style');
+        style.id = 'purchase-success-modal-styles';
+        style.textContent = `
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      @keyframes fadeOut {
+        from {
+          opacity: 1;
+        }
+        to {
+          opacity: 0;
+        }
+      }
+
+      @keyframes slideInUp {
+        from {
+          opacity: 0;
+          transform: translateY(16px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes slideOutDown {
+        from {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        to {
+          opacity: 0;
+          transform: translateY(16px);
+        }
+      }
+
+      @keyframes scaleIn {
+        from {
+          opacity: 0;
+          transform: scale(0.8);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(8px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      #success-modal-close-btn:hover {
+        background: rgba(255, 255, 255, 0.15) !important;
+        color: white !important;
+        transform: rotate(90deg);
+      }
+    `;
+        document.head.appendChild(style);
+    }
+    /**
+     * 添加事件监听
+     */
+    attachEventListeners() {
+        if (!this.overlay)
+            return;
+        // 点击遮罩关闭
+        this.overlay.addEventListener('click', (e) => {
+            if (e.target === this.overlay) {
+                this.close();
+            }
+        });
+        // 点击关闭按钮
+        const closeBtn = document.getElementById('success-modal-close-btn');
+        if (closeBtn) {
+            closeBtn.addEventListener('click', () => this.close());
+        }
+        // ESC 键关闭
+        this.boundHandleEscKey = this.handleEscKey.bind(this);
+        document.addEventListener('keydown', this.boundHandleEscKey);
+    }
+    /**
+     * 处理 ESC 键
+     */
+    handleEscKey(e) {
+        if (e.key === 'Escape') {
+            this.close();
+        }
+    }
+    /**
+     * 清理资源
+     */
+    cleanup() {
+        // 移除事件监听
+        if (this.boundHandleEscKey) {
+            document.removeEventListener('keydown', this.boundHandleEscKey);
+            this.boundHandleEscKey = null;
+        }
+        // 移除元素
+        if (this.overlay && this.overlay.parentNode) {
+            this.overlay.parentNode.removeChild(this.overlay);
+        }
+        // 恢复 body 滚动
+        document.body.style.position = '';
+        document.body.style.top = '';
+        document.body.style.width = '';
+        window.scrollTo(0, this.scrollY);
+        // 清空引用
+        this.overlay = null;
+        this.modal = null;
+        this.isExiting = false;
+    }
+    /**
+     * HTML 转义工具函数
+     * 防止 XSS 攻击
+     */
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    /**
+     * 检查弹窗是否打开
+     */
+    isOpen() {
+        return this.overlay !== null && !this.isExiting;
+    }
+}
+
+/**
+ * CreditPackageModal - 积分套餐选择弹框
+ * 展示不同的积分套餐供用户选择
+ */
+class CreditPackageModal {
+    constructor(options) {
+        this.resizeHandler = null;
+        this.isInitializingSDK = false;
+        this.sdkInitialized = false;
+        // 设计系统常量
+        this.SPACING = {
+            xs: '8px',
+            sm: '16px',
+            md: '24px',
+            lg: '32px',
+            xl: '48px',
+        };
+        this.COLORS = {
+            text: {
+                primary: 'rgba(255, 255, 255, 0.95)',
+                secondary: 'rgba(255, 255, 255, 0.65)',
+                tertiary: 'rgba(255, 255, 255, 0.5)',
+            },
+            green: {
+                primary: '#00ff88',
+                secondary: '#00f2fe',
+                accent: '#22ce9c',
+            },
+        };
+        this.options = options;
+        this.language = options.language || 'en';
+        // 创建弹框
+        this.modal = new PaymentModal({
+            title: this.language === 'zh-CN'
+                ? (options.title_cn || '选择您的创作力量')
+                : (options.title || 'Choose Your Creative Power'),
+            showCloseButton: true,
+            closeOnOverlayClick: false, // 禁用点击空白处关闭
+            closeOnEsc: false, // 禁用ESC键关闭
+            maxWidth: '1200px',
+            onClose: () => {
+                this.cleanup();
+                options.onClose?.();
+            },
+        });
+        console.log('[CreditPackageModal] Created');
+    }
+    /**
+     * 打开弹框
+     */
+    async open() {
+        console.log('[CreditPackageModal] Opening modal...');
+        this.modal.open();
+        // 修改弹框背景为深色
+        const modalElement = document.querySelector('.payment-modal');
+        if (modalElement) {
+            modalElement.style.background = '#0a0a0f';
+            modalElement.style.border = '1px solid rgba(255, 255, 255, 0.1)';
+        }
+        // 修改标题样式
+        const titleElement = document.querySelector('.payment-modal-title');
+        if (titleElement) {
+            titleElement.style.color = 'white';
+            titleElement.style.fontSize = '28px';
+            titleElement.style.fontWeight = '700';
+            titleElement.style.padding = '32px 32px 0 32px';
+            titleElement.style.marginBottom = '16px';
+            titleElement.style.letterSpacing = '-0.01em';
+        }
+        // 修改关闭按钮颜色并添加 hover 动画
+        const closeButton = document.querySelector('.payment-modal-close');
+        if (closeButton) {
+            closeButton.style.background = 'rgba(255, 255, 255, 0.05)';
+            closeButton.style.color = 'rgba(255, 255, 255, 0.7)';
+            closeButton.style.transition = 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)';
+            // 移除旧的事件监听器（如果有）
+            const newCloseButton = closeButton.cloneNode(true);
+            closeButton.parentNode?.replaceChild(newCloseButton, closeButton);
+            // 添加 hover 动画
+            newCloseButton.addEventListener('mouseenter', () => {
+                newCloseButton.style.background = 'rgba(255, 255, 255, 0.1)';
+                newCloseButton.style.color = 'white';
+                newCloseButton.style.transform = 'rotate(90deg) scale(1.1)';
+            });
+            newCloseButton.addEventListener('mouseleave', () => {
+                newCloseButton.style.background = 'rgba(255, 255, 255, 0.05)';
+                newCloseButton.style.color = 'rgba(255, 255, 255, 0.7)';
+                newCloseButton.style.transform = 'rotate(0deg) scale(1)';
+            });
+            newCloseButton.addEventListener('click', () => this.close());
+        }
+        // 渲染内容
+        this.renderContent();
+        // 添加resize监听器，窗口大小改变时重新渲染以应用响应式样式
+        this.resizeHandler = () => {
+            this.renderContent();
+        };
+        window.addEventListener('resize', this.resizeHandler);
+        // 如果配置了 initPaymentSDK，在后台自动初始化 SDK
+        if (!this.sdkInitialized && !this.isInitializingSDK) {
+            this.initializeSDK();
+        }
+        console.log('[CreditPackageModal] Modal opened');
+    }
+    /**
+     * 等待 SDK 初始化完成（支持超时和重试）
+     * @param timeout 超时时间（毫秒），默认 30 秒
+     * @param maxRetries 最大重试次数，默认 1 次
+     * @returns 是否初始化成功
+     */
+    async waitForSDKInitialization(timeout = 30000, maxRetries = 1) {
+        const startTime = Date.now();
+        // 如果已经初始化完成，直接返回
+        if (this.sdkInitialized) {
+            console.log('[CreditPackageModal] SDK already initialized');
+            return true;
+        }
+        // 如果还没开始初始化且有配置，主动触发
+        if (!this.isInitializingSDK && this.options.sdkConfig) {
+            console.log('[CreditPackageModal] Starting SDK initialization...');
+            await this.initializeSDK();
+            if (this.sdkInitialized) {
+                return true;
+            }
+        }
+        // 等待初始化完成
+        console.log('[CreditPackageModal] Waiting for SDK initialization...');
+        while (Date.now() - startTime < timeout) {
+            if (this.sdkInitialized) {
+                console.log('[CreditPackageModal] SDK initialization completed');
+                return true;
+            }
+            if (!this.isInitializingSDK) {
+                // 初始化已结束但未成功，尝试重试
+                if (maxRetries > 0) {
+                    console.log(`[CreditPackageModal] SDK initialization failed, retrying... (${maxRetries} retries left)`);
+                    await this.initializeSDK();
+                    return this.waitForSDKInitialization(timeout - (Date.now() - startTime), maxRetries - 1);
+                }
+                else {
+                    console.error('[CreditPackageModal] SDK initialization failed after all retries');
+                    return false;
+                }
+            }
+            // 等待 100ms 后重试
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        // 超时
+        console.error('[CreditPackageModal] SDK initialization timed out');
+        return false;
+    }
+    /**
+     * 初始化支付SDK（后台静默执行）
+     */
+    async initializeSDK() {
+        if (this.isInitializingSDK || this.sdkInitialized) {
+            return;
+        }
+        if (!this.options.sdkConfig) {
+            console.log('[CreditPackageModal] No SDK configuration provided, skipping initialization');
+            return;
+        }
+        this.isInitializingSDK = true;
+        console.log('[CreditPackageModal] Initializing payment SDK...');
+        // 显示加载指示器
+        const loader = showLoadingIndicator('Initializing payment system...');
+        try {
+            const config = this.options.sdkConfig;
+            // 1. 从环境配置中获取基础配置
+            const envConfig = ENVIRONMENT_CONFIGS[config.environment];
+            // 2. 合并配置（自定义配置优先级高于环境配置）
+            const finalConfig = {
+                scriptUrl: config.scriptUrl || envConfig.scriptUrl,
+                clientId: config.clientId || envConfig.clientId,
+                orderApiUrl: config.orderApiUrl || envConfig.orderApiUrl,
+                cssUrl: config.cssUrl || envConfig.cssUrl,
+            };
+            console.log('[CreditPackageModal] Using environment:', config.environment);
+            // 3. 初始化 SeaartPaymentSDK
+            await SeaartPaymentSDK.getInstance().init({
+                scriptUrl: finalConfig.scriptUrl,
+                clientId: finalConfig.clientId,
+                language: 'en',
+                scriptTimeout: config.scriptTimeout,
+                cssUrl: finalConfig.cssUrl,
+            });
+            // 4. 获取支付方式列表
+            const paymentMethods = await SeaartPaymentSDK.getInstance().getPaymentMethods({
+                country_code: config.countryCode,
+                business_type: config.businessType ?? 1, // 默认为 1（一次性购买）
+            });
+            // 5. 查找匹配的支付方式
+            const paymentMethod = config.paymentMethodType
+                ? paymentMethods.find((m) => m.payment_method_type === config.paymentMethodType ||
+                    m.payment_method_name.toLowerCase().includes(config.paymentMethodType.toLowerCase()))
+                : paymentMethods.find((m) => m.payment_type === 2); // 默认使用 dropin (payment_type === 2)
+            if (!paymentMethod) {
+                throw new Error(`Payment method "${config.paymentMethodType || 'dropin'}" not found`);
+            }
+            // 6. 存储到类成员变量（包括 finalConfig 以供后续使用）
+            this.options.paymentMethod = paymentMethod;
+            this.options.accountToken = config.accountToken;
+            this.sdkInitialized = true;
+            // 存储最终配置到 config 对象（用于 handlePaymentFlow）
+            this.options.sdkConfig._resolvedOrderApiUrl = finalConfig.orderApiUrl;
+            console.log('[CreditPackageModal] SDK initialized with environment config:', {
+                environment: config.environment,
+                paymentMethod: paymentMethod.payment_method_name,
+                accountToken: config.accountToken ? 'provided' : 'not provided',
+            });
+        }
+        catch (error) {
+            console.error('[CreditPackageModal] Failed to initialize payment SDK:', error);
+            // SDK 初始化失败不影响浏览积分包，只是无法进行支付
+        }
+        finally {
+            this.isInitializingSDK = false;
+            // 隐藏加载指示器
+            hideLoadingIndicator(loader);
+        }
+    }
+    /**
+     * 关闭弹框
+     */
+    close() {
+        console.log('[CreditPackageModal] Closing modal...');
+        this.modal.close();
+    }
+    /**
+     * 获取响应式样式配置
+     */
+    getResponsiveStyles() {
+        const isMobile = window.matchMedia('(max-width: 768px)').matches;
+        const isTablet = window.matchMedia('(max-width: 1200px)').matches;
+        const isLaptop = window.matchMedia('(max-width: 1400px)').matches;
+        let computeColumns = 5;
+        let packColumns = 4;
+        let padding = '0 60px 60px';
+        if (isMobile) {
+            computeColumns = 1;
+            packColumns = 1;
+            padding = '0 20px 20px';
+        }
+        else if (isTablet) {
+            computeColumns = 2;
+            packColumns = 2;
+            padding = '0 30px 30px';
+        }
+        else if (isLaptop) {
+            computeColumns = 3;
+            packColumns = 2;
+            padding = '0 40px 40px';
+        }
+        return {
+            containerPadding: padding,
+            computeGridColumns: `repeat(${computeColumns}, 1fr)`,
+            packGridColumns: `repeat(${packColumns}, 1fr)`,
+        };
+    }
+    /**
+     * 渲染弹框内容
+     */
+    renderContent() {
+        const container = this.modal.getContentContainer();
+        if (!container) {
+            throw new Error('Modal content container not found');
+        }
+        const isZh = this.language === 'zh-CN';
+        const styles = this.getResponsiveStyles();
+        container.innerHTML = `
+      <div style="
+        padding: ${styles.containerPadding};
+        background: #0a0a0f;
+        color: white;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      ">
+        <!-- 副标题 -->
+        <p style="
+          text-align: center;
+          font-size: 16px;
+          color: ${this.COLORS.text.secondary};
+          margin: 0 0 ${this.SPACING.xl} 0;
+          line-height: 1.6;
+          font-weight: 400;
+        ">
+          ${isZh
+            ? (this.options.subtitle_cn || '免费开始，随创作扩展。所有套餐都包含用于电影、游戏、音乐和世界的算力积分。')
+            : (this.options.subtitle || 'Start free, scale with creation. All packages include credits for movies, games, music, and worlds.')}
+        </p>
+
+        <!-- 算力积分说明区域 - 完全复刻 next-meta pricing -->
+        <div style="margin-bottom: ${this.SPACING.xl};">
+          <!-- Section Header -->
+          <div style="margin-bottom: ${this.SPACING.xl}; text-align: center;">
+            <h2 style="
+              margin-bottom: ${this.SPACING.xs};
+              font-size: 24px;
+              font-weight: 700;
+              color: ${this.COLORS.text.primary};
+              letter-spacing: -0.02em;
+            ">
+              ${isZh ? '算力积分消耗' : 'Compute Credits'}
+            </h2>
+            <p style="
+              margin: 0 auto;
+              max-width: 48rem;
+              font-size: 16px;
+              color: ${this.COLORS.text.secondary};
+              line-height: 1.6;
+            ">
+              ${isZh ? '创作所需的算力积分' : 'Credits needed for creation'}
+            </p>
+          </div>
+
+          <!-- Credits Grid - 完全复刻 next-meta 的 5 个卡片 -->
+          <div style="
+            display: grid;
+            grid-template-columns: ${styles.computeGridColumns};
+            gap: 12px;
+            margin-bottom: 20px;
+          ">
+            <!-- Film Clips -->
+            <article style="
+              position: relative;
+              overflow: hidden;
+              border-radius: 16px;
+              border: 1px solid rgba(255, 255, 255, 0.06);
+              background: rgba(255, 255, 255, 0.05);
+              padding: 20px;
+              text-align: center;
+              backdrop-filter: blur(40px);
+              opacity: 0.7;
+              transform: scale(0.98);
+              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            " onmouseover="this.style.transform='translateY(-4px) scale(1)'; this.style.opacity='1'; this.style.borderColor='rgba(255, 255, 255, 0.12)'; this.style.boxShadow='0 20px 60px rgba(0,0,0,0.4)';"
+               onmouseout="this.style.transform='scale(0.98)'; this.style.opacity='0.7'; this.style.borderColor='rgba(255, 255, 255, 0.06)'; this.style.boxShadow='none';">
+              <div style="
+                margin: 0 auto 16px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 48px;
+                width: 48px;
+                border-radius: 12px;
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+              ">
+                <svg style="height: 24px; width: 24px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+                </svg>
+              </div>
+              <h3 style="margin-bottom: 8px; font-size: 16px; font-weight: 600; color: white;">
+                ${isZh ? '电影片段' : 'Film Clips'}
+              </h3>
+              <p style="margin-bottom: 8px; font-family: 'Monaco', 'Menlo', monospace; font-size: 20px; font-weight: 800; color: #00ff88;">
+                100-300
+              </p>
+              <p style="font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.5);">
+                ${isZh ? '每次生成' : 'per generation'}
+              </p>
+            </article>
+
+            <!-- Game Scenes -->
+            <article style="
+              position: relative;
+              overflow: hidden;
+              border-radius: 16px;
+              border: 1px solid rgba(255, 255, 255, 0.06);
+              background: rgba(255, 255, 255, 0.05);
+              padding: 20px;
+              text-align: center;
+              backdrop-filter: blur(40px);
+              opacity: 0.7;
+              transform: scale(0.98);
+              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            " onmouseover="this.style.transform='translateY(-4px) scale(1)'; this.style.opacity='1'; this.style.borderColor='rgba(255, 255, 255, 0.12)'; this.style.boxShadow='0 20px 60px rgba(0,0,0,0.4)';"
+               onmouseout="this.style.transform='scale(0.98)'; this.style.opacity='0.7'; this.style.borderColor='rgba(255, 255, 255, 0.06)'; this.style.boxShadow='none';">
+              <div style="
+                margin: 0 auto 16px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 48px;
+                width: 48px;
+                border-radius: 12px;
+                background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+                box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+              ">
+                <svg style="height: 24px; width: 24px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
+                </svg>
+              </div>
+              <h3 style="margin-bottom: 8px; font-size: 16px; font-weight: 600; color: white;">
+                ${isZh ? '游戏场景' : 'Game Scenes'}
+              </h3>
+              <p style="margin-bottom: 8px; font-family: 'Monaco', 'Menlo', monospace; font-size: 20px; font-weight: 800; color: #00ff88;">
+                50-200
+              </p>
+              <p style="font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.5);">
+                ${isZh ? '每个场景' : 'per scene'}
+              </p>
+            </article>
+
+            <!-- Music -->
+            <article style="
+              position: relative;
+              overflow: hidden;
+              border-radius: 16px;
+              border: 1px solid rgba(255, 255, 255, 0.06);
+              background: rgba(255, 255, 255, 0.05);
+              padding: 20px;
+              text-align: center;
+              backdrop-filter: blur(40px);
+              opacity: 0.7;
+              transform: scale(0.98);
+              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            " onmouseover="this.style.transform='translateY(-4px) scale(1)'; this.style.opacity='1'; this.style.borderColor='rgba(255, 255, 255, 0.12)'; this.style.boxShadow='0 20px 60px rgba(0,0,0,0.4)';"
+               onmouseout="this.style.transform='scale(0.98)'; this.style.opacity='0.7'; this.style.borderColor='rgba(255, 255, 255, 0.06)'; this.style.boxShadow='none';">
+              <div style="
+                margin: 0 auto 16px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 48px;
+                width: 48px;
+                border-radius: 12px;
+                background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+                box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+              ">
+                <svg style="height: 24px; width: 24px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
+                </svg>
+              </div>
+              <h3 style="margin-bottom: 8px; font-size: 16px; font-weight: 600; color: white;">
+                ${isZh ? '音乐' : 'Music'}
+              </h3>
+              <p style="margin-bottom: 8px; font-family: 'Monaco', 'Menlo', monospace; font-size: 20px; font-weight: 800; color: #00ff88;">
+                30-100
+              </p>
+              <p style="font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.5);">
+                ${isZh ? '每首曲目' : 'per track'}
+              </p>
+            </article>
+
+            <!-- 3D Worlds -->
+            <article style="
+              position: relative;
+              overflow: hidden;
+              border-radius: 16px;
+              border: 1px solid rgba(255, 255, 255, 0.06);
+              background: rgba(255, 255, 255, 0.05);
+              padding: 20px;
+              text-align: center;
+              backdrop-filter: blur(40px);
+              opacity: 0.7;
+              transform: scale(0.98);
+              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            " onmouseover="this.style.transform='translateY(-4px) scale(1)'; this.style.opacity='1'; this.style.borderColor='rgba(255, 255, 255, 0.12)'; this.style.boxShadow='0 20px 60px rgba(0,0,0,0.4)';"
+               onmouseout="this.style.transform='scale(0.98)'; this.style.opacity='0.7'; this.style.borderColor='rgba(255, 255, 255, 0.06)'; this.style.boxShadow='none';">
+              <div style="
+                margin: 0 auto 16px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 48px;
+                width: 48px;
+                border-radius: 12px;
+                background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+                box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+              ">
+                <svg style="height: 24px; width: 24px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                </svg>
+              </div>
+              <h3 style="margin-bottom: 8px; font-size: 16px; font-weight: 600; color: white;">
+                ${isZh ? '3D 世界' : '3D Worlds'}
+              </h3>
+              <p style="margin-bottom: 8px; font-family: 'Monaco', 'Menlo', monospace; font-size: 20px; font-weight: 800; color: #00ff88;">
+                150-500
+              </p>
+              <p style="font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.5);">
+                ${isZh ? '每个世界' : 'per world'}
+              </p>
+            </article>
+
+            <!-- Agent Sessions -->
+            <article style="
+              position: relative;
+              overflow: hidden;
+              border-radius: 16px;
+              border: 1px solid rgba(255, 255, 255, 0.06);
+              background: rgba(255, 255, 255, 0.05);
+              padding: 20px;
+              text-align: center;
+              backdrop-filter: blur(40px);
+              opacity: 0.7;
+              transform: scale(0.98);
+              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            " onmouseover="this.style.transform='translateY(-4px) scale(1)'; this.style.opacity='1'; this.style.borderColor='rgba(255, 255, 255, 0.12)'; this.style.boxShadow='0 20px 60px rgba(0,0,0,0.4)';"
+               onmouseout="this.style.transform='scale(0.98)'; this.style.opacity='0.7'; this.style.borderColor='rgba(255, 255, 255, 0.06)'; this.style.boxShadow='none';">
+              <div style="
+                margin: 0 auto 16px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 48px;
+                width: 48px;
+                border-radius: 12px;
+                background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+                box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+              ">
+                <svg style="height: 24px; width: 24px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
+                </svg>
+              </div>
+              <h3 style="margin-bottom: 8px; font-size: 16px; font-weight: 600; color: white;">
+                ${isZh ? 'AI 会话' : 'Agent Sessions'}
+              </h3>
+              <p style="margin-bottom: 8px; font-family: 'Monaco', 'Menlo', monospace; font-size: 20px; font-weight: 800; color: #00ff88;">
+                10
+              </p>
+              <p style="font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.5);">
+                ${isZh ? '每次会话' : 'per session'}
+              </p>
+            </article>
+          </div>
+        </div>
+
+        <!-- Credit Packs - 积分包购买标题 -->
+        <div style="margin: 0 auto ${this.SPACING.lg}; max-width: 80rem; text-align: center;">
+          <h3 style="
+            margin-bottom: ${this.SPACING.xs};
+            font-size: 24px;
+            font-weight: 700;
+            color: ${this.COLORS.text.primary};
+            letter-spacing: -0.02em;
+          ">
+            ${isZh ? '需要更多积分?' : 'Need More Credits?'}
+          </h3>
+          <p style="
+            font-size: 16px;
+            color: ${this.COLORS.text.secondary};
+            line-height: 1.6;
+          ">
+            ${isZh ? '随时购买永久积分包' : 'Purchase unlimited credit packages anytime'}
+            <span style="margin-left: 4px; font-size: 14px; color: ${this.COLORS.text.tertiary};">
+              (${isZh ? '需订阅' : 'Subscription Required'})
+            </span>
+          </p>
+        </div>
+
+        <!-- 套餐卡片 -->
+        <div style="
+          display: grid;
+          grid-template-columns: ${styles.packGridColumns};
+          gap: 16px;
+        ">
+          ${CREDIT_PACKAGES.map((pkg, index) => this.renderPackageCard(pkg, index)).join('')}
+        </div>
+      </div>
+    `;
+        // 添加点击事件监听
+        this.attachEventListeners(container);
+    }
+    /**
+     * 渲染套餐卡片
+     */
+    renderPackageCard(pkg, index) {
+        const isZh = this.language === 'zh-CN';
+        const isPopular = pkg.is_popular;
+        const hasBonus = parseInt(pkg.bonus_credits) > 0;
+        // Popular包的呼吸动画
+        const pulseAnimation = isPopular ? `
+      <style>
+        @keyframes pulse-${pkg.id} {
+          0%, 100% {
+            transform: translateY(0) scale(1);
+            box-shadow: 0 8px 32px rgba(0, 255, 136, 0.3);
+          }
+          50% {
+            transform: translateY(-2px) scale(1.02);
+            box-shadow: 0 12px 40px rgba(0, 255, 136, 0.4);
+          }
+        }
+      </style>
+    ` : '';
+        return `
+      ${pulseAnimation}
+      <div
+        data-package-id="${pkg.id}"
+        style="
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          border-radius: 16px;
+          border: 1px solid ${isPopular ? 'rgba(0, 255, 136, 0.3)' : 'rgba(255, 255, 255, 0.06)'};
+          background: ${isPopular ? 'linear-gradient(to bottom, rgba(0, 255, 136, 0.05), rgba(255, 255, 255, 0.05))' : 'rgba(255, 255, 255, 0.05)'};
+          padding: 20px;
+          text-align: center;
+          backdrop-filter: blur(40px);
+          cursor: pointer;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          ${isPopular ? `animation: pulse-${pkg.id} 2s ease-in-out infinite;` : ''}
+        "
+        onmouseover="this.style.transform='translateY(-4px)${isPopular ? ' scale(1.02)' : ''}'; this.style.borderColor='${isPopular ? 'rgba(0, 255, 136, 0.5)' : 'rgba(255, 255, 255, 0.12)'}'; this.style.animationPlayState='paused';"
+        onmouseout="this.style.transform='translateY(0)${isPopular ? ' scale(1)' : ''}'; this.style.borderColor='${isPopular ? 'rgba(0, 255, 136, 0.3)' : 'rgba(255, 255, 255, 0.06)'}'; this.style.animationPlayState='running';"
+      >
+        ${pkg.day_limit > 0 ? `
+          <div style="
+            position: absolute;
+            top: -14px;
+            left: 50%;
+            z-index: 10;
+            transform: translateX(-50%);
+            border-radius: 9999px;
+            border: 1px solid rgba(34, 206, 156, 0.3);
+            background: #0a1a14;
+            padding: 6px 16px;
+            font-size: 12px;
+            font-weight: 700;
+            letter-spacing: 0.05em;
+            white-space: nowrap;
+            text-transform: uppercase;
+            color: #22ce9c;
+            box-shadow: 0 0 12px rgba(34, 206, 156, 0.2);
+          ">
+            ${isZh ? `每日限购 ${pkg.day_limit}` : `DAILY LIMIT: ${pkg.day_limit}`}
+          </div>
+        ` : ''}
+
+        <!-- 积分总数 -->
+        <div style="
+          margin-bottom: 8px;
+          font-size: 36px;
+          line-height: 1;
+          font-weight: 700;
+          letter-spacing: -0.02em;
+          color: white;
+        ">
+          ${this.formatNumber(pkg.credits)}
+        </div>
+
+        <!-- 积分明细 -->
+        <div style="
+          margin-bottom: 12px;
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: center;
+          gap: 4px;
+        ">
+          <span style="
+            font-size: 16px;
+            font-weight: 500;
+            color: hsl(240, 5%, 65%);
+          ">
+            ${this.formatNumber(pkg.base_credits)} ${isZh ? '积分' : 'Credits'}
+          </span>
+          ${hasBonus ? `
+            <span style="
+              border-radius: 4px;
+              background: rgba(0, 255, 136, 0.12);
+              padding: 2px 8px;
+              font-size: 16px;
+              font-weight: 500;
+              color: rgba(0, 255, 136, 0.9);
+            ">
+              +${this.formatNumber(pkg.bonus_credits)} ${isZh ? '奖励' : 'Bonus'}
+            </span>
+          ` : ''}
+        </div>
+
+        <!-- 购买按钮 -->
+        <button
+          data-package-button="${pkg.id}"
+          style="
+            margin-top: auto;
+            width: 100%;
+            border-radius: 12px;
+            border: ${isPopular ? 'none' : '1px solid rgba(255, 255, 255, 0.12)'};
+            background: ${isPopular ? 'linear-gradient(135deg, #00ff88 0%, #00f2fe 100%)' : 'rgba(255, 255, 255, 0.08)'};
+            padding: 10px 20px;
+            font-size: 14px;
+            font-weight: ${isPopular ? '700' : '600'};
+            color: ${isPopular ? '#0a0a0f' : 'white'};
+            cursor: pointer;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: ${isPopular ? '0 4px 16px rgba(0, 255, 136, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)' : 'none'};
+          "
+          onmouseover="this.style.borderColor='${isPopular ? 'none' : 'rgba(255, 255, 255, 0.25)'}'; this.style.background='${isPopular ? 'linear-gradient(135deg, #00ff88 0%, #00f2fe 100%)' : 'rgba(255, 255, 255, 0.15)'}'; this.style.boxShadow='${isPopular ? '0 6px 20px rgba(0, 255, 136, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4)' : 'none'}'; this.style.transform='translateY(-2px)';"
+          onmouseout="this.style.borderColor='${isPopular ? 'none' : 'rgba(255, 255, 255, 0.12)'}'; this.style.background='${isPopular ? 'linear-gradient(135deg, #00ff88 0%, #00f2fe 100%)' : 'rgba(255, 255, 255, 0.08)'}'; this.style.boxShadow='${isPopular ? '0 4px 16px rgba(0, 255, 136, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)' : 'none'}'; this.style.transform='translateY(0)';"
+        >
+          ${isZh ? '购买' : 'Buy'} $${pkg.price}
+        </button>
+      </div>
+    `;
+    }
+    /**
+     * 格式化数字（添加逗号）
+     */
+    formatNumber(num) {
+        return parseInt(num).toLocaleString();
+    }
+    /**
+     * 获取加载按钮的 HTML（带旋转动画）
+     * @param text 加载文本
+     * @param isPopular 是否为 Popular 套餐（用于调整颜色）
+     */
+    getLoadingButtonHTML(text, isPopular = false) {
+        return `
+      <svg style="
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        border: 2px solid ${isPopular ? 'rgba(10, 10, 15, 0.3)' : 'rgba(255, 255, 255, 0.3)'};
+        border-top-color: ${isPopular ? '#0a0a0f' : 'white'};
+        border-radius: 50%;
+        animation: spin 0.6s linear infinite;
+      " viewBox="0 0 24 24"></svg>
+      <style>@keyframes spin { to { transform: rotate(360deg); } }</style>
+      ${text ? `<span style="margin-left: 8px;">${text}</span>` : ''}
+    `;
+    }
+    /**
+     * 添加事件监听
+     */
+    attachEventListeners(container) {
+        // 为每个套餐按钮添加点击事件
+        CREDIT_PACKAGES.forEach(pkg => {
+            const button = container.querySelector(`[data-package-button="${pkg.id}"]`);
+            if (button) {
+                button.addEventListener('click', async (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    console.log('[CreditPackageModal] Package selected:', pkg.id);
+                    // 保存原始按钮文本
+                    const originalText = button.innerHTML;
+                    const originalDisabled = button.disabled;
+                    try {
+                        // 禁用按钮，显示初始化状态
+                        button.disabled = true;
+                        const isZh = this.language === 'zh-CN';
+                        button.innerHTML = this.getLoadingButtonHTML(isZh ? '初始化中...' : 'Initializing...', pkg.is_popular);
+                        // 等待 SDK 初始化（支持重试）
+                        const initialized = await this.waitForSDKInitialization(30000, 1);
+                        if (!initialized) {
+                            throw new Error('SDK initialization failed or timed out. Please try again.');
+                        }
+                        // SDK 初始化成功，执行支付流程
+                        await this.handlePaymentFlow(pkg, button, originalText);
+                    }
+                    catch (error) {
+                        console.error('[CreditPackageModal] Failed to process payment:', error);
+                        // 恢复按钮状态
+                        button.disabled = originalDisabled;
+                        button.innerHTML = originalText;
+                        // 显示错误提示（使用自定义 UI 替代 alert）
+                        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+                        showErrorMessage(`Payment failed: ${errorMessage}`);
+                        // 触发失败回调
+                        this.options.onPaymentFailed?.(error instanceof Error ? error : new Error(String(error)));
+                    }
+                });
+            }
+        });
+    }
+    /**
+     * 处理支付流程
+     */
+    async handlePaymentFlow(pkg, button, originalHTML) {
+        try {
+            // 更新按钮状态为"创建订单中"
+            button.innerHTML = this.getLoadingButtonHTML('Creating order...', pkg.is_popular);
+            console.log('[CreditPackageModal] Creating order for package:', pkg.id);
+            // 使用默认实现：调用解析后的 orderApiUrl
+            const resolvedOrderApiUrl = this.options.sdkConfig._resolvedOrderApiUrl || ENVIRONMENT_CONFIGS[this.options.sdkConfig.environment].orderApiUrl;
+            const response = await createOrder(resolvedOrderApiUrl, this.options.sdkConfig.accountToken || '', {
+                product_id: pkg.id,
+                purchase_type: this.options.sdkConfig.businessType ?? 1, // 默认为 1
+            });
+            console.log('[CreditPackageModal] Create order response:', response);
+            if (!response || !response.transaction_id) {
+                throw new Error('Failed to create order: Invalid response from API');
+            }
+            const orderId = response.transaction_id;
+            console.log('[CreditPackageModal] Order created:', orderId);
+            // 恢复按钮状态
+            button.disabled = false;
+            button.innerHTML = originalHTML;
+            // 创建并打开支付弹框
+            await this.openPaymentModal(orderId, pkg);
+        }
+        catch (error) {
+            console.error('[CreditPackageModal] Payment flow failed:', error);
+            // 恢复按钮状态
+            button.disabled = false;
+            button.innerHTML = originalHTML;
+            // 显示错误提示（使用自定义 UI 替代 alert）
+            showErrorMessage(`Payment failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+            // 触发失败回调
+            this.options.onPaymentFailed?.(error instanceof Error ? error : new Error(String(error)));
+        }
+    }
+    /**
+     * 打开支付弹框
+     */
+    async openPaymentModal(orderId, pkg) {
+        if (!this.options.paymentMethod) {
+            throw new Error('Payment method not configured');
+        }
+        const isZh = this.language === 'zh-CN';
+        // 创建支付实例（使用 orderId）
+        let paymentInstance;
+        if (this.options.sdkConfig || this.sdkInitialized) {
+            // 方案A：使用 sdkConfig 初始化后，创建支付实例
+            paymentInstance = window.SeaartPaymentComponent.createPayment({
+                sys_order_id: orderId,
+                account_token: this.options.accountToken,
+            });
+        }
+        else {
+            throw new Error('Payment SDK not initialized. Please provide sdkConfig or paymentSDK.');
+        }
+        const dropinModal = new DropinPaymentModal(paymentInstance, orderId, this.options.accountToken, this.options.paymentMethod, {
+            modalTitle: isZh ? `购买 ${pkg.credits} 积分` : `Purchase ${pkg.credits} Credits`,
+            onCompleted: (payload) => {
+                console.log('[CreditPackageModal] Payment completed:', payload);
+                this.close();
+                // 显示购买成功弹窗
+                const successModal = new PurchaseSuccessModal({
+                    data: {
+                        packName: isZh ? `${pkg.credits} 积分套餐` : `${pkg.credits} Credits Package`,
+                        credits: parseInt(pkg.credits),
+                        amount: pkg.price,
+                        currency: '$',
+                        orderId: orderId,
+                        transactionId: payload.transaction_id,
+                    },
+                    language: this.options.language,
+                    onClose: () => {
+                        // 弹窗关闭后刷新积分
+                        (async () => {
+                            try {
+                                const envConfig = ENVIRONMENT_CONFIGS[this.options.sdkConfig.environment];
+                                const walletApiUrl = envConfig.walletApiUrl;
+                                console.log('[CreditPackageModal] Refreshing credits from:', walletApiUrl);
+                                const creditDetail = await getCreditDetail(walletApiUrl, this.options.sdkConfig.accountToken);
+                                if (creditDetail) {
+                                    console.log('[CreditPackageModal] Credits refreshed, total balance:', creditDetail.total_balance);
+                                }
+                                else {
+                                    console.warn('[CreditPackageModal] Failed to refresh credits');
+                                }
+                            }
+                            catch (error) {
+                                console.error('[CreditPackageModal] Failed to refresh credits:', error);
+                            }
+                        })();
+                        // 触发用户回调
+                        this.options.onPaymentSuccess?.(orderId, payload.transaction_id);
+                    },
+                });
+                successModal.open();
+            },
+            onFailed: (payload) => {
+                console.error('[CreditPackageModal] Payment failed:', payload);
+                const error = new Error(payload.message || 'Payment failed');
+                this.options.onPaymentFailed?.(error);
+            },
+            onError: (payload, error) => {
+                console.error('[CreditPackageModal] Payment error:', error);
+                this.options.onPaymentFailed?.(error);
+            },
+        });
+        await dropinModal.open();
+    }
+    /**
+     * 清理资源
+     */
+    cleanup() {
+        console.log('[CreditPackageModal] Cleaning up...');
+        // 移除resize监听器
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
+    }
+    /**
+     * 检查弹框是否打开
+     */
+    isOpen() {
+        return this.modal.isModalOpen();
+    }
+}
+
+/**
+ * GenericPackageModal - 通用套餐选择弹框
+ * 支持多种套餐类型（破冰包、告急包、首充包等）
+ * 套餐数据从外部配置传入,无硬编码
+ */
+class GenericPackageModal {
+    constructor(options) {
+        this.resizeHandler = null;
+        this.isInitializingSDK = false;
+        this.sdkInitialized = false;
+        // 验证必填字段
+        if (!options.packages || options.packages.length === 0) {
+            throw new Error('GenericPackageModal: packages array is required and cannot be empty');
+        }
+        this.options = options;
+        this.language = options.language || 'en';
+        // 创建弹框 - 根据套餐数量动态调整宽度
+        const packageCount = options.packages.length;
+        let maxWidth = '680px'; // 单个套餐默认宽度（优化宽高比，确保积分文本完整显示）
+        if (packageCount === 2) {
+            maxWidth = '1100px';
+        }
+        else if (packageCount >= 3) {
+            maxWidth = '1200px';
+        }
+        this.modal = new PaymentModal({
+            title: '', // 不显示标题
+            showCloseButton: false, // 不显示弹框关闭按钮，使用卡片内的关闭按钮
+            closeOnOverlayClick: false, // 禁用点击空白处关闭
+            closeOnEsc: true, // 允许ESC键关闭
+            maxWidth: maxWidth,
+            onClose: () => {
+                this.cleanup();
+                options.onClose?.();
+            },
+        });
+        console.log('[GenericPackageModal] Created with', options.packages.length, 'packages');
+    }
+    /**
+     * 打开弹框
+     */
+    async open() {
+        console.log('[GenericPackageModal] Opening modal...');
+        this.modal.open();
+        // 修改弹框样式 - 让卡片完全填充
+        const modalElement = document.querySelector('.payment-modal');
+        if (modalElement) {
+            modalElement.style.background = 'transparent';
+            modalElement.style.border = 'none';
+            modalElement.style.padding = '0';
+            modalElement.style.borderRadius = '16px';
+            modalElement.style.overflow = 'hidden';
+        }
+        // 修改内容容器样式 - 移除padding
+        const contentElement = document.querySelector('.payment-modal-content');
+        if (contentElement) {
+            contentElement.style.padding = '0';
+            contentElement.style.margin = '0';
+        }
+        // 监听卡片内的关闭按钮事件
+        const container = this.modal.getContentContainer();
+        if (container) {
+            container.addEventListener('close-modal', () => {
+                this.close();
+            });
+        }
+        // 渲染内容
+        this.renderContent();
+        // 添加resize监听器，窗口大小改变时重新渲染以应用响应式样式
+        this.resizeHandler = () => {
+            this.renderContent();
+        };
+        window.addEventListener('resize', this.resizeHandler);
+        // 如果配置了 sdkConfig，在后台自动初始化 SDK
+        if (!this.sdkInitialized && !this.isInitializingSDK) {
+            this.initializeSDK();
+        }
+        console.log('[GenericPackageModal] Modal opened');
+    }
+    /**
+     * 等待 SDK 初始化完成（支持超时和重试）
+     * @param timeout 超时时间（毫秒），默认 30 秒
+     * @param maxRetries 最大重试次数，默认 1 次
+     * @returns 是否初始化成功
+     */
+    async waitForSDKInitialization(timeout = 30000, maxRetries = 1) {
+        const startTime = Date.now();
+        // 如果已经初始化完成，直接返回
+        if (this.sdkInitialized) {
+            console.log('[GenericPackageModal] SDK already initialized');
+            return true;
+        }
+        // 如果还没开始初始化且有配置，主动触发
+        if (!this.isInitializingSDK && this.options.sdkConfig) {
+            console.log('[GenericPackageModal] Starting SDK initialization...');
+            await this.initializeSDK();
+            if (this.sdkInitialized) {
+                return true;
+            }
+        }
+        // 等待初始化完成
+        console.log('[GenericPackageModal] Waiting for SDK initialization...');
+        while (Date.now() - startTime < timeout) {
+            if (this.sdkInitialized) {
+                console.log('[GenericPackageModal] SDK initialization completed');
+                return true;
+            }
+            if (!this.isInitializingSDK) {
+                // 初始化已结束但未成功，尝试重试
+                if (maxRetries > 0) {
+                    console.log(`[GenericPackageModal] SDK initialization failed, retrying... (${maxRetries} retries left)`);
+                    await this.initializeSDK();
+                    return this.waitForSDKInitialization(timeout - (Date.now() - startTime), maxRetries - 1);
+                }
+                else {
+                    console.error('[GenericPackageModal] SDK initialization failed after all retries');
+                    return false;
+                }
+            }
+            // 等待 100ms 后重试
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        // 超时
+        console.error('[GenericPackageModal] SDK initialization timed out');
+        return false;
+    }
+    /**
+     * 初始化支付SDK（后台静默执行）
+     */
+    async initializeSDK() {
+        if (this.isInitializingSDK || this.sdkInitialized) {
+            return;
+        }
+        if (!this.options.sdkConfig) {
+            console.log('[GenericPackageModal] No SDK configuration provided, skipping initialization');
+            return;
+        }
+        this.isInitializingSDK = true;
+        console.log('[GenericPackageModal] Initializing payment SDK...');
+        // 显示加载指示器
+        const loader = showLoadingIndicator('Initializing payment system...');
+        try {
+            const config = this.options.sdkConfig;
+            // 1. 从环境配置中获取基础配置
+            const envConfig = ENVIRONMENT_CONFIGS[config.environment];
+            // 2. 合并配置（自定义配置优先级高于环境配置）
+            const finalConfig = {
+                scriptUrl: config.scriptUrl || envConfig.scriptUrl,
+                clientId: config.clientId || envConfig.clientId,
+                orderApiUrl: config.orderApiUrl || envConfig.orderApiUrl,
+                cssUrl: config.cssUrl || envConfig.cssUrl,
+            };
+            console.log('[GenericPackageModal] Using environment:', config.environment);
+            // 3. 初始化 SeaartPaymentSDK
+            await SeaartPaymentSDK.getInstance().init({
+                scriptUrl: finalConfig.scriptUrl,
+                clientId: finalConfig.clientId,
+                language: 'en',
+                scriptTimeout: config.scriptTimeout,
+                cssUrl: finalConfig.cssUrl,
+            });
+            // 4. 获取支付方式列表
+            const paymentMethods = await SeaartPaymentSDK.getInstance().getPaymentMethods({
+                country_code: config.countryCode,
+                business_type: config.businessType ?? 1, // 默认为 1（一次性购买）
+            });
+            // 5. 查找匹配的支付方式
+            const paymentMethod = config.paymentMethodType
+                ? paymentMethods.find((m) => m.payment_method_type === config.paymentMethodType ||
+                    m.payment_method_name.toLowerCase().includes(config.paymentMethodType.toLowerCase()))
+                : paymentMethods.find((m) => m.payment_type === 2); // 默认使用 dropin (payment_type === 2)
+            if (!paymentMethod) {
+                throw new Error(`Payment method "${config.paymentMethodType || 'dropin'}" not found`);
+            }
+            // 6. 存储到类成员变量（包括 finalConfig 以供后续使用）
+            this.paymentMethod = paymentMethod;
+            this.accountToken = config.accountToken;
+            this.sdkInitialized = true;
+            // 存储最终配置到 config 对象（用于 handlePaymentFlow）
+            this.options.sdkConfig._resolvedOrderApiUrl = finalConfig.orderApiUrl;
+            console.log('[GenericPackageModal] SDK initialized with environment config:', {
+                environment: config.environment,
+                paymentMethod: paymentMethod.payment_method_name,
+                accountToken: config.accountToken ? 'provided' : 'not provided',
+            });
+        }
+        catch (error) {
+            console.error('[GenericPackageModal] Failed to initialize payment SDK:', error);
+            // SDK 初始化失败不影响浏览套餐，只是无法进行支付
+        }
+        finally {
+            this.isInitializingSDK = false;
+            // 隐藏加载指示器
+            hideLoadingIndicator(loader);
+        }
+    }
+    /**
+     * 关闭弹框
+     */
+    close() {
+        console.log('[GenericPackageModal] Closing modal...');
+        this.modal.close();
+    }
+    /**
+     * 渲染弹框内容
+     */
+    renderContent() {
+        const container = this.modal.getContentContainer();
+        if (!container) {
+            throw new Error('Modal content container not found');
+        }
+        // 直接渲染卡片内容，不添加任何外层包装
+        container.innerHTML = this.options.packages.map((pkg, index) => this.renderPackageCard(pkg, index)).join('');
+        // 添加点击事件监听
+        this.attachEventListeners(container);
+    }
+    /**
+     * 渲染套餐卡片
+     */
+    renderPackageCard(pkg, index) {
+        const hasBonus = pkg.bonus_credits && parseInt(pkg.bonus_credits) > 0;
+        const hasBonusPercentage = pkg.bonus_percentage && pkg.bonus_percentage > 0;
+        // 根据套餐类型决定显示的标题
+        let packageTitle = '';
+        if (pkg.package_type === 'iceBreaker' || pkg.package_type === 'firstCharge') {
+            packageTitle = 'One-time Only';
+        }
+        return `
+      <div
+        data-package-id="${pkg.id}"
+        style="
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          gap: 48px;
+          border-radius: 16px;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          background: #000000;
+          padding: 80px 60px;
+          text-align: center;
+          cursor: pointer;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+        "
+        onmouseover="this.style.borderColor='rgba(255, 255, 255, 0.2)';"
+        onmouseout="this.style.borderColor='rgba(255, 255, 255, 0.1)';"
+      >
+        <!-- 套餐标题 - 卡片内顶部居中 -->
+        ${packageTitle ? `
+          <div style="
+            position: absolute;
+            top: 32px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 400;
+            color: white;
+            letter-spacing: -0.02em;
+            white-space: nowrap;
+          ">
+            ${packageTitle}
+          </div>
+        ` : ''}
+
+        <!-- 关闭按钮 - 右上角 -->
+        <button
+          onclick="this.closest('[data-package-id]').dispatchEvent(new CustomEvent('close-modal', { bubbles: true }));"
+          style="
+            position: absolute;
+            top: 24px;
+            right: 24px;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            border: none;
+            background: rgba(255, 255, 255, 0.1);
+            color: rgba(255, 255, 255, 0.7);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            line-height: 1;
+            transition: all 0.2s;
+            z-index: 100;
+          "
+          onmouseover="this.style.background='rgba(255, 255, 255, 0.2)'; this.style.color='white';"
+          onmouseout="this.style.background='rgba(255, 255, 255, 0.1)'; this.style.color='rgba(255, 255, 255, 0.7)';"
+        >
+          ×
+        </button>
+
+        <!-- 折扣标签 - 关闭按钮下方 -->
+        ${hasBonusPercentage ? `
+          <div style="
+            position: absolute;
+            top: 92px;
+            right: 30px;
+            background: linear-gradient(135deg, #fa8c42 0%, #ff5a00 100%);
+            color: white;
+            padding: 8px 16px;
+            border-radius: 8px;
+            font-size: 20px;
+            font-weight: 800;
+            box-shadow: 0 4px 16px rgba(255, 90, 0, 0.5);
+            white-space: nowrap;
+            z-index: 10;
+          ">
+            +${pkg.bonus_percentage}%
+          </div>
+        ` : ''}
+
+        <!-- 积分显示区域 - 确保不换行 -->
+        <div style="
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 0;
+          width: 100%;
+          margin-top: 60px;
+        ">
+          <div style="
+            display: flex;
+            align-items: baseline;
+            justify-content: center;
+            gap: 12px;
+            flex-wrap: nowrap;
+          ">
+            <!-- 基础积分 -->
+            <span style="
+              font-size: 80px;
+              line-height: 1;
+              font-weight: 400;
+              color: white;
+              letter-spacing: -0.04em;
+              white-space: nowrap;
+            ">
+              ${this.formatNumber(pkg.base_credits || pkg.credits)}
+            </span>
+
+            <!-- credits 文本 -->
+            <span style="
+              font-size: 52px;
+              line-height: 1;
+              font-weight: 400;
+              color: white;
+              letter-spacing: -0.04em;
+              white-space: nowrap;
+            ">
+              credits
+            </span>
+
+            <!-- 奖励积分 -->
+            ${hasBonus ? `
+              <span style="
+                font-size: 52px;
+                line-height: 1;
+                font-weight: 400;
+                color: #00ff88;
+                letter-spacing: -0.04em;
+                white-space: nowrap;
+              ">
+                +${this.formatNumber(pkg.bonus_credits)} bonus
+              </span>
+            ` : ''}
+          </div>
+        </div>
+
+        <!-- 副标题 - Valid for all platform products -->
+        <div style="
+          font-size: 22px;
+          line-height: 1.4;
+          font-weight: 300;
+          color: rgba(255, 255, 255, 0.75);
+          letter-spacing: -0.015em;
+        ">
+          Valid for all platform products
+        </div>
+
+        <!-- 购买按钮 -->
+        <button
+          data-package-button="${pkg.id}"
+          style="
+            margin-top: 0;
+            width: auto;
+            min-width: 280px;
+            max-width: 400px;
+            border-radius: 50px;
+            border: none;
+            background: linear-gradient(135deg, #00ff88 0%, #00f2fe 100%);
+            padding: 16px 48px;
+            font-size: 20px;
+            font-weight: 600;
+            color: #000000;
+            cursor: pointer;
+            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 4px 20px rgba(0, 255, 136, 0.35);
+            letter-spacing: 0.01em;
+          "
+          onmouseover="this.style.background='linear-gradient(135deg, #00ff88 0%, #00f2fe 100%)'; this.style.boxShadow='0 6px 28px rgba(0, 255, 136, 0.5)'; this.style.transform='translateY(-2px) scale(1.02)';"
+          onmouseout="this.style.background='linear-gradient(135deg, #00ff88 0%, #00f2fe 100%)'; this.style.boxShadow='0 4px 20px rgba(0, 255, 136, 0.35)'; this.style.transform='translateY(0) scale(1)';"
+        >
+          Buy $ ${pkg.price}
+        </button>
+      </div>
+    `;
+    }
+    /**
+     * 格式化数字（添加逗号）
+     */
+    formatNumber(num) {
+        return parseInt(num).toLocaleString();
+    }
+    /**
+     * 获取加载按钮的 HTML（带旋转动画）
+     */
+    getLoadingButtonHTML(text) {
+        return `
+      <svg style="
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        border-top-color: white;
+        border-radius: 50%;
+        animation: spin 0.6s linear infinite;
+      " viewBox="0 0 24 24"></svg>
+      <style>@keyframes spin { to { transform: rotate(360deg); } }</style>
+      <span style="margin-left: 8px;">${text}</span>
+    `;
+    }
+    /**
+     * 添加事件监听
+     */
+    attachEventListeners(container) {
+        // 为每个套餐按钮添加点击事件
+        this.options.packages.forEach(pkg => {
+            const button = container.querySelector(`[data-package-button="${pkg.id}"]`);
+            if (button) {
+                button.addEventListener('click', async (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    console.log('[GenericPackageModal] Package selected:', pkg.id);
+                    // 保存原始按钮文本
+                    const originalText = button.innerHTML;
+                    const originalDisabled = button.disabled;
+                    try {
+                        // 禁用按钮，显示初始化状态
+                        button.disabled = true;
+                        const isZh = this.language === 'zh-CN';
+                        button.innerHTML = this.getLoadingButtonHTML(isZh ? '初始化中...' : 'Initializing...');
+                        // 等待 SDK 初始化（支持重试）
+                        const initialized = await this.waitForSDKInitialization(30000, 1);
+                        if (!initialized) {
+                            throw new Error('SDK initialization failed or timed out. Please try again.');
+                        }
+                        // SDK 初始化成功，执行支付流程
+                        await this.handlePaymentFlow(pkg, button, originalText);
+                    }
+                    catch (error) {
+                        console.error('[GenericPackageModal] Failed to process payment:', error);
+                        // 恢复按钮状态
+                        button.disabled = originalDisabled;
+                        button.innerHTML = originalText;
+                        // 显示错误提示（使用自定义 UI 替代 alert）
+                        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+                        showErrorMessage(`Payment failed: ${errorMessage}`);
+                        // 触发失败回调
+                        this.options.onPaymentFailed?.(error instanceof Error ? error : new Error(String(error)), pkg);
+                    }
+                });
+            }
+        });
+    }
+    /**
+     * 处理支付流程
+     */
+    async handlePaymentFlow(pkg, button, originalHTML) {
+        try {
+            // 更新按钮状态为"创建订单中"
+            button.innerHTML = this.getLoadingButtonHTML('Creating order...');
+            console.log('[GenericPackageModal] Creating order for package:', pkg.id);
+            // 调用回调创建订单，或使用默认实现
+            let orderId;
+            // 使用默认实现：调用解析后的 orderApiUrl
+            const resolvedOrderApiUrl = this.options.sdkConfig._resolvedOrderApiUrl || ENVIRONMENT_CONFIGS[this.options.sdkConfig.environment].orderApiUrl;
+            const response = await createOrder(resolvedOrderApiUrl, this.options.sdkConfig.accountToken || '', {
+                product_id: pkg.id,
+                purchase_type: this.options.sdkConfig.businessType ?? 1, // 默认为 1
+            });
+            console.log('[GenericPackageModal] Create order response:', response);
+            if (!response || !response.transaction_id) {
+                throw new Error('Failed to create order: Invalid response from API');
+            }
+            orderId = response.transaction_id;
+            console.log('[GenericPackageModal] Order created:', orderId);
+            if (!orderId) {
+                throw new Error('Order ID not returned');
+            }
+            // 创建并打开支付弹框（按钮状态将在支付完成后处理）
+            await this.openPaymentModal(orderId, pkg);
+            // 支付弹框打开后，恢复按钮状态
+            button.disabled = false;
+            button.innerHTML = originalHTML;
+        }
+        catch (error) {
+            console.error('[GenericPackageModal] Payment flow failed:', error);
+            // 恢复按钮状态
+            button.disabled = false;
+            button.innerHTML = originalHTML;
+            // 显示错误提示（使用自定义 UI 替代 alert）
+            showErrorMessage(`Payment failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+            // 触发失败回调
+            this.options.onPaymentFailed?.(error instanceof Error ? error : new Error(String(error)), pkg);
+        }
+    }
+    /**
+     * 打开支付弹框
+     */
+    async openPaymentModal(orderId, pkg) {
+        if (!this.paymentMethod) {
+            throw new Error('Payment method not configured');
+        }
+        const pkgName = pkg.name;
+        // 创建支付实例（使用 orderId）
+        if (!this.sdkInitialized) {
+            throw new Error('Payment SDK not initialized. Please provide sdkConfig.');
+        }
+        const paymentInstance = window.SeaartPaymentComponent.createPayment({
+            sys_order_id: orderId,
+            account_token: this.accountToken,
+        });
+        const dropinModal = new DropinPaymentModal(paymentInstance, orderId, this.accountToken, this.paymentMethod, {
+            modalTitle: `Purchase ${pkgName}`,
+            onCompleted: (payload) => {
+                console.log('[GenericPackageModal] Payment completed:', payload);
+                this.close();
+                // 显示购买成功弹窗
+                const successModal = new PurchaseSuccessModal({
+                    data: {
+                        packName: pkg.name,
+                        credits: parseInt(pkg.credits),
+                        amount: pkg.price,
+                        currency: pkg.currency === 'USD' ? '$' : pkg.currency,
+                        orderId: orderId,
+                        transactionId: payload.transaction_id,
+                    },
+                    language: this.language,
+                    onClose: () => {
+                        // 弹窗关闭后刷新积分
+                        (async () => {
+                            try {
+                                const envConfig = ENVIRONMENT_CONFIGS[this.options.sdkConfig.environment];
+                                const walletApiUrl = envConfig.walletApiUrl;
+                                console.log('[GenericPackageModal] Refreshing credits from:', walletApiUrl);
+                                const creditDetail = await getCreditDetail(walletApiUrl, this.options.sdkConfig.accountToken);
+                                if (creditDetail) {
+                                    console.log('[GenericPackageModal] Credits refreshed, total balance:', creditDetail.total_balance);
+                                }
+                                else {
+                                    console.warn('[GenericPackageModal] Failed to refresh credits');
+                                }
+                            }
+                            catch (error) {
+                                console.error('[GenericPackageModal] Failed to refresh credits:', error);
+                            }
+                        })();
+                        // 触发用户回调
+                        this.options.onPaymentSuccess?.(orderId, payload.transaction_id, pkg);
+                    },
+                });
+                successModal.open();
+            },
+            onFailed: (payload) => {
+                console.error('[GenericPackageModal] Payment failed:', payload);
+                const error = new Error(payload.message || 'Payment failed');
+                this.options.onPaymentFailed?.(error, pkg);
+            },
+            onError: (payload, error) => {
+                console.error('[GenericPackageModal] Payment error:', error);
+                this.options.onPaymentFailed?.(error, pkg);
+            },
+        });
+        await dropinModal.open();
+    }
+    /**
+     * 清理资源
+     */
+    cleanup() {
+        console.log('[GenericPackageModal] Cleaning up...');
+        // 移除resize监听器
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
+    }
+    /**
+     * 检查弹框是否打开
+     */
+    isOpen() {
+        return this.modal.isModalOpen();
+    }
+}
+
 /**
  * @seaverse/payment-sdk
  *
@@ -1145,7 +5207,7 @@ function getSDKLocale(locale) {
 /**
  * SDK version
  */
-const VERSION$2 = '0.7.0';
+const VERSION$2 = '0.8.0';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -17705,29 +21767,63 @@ var iconYuebuzuBaakZaa_ = /*#__PURE__*/Object.freeze({
 
 exports.API_ENDPOINTS = API_ENDPOINTS$1;
 exports.BIZ_CODE = BIZ_CODE;
+exports.BindCardPaymentComponent = BindCardPaymentComponent;
 exports.COMPONENT_LOAD_TIMEOUT = COMPONENT_LOAD_TIMEOUT;
+exports.CREATIVE_POWER_TYPES = CREATIVE_POWER_TYPES;
+exports.CREDIT_PACKAGES = CREDIT_PACKAGES;
 exports.CheckoutAPI = CheckoutAPI;
+exports.CreditPackageModal = CreditPackageModal;
 exports.DEFAULT_CHECKOUT_CONFIG = DEFAULT_CHECKOUT_CONFIG;
+exports.DropinPaymentComponent = DropinPaymentComponent;
+exports.DropinPaymentModal = DropinPaymentModal;
+exports.ENVIRONMENT_CONFIGS = ENVIRONMENT_CONFIGS;
 exports.ENV_CONFIG = ENV_CONFIG;
+exports.ErrorHandler = ErrorHandler;
+exports.GRID_COLUMNS = GRID_COLUMNS;
+exports.GenericPackageModal = GenericPackageModal;
 exports.HTTP_STATUS = HTTP_STATUS;
+exports.LinkPaymentComponent = LinkPaymentComponent;
+exports.OrderPayment = OrderPayment;
 exports.PAYMENT_ELEMENT_NAME = PAYMENT_ELEMENT_NAME;
 exports.PaymentAPIError = PaymentAPIError;
 exports.PaymentCheckoutClient = PaymentCheckoutClient;
 exports.PaymentClient = PaymentClient;
+exports.PaymentError = PaymentError;
+exports.PaymentModal = PaymentModal;
+exports.PaymentStorage = PaymentStorage;
+exports.PurchaseSuccessModal = PurchaseSuccessModal;
+exports.RESPONSIVE_BREAKPOINTS = RESPONSIVE_BREAKPOINTS;
+exports.SDK_CONFIG = SDK_CONFIG;
+exports.ScriptLoader = ScriptLoader;
 exports.SeaArtPayLoader = SeaArtPayLoader;
+exports.SeaartPaymentSDK = SeaartPaymentSDK;
+exports.StylesheetLoader = StylesheetLoader;
 exports.VERSION = VERSION$2;
 exports.centsToDollars = centsToDollars;
+exports.changeSubscription = changeSubscription;
+exports.checkOrderStatus = checkOrderStatus;
 exports.createCheckoutPaymentError = createCheckoutPaymentError;
+exports.createOrder = createOrder;
 exports.delay = delay;
 exports.dollarsToCents = dollarsToCents;
 exports.formatPrice = formatPrice;
 exports.generateOrderReference = generateOrderReference;
+exports.getActiveSubscription = getActiveSubscription;
+exports.getCreditDetail = getCreditDetail;
+exports.getCurrentSubscription = getCurrentSubscription;
 exports.getCurrentUrl = getCurrentUrl;
 exports.getGlobalLoader = getGlobalLoader;
 exports.getSDKLocale = getSDKLocale;
+exports.hideLoadingIndicator = hideLoadingIndicator;
 exports.isBrowser = isBrowser;
 exports.isCheckoutPaymentError = isCheckoutPaymentError;
+exports.pollOrderStatus = pollOrderStatus;
 exports.resetGlobalLoader = resetGlobalLoader;
+exports.restartSubscription = restartSubscription;
 exports.safeJsonParse = safeJsonParse;
+exports.showErrorMessage = showErrorMessage;
+exports.showInfoMessage = showInfoMessage;
+exports.showLoadingIndicator = showLoadingIndicator;
+exports.showSuccessMessage = showSuccessMessage;
 exports.withTimeout = withTimeout;
 //# sourceMappingURL=index.cjs.map