@seaverse/payment-sdk 0.8.1 → 0.8.2

package/dist/index.cjs

@@ -4221,184 +4221,94 @@ class PurchaseSuccessModal {
 }
 
 /**
- * CreditPackageModal - 积分套餐选择弹框
- * 展示不同的积分套餐供用户选择
+ * BasePackageModal - Abstract base class for package modals
+ * Provides shared logic for SDK initialization, payment flow, and event handling
+ */
+/**
+ * Abstract base class for package modals
+ * Provides common functionality for SDK initialization, payment flow, and event handling
  */
-class CreditPackageModal {
+class BasePackageModal {
+    // === Constructor ===
     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');
+        this.modal = this.createModal();
+        console.log(`[${this.constructor.name}] Created`);
     }
+    // === Public Methods ===
     /**
-     * 打开弹框
+     * Open the modal
      */
     async open() {
-        console.log('[CreditPackageModal] Opening modal...');
+        console.log(`[${this.constructor.name}] 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());
-        }
-        // 渲染内容
+        // Hook for subclass-specific styling
+        this.applyModalStyling();
+        // Render content (abstract method)
         this.renderContent();
-        // 添加resize监听器，窗口大小改变时重新渲染以应用响应式样式
-        this.resizeHandler = () => {
-            this.renderContent();
-        };
+        // Add resize listener
+        this.resizeHandler = () => this.renderContent();
         window.addEventListener('resize', this.resizeHandler);
-        // 如果配置了 initPaymentSDK，在后台自动初始化 SDK
+        // Initialize SDK in background
         if (!this.sdkInitialized && !this.isInitializingSDK) {
             this.initializeSDK();
         }
-        console.log('[CreditPackageModal] Modal opened');
+        console.log(`[${this.constructor.name}] Modal opened`);
     }
     /**
-     * 等待 SDK 初始化完成（支持超时和重试）
-     * @param timeout 超时时间（毫秒），默认 30 秒
-     * @param maxRetries 最大重试次数，默认 1 次
-     * @returns 是否初始化成功
+     * Close the modal
      */
-    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;
+    close() {
+        console.log(`[${this.constructor.name}] Closing modal...`);
+        this.modal.close();
     }
     /**
-     * 初始化支付SDK（后台静默执行）
+     * Check if modal is open
+     */
+    isOpen() {
+        return this.modal.isModalOpen();
+    }
+    // === Protected Hook Methods (can be overridden by subclasses) ===
+    /**
+     * Apply modal styling (hook method)
+     * Subclasses can override to customize modal appearance
+     */
+    applyModalStyling() {
+        // Default: no custom styling
+    }
+    // === Protected Shared Methods ===
+    /**
+     * Initialize payment SDK (identical in both classes)
      */
     async initializeSDK() {
         if (this.isInitializingSDK || this.sdkInitialized) {
             return;
         }
         if (!this.options.sdkConfig) {
-            console.log('[CreditPackageModal] No SDK configuration provided, skipping initialization');
+            console.log(`[${this.constructor.name}] No SDK configuration provided, skipping initialization`);
             return;
         }
         this.isInitializingSDK = true;
-        console.log('[CreditPackageModal] Initializing payment SDK...');
-        // 显示加载指示器
+        console.log(`[${this.constructor.name}] Initializing payment SDK...`);
+        // Show loading indicator
         const loader = showLoadingIndicator('Initializing payment system...');
         try {
             const config = this.options.sdkConfig;
-            // 1. 从环境配置中获取基础配置
+            // 1. Get base configuration from environment
             const envConfig = ENVIRONMENT_CONFIGS[config.environment];
-            // 2. 合并配置（自定义配置优先级高于环境配置）
+            // 2. Merge configuration (custom config has higher priority)
             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
+            console.log(`[${this.constructor.name}] Using environment:`, config.environment);
+            // 3. Initialize SeaartPaymentSDK
             await SeaartPaymentSDK.getInstance().init({
                 scriptUrl: finalConfig.scriptUrl,
                 clientId: finalConfig.clientId,
@@ -4406,84 +4316,388 @@ class CreditPackageModal {
                 scriptTimeout: config.scriptTimeout,
                 cssUrl: finalConfig.cssUrl,
             });
-            // 4. 获取支付方式列表
+            // 4. Get payment methods list
             const paymentMethods = await SeaartPaymentSDK.getInstance().getPaymentMethods({
                 country_code: config.countryCode,
-                business_type: config.businessType ?? 1, // 默认为 1（一次性购买）
+                business_type: config.businessType ?? 1, // Default to 1 (one-time purchase)
             });
-            // 5. 查找匹配的支付方式
+            // 5. Find matching payment method
             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)
+                : paymentMethods.find((m) => m.payment_type === 2); // Default to 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;
+            // 6. Store to class members (including finalConfig for later use)
+            this.paymentMethod = paymentMethod;
+            this.accountToken = config.accountToken;
             this.sdkInitialized = true;
-            // 存储最终配置到 config 对象（用于 handlePaymentFlow）
+            // Store final config to config object (for handlePaymentFlow)
             this.options.sdkConfig._resolvedOrderApiUrl = finalConfig.orderApiUrl;
-            console.log('[CreditPackageModal] SDK initialized with environment config:', {
+            console.log(`[${this.constructor.name}] 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 初始化失败不影响浏览积分包，只是无法进行支付
+            console.error(`[${this.constructor.name}] Failed to initialize payment SDK:`, error);
+            // SDK initialization failure does not affect browsing packages, just cannot make payments
         }
         finally {
             this.isInitializingSDK = false;
-            // 隐藏加载指示器
+            // Hide loading indicator
             hideLoadingIndicator(loader);
         }
     }
     /**
-     * 关闭弹框
+     * Wait for SDK initialization with timeout and retry
+     * @param timeout Timeout in milliseconds (default 30 seconds)
+     * @param maxRetries Maximum retry count (default 1)
+     * @returns Whether initialization succeeded
      */
-    close() {
-        console.log('[CreditPackageModal] Closing modal...');
-        this.modal.close();
+    async waitForSDKInitialization(timeout = 30000, maxRetries = 1) {
+        const startTime = Date.now();
+        // If already initialized, return immediately
+        if (this.sdkInitialized) {
+            console.log(`[${this.constructor.name}] SDK already initialized`);
+            return true;
+        }
+        // If not started initializing and has config, trigger initialization
+        if (!this.isInitializingSDK && this.options.sdkConfig) {
+            console.log(`[${this.constructor.name}] Starting SDK initialization...`);
+            await this.initializeSDK();
+            if (this.sdkInitialized) {
+                return true;
+            }
+        }
+        // Wait for initialization to complete
+        console.log(`[${this.constructor.name}] Waiting for SDK initialization...`);
+        while (Date.now() - startTime < timeout) {
+            if (this.sdkInitialized) {
+                console.log(`[${this.constructor.name}] SDK initialization completed`);
+                return true;
+            }
+            if (!this.isInitializingSDK) {
+                // Initialization ended but not successful, try retry
+                if (maxRetries > 0) {
+                    console.log(`[${this.constructor.name}] SDK initialization failed, retrying... (${maxRetries} retries left)`);
+                    await this.initializeSDK();
+                    return this.waitForSDKInitialization(timeout - (Date.now() - startTime), maxRetries - 1);
+                }
+                else {
+                    console.error(`[${this.constructor.name}] SDK initialization failed after all retries`);
+                    return false;
+                }
+            }
+            // Wait 100ms before retry
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        // Timeout
+        console.error(`[${this.constructor.name}] SDK initialization timed out`);
+        return false;
     }
     /**
-     * 获取响应式样式配置
+     * Handle payment flow (order creation + payment modal)
      */
-    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';
+    async handlePaymentFlow(pkg, button, originalHTML) {
+        try {
+            // Update button state to "Creating order"
+            button.innerHTML = this.getLoadingButtonHTML('Creating order...');
+            console.log(`[${this.constructor.name}] Creating order for package:`, pkg.id);
+            // Use default implementation: call resolved 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, // Default to 1
+            });
+            console.log(`[${this.constructor.name}] 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(`[${this.constructor.name}] Order created:`, orderId);
+            // Restore button state
+            button.disabled = false;
+            button.innerHTML = originalHTML;
+            // Create and open payment modal
+            await this.openPaymentModal(orderId, pkg);
+        }
+        catch (error) {
+            console.error(`[${this.constructor.name}] Payment flow failed:`, error);
+            // Restore button state
+            button.disabled = false;
+            button.innerHTML = originalHTML;
+            // Show error message (use custom UI instead of alert)
+            showErrorMessage(`Payment failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+            // Trigger failure callback
+            this.options.onPaymentFailed?.(error instanceof Error ? error : new Error(String(error)), pkg);
+        }
+    }
+    /**
+     * Open payment modal (DropinPaymentModal + PurchaseSuccessModal)
+     */
+    async openPaymentModal(orderId, pkg) {
+        if (!this.paymentMethod) {
+            throw new Error('Payment method not configured');
+        }
+        const pkgName = this.getPackageDisplayName(pkg);
+        // Create payment instance (using 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(`[${this.constructor.name}] Payment completed:`, payload);
+                this.close();
+                // Show purchase success modal
+                const successModal = new PurchaseSuccessModal({
+                    data: {
+                        packName: pkgName,
+                        credits: parseInt(pkg.credits),
+                        amount: pkg.price,
+                        currency: pkg.currency === 'USD' ? '$' : pkg.currency,
+                        orderId: orderId,
+                        transactionId: payload.transaction_id,
+                    },
+                    language: this.language,
+                    onClose: () => {
+                        // Refresh credits after modal closes
+                        (async () => {
+                            try {
+                                const envConfig = ENVIRONMENT_CONFIGS[this.options.sdkConfig.environment];
+                                const walletApiUrl = envConfig.walletApiUrl;
+                                console.log(`[${this.constructor.name}] Refreshing credits from:`, walletApiUrl);
+                                const creditDetail = await getCreditDetail(walletApiUrl, this.options.sdkConfig.accountToken);
+                                if (creditDetail) {
+                                    console.log(`[${this.constructor.name}] Credits refreshed, total balance:`, creditDetail.total_balance);
+                                }
+                                else {
+                                    console.warn(`[${this.constructor.name}] Failed to refresh credits`);
+                                }
+                            }
+                            catch (error) {
+                                console.error(`[${this.constructor.name}] Failed to refresh credits:`, error);
+                            }
+                        })();
+                        // Trigger user callback
+                        this.options.onPaymentSuccess?.(orderId, payload.transaction_id, pkg);
+                    },
+                });
+                successModal.open();
+            },
+            onFailed: (payload) => {
+                console.error(`[${this.constructor.name}] Payment failed:`, payload);
+                const error = new Error(payload.message || 'Payment failed');
+                this.options.onPaymentFailed?.(error, pkg);
+            },
+            onError: (payload, error) => {
+                console.error(`[${this.constructor.name}] Payment error:`, error);
+                this.options.onPaymentFailed?.(error, pkg);
+            },
+        });
+        await dropinModal.open();
+    }
+    /**
+     * Attach event listeners to package buttons
+     */
+    attachEventListeners(container) {
+        const packages = this.getPackages();
+        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(`[${this.constructor.name}] Package selected:`, pkg.id);
+                    const originalText = button.innerHTML;
+                    const originalDisabled = button.disabled;
+                    try {
+                        // Disable button, show initializing state
+                        button.disabled = true;
+                        const isZh = this.language === 'zh-CN';
+                        button.innerHTML = this.getLoadingButtonHTML(isZh ? '初始化中...' : 'Initializing...');
+                        // Wait for SDK initialization (with retry)
+                        const initialized = await this.waitForSDKInitialization(30000, 1);
+                        if (!initialized) {
+                            throw new Error('SDK initialization failed or timed out. Please try again.');
+                        }
+                        // SDK initialization successful, execute payment flow
+                        await this.handlePaymentFlow(pkg, button, originalText);
+                    }
+                    catch (error) {
+                        console.error(`[${this.constructor.name}] Failed to process payment:`, error);
+                        // Restore button state
+                        button.disabled = originalDisabled;
+                        button.innerHTML = originalText;
+                        // Show error message (use custom UI instead of alert)
+                        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+                        showErrorMessage(`Payment failed: ${errorMessage}`);
+                        // Trigger failure callback
+                        this.options.onPaymentFailed?.(error instanceof Error ? error : new Error(String(error)), pkg);
+                    }
+                });
+            }
+        });
+    }
+    /**
+     * Cleanup resources
+     */
+    cleanup() {
+        console.log(`[${this.constructor.name}] Cleaning up...`);
+        // Remove resize listener
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
+    }
+    // === Utility Methods ===
+    /**
+     * Format number with commas
+     */
+    formatNumber(num) {
+        return parseInt(num).toLocaleString();
+    }
+    /**
+     * Get content container from modal
+     */
+    getContentContainer() {
+        return this.modal.getContentContainer();
+    }
+}
+
+/**
+ * CreditPackageModal - 积分套餐选择弹框
+ * 展示不同的积分套餐供用户选择
+ */
+class CreditPackageModal extends BasePackageModal {
+    constructor() {
+        super(...arguments);
+        // Design system constants
+        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',
+            },
+        };
+    }
+    // === Abstract Method Implementations ===
+    /**
+     * Create and configure the PaymentModal instance
+     */
+    createModal() {
+        return new PaymentModal({
+            title: this.language === 'zh-CN'
+                ? (this.options.title_cn || '选择您的创作力量')
+                : (this.options.title || 'Choose Your Creative Power'),
+            showCloseButton: true,
+            closeOnOverlayClick: false, // Disable click overlay to close
+            closeOnEsc: false, // Disable ESC key to close
+            maxWidth: '1200px',
+            onClose: () => {
+                this.cleanup();
+                this.options.onClose?.();
+            },
+        });
+    }
+    /**
+     * Get packages to display
+     */
+    getPackages() {
+        return CREDIT_PACKAGES;
+    }
+    /**
+     * Get package display name for payment modal title
+     */
+    getPackageDisplayName(pkg) {
+        const isZh = this.language === 'zh-CN';
+        return isZh ? `${pkg.credits} 积分套餐` : `${pkg.credits} Credits Package`;
+    }
+    /**
+     * Get loading button HTML with spinner
+     */
+    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>` : ''}
+    `;
+    }
+    /**
+     * Apply modal styling (hook method override)
+     */
+    applyModalStyling() {
+        // Modify modal background to dark
+        const modalElement = document.querySelector('.payment-modal');
+        if (modalElement) {
+            modalElement.style.background = '#0a0a0f';
+            modalElement.style.border = '1px solid rgba(255, 255, 255, 0.1)';
         }
-        else if (isTablet) {
-            computeColumns = 2;
-            packColumns = 2;
-            padding = '0 30px 30px';
+        // Modify title style
+        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';
         }
-        else if (isLaptop) {
-            computeColumns = 3;
-            packColumns = 2;
-            padding = '0 40px 40px';
+        // Modify close button color and add hover animation
+        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)';
+            // Remove old event listeners (if any)
+            const newCloseButton = closeButton.cloneNode(true);
+            closeButton.parentNode?.replaceChild(newCloseButton, closeButton);
+            // Add hover animation
+            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());
         }
-        return {
-            containerPadding: padding,
-            computeGridColumns: `repeat(${computeColumns}, 1fr)`,
-            packGridColumns: `repeat(${packColumns}, 1fr)`,
-        };
     }
     /**
-     * 渲染弹框内容
+     * Render modal content
      */
     renderContent() {
-        const container = this.modal.getContentContainer();
+        const container = this.getContentContainer();
         if (!container) {
             throw new Error('Modal content container not found');
         }
@@ -4496,7 +4710,7 @@ class CreditPackageModal {
         color: white;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       ">
-        <!-- 副标题 -->
+        <!-- Subtitle -->
         <p style="
           text-align: center;
           font-size: 16px;
@@ -4506,11 +4720,11 @@ class CreditPackageModal {
           font-weight: 400;
         ">
           ${isZh
-            ? (this.options.subtitle_cn || '免费开始，随创作扩展。所有套餐都包含用于电影、游戏、音乐和世界的算力积分。')
+            ? (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 -->
+        <!-- Compute credits section - fully replicate next-meta pricing -->
         <div style="margin-bottom: ${this.SPACING.xl};">
           <!-- Section Header -->
           <div style="margin-bottom: ${this.SPACING.xl}; text-align: center;">
@@ -4534,221 +4748,18 @@ class CreditPackageModal {
             </p>
           </div>
 
-          <!-- Credits Grid - 完全复刻 next-meta 的 5 个卡片 -->
+          <!-- Credits Grid - fully replicate next-meta 5 cards -->
           <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>
+            ${this.renderComputeCreditsCards()}
           </div>
         </div>
 
-        <!-- Credit Packs - 积分包购买标题 -->
+        <!-- Credit Packs - credit package purchase title -->
         <div style="margin: 0 auto ${this.SPACING.lg}; max-width: 80rem; text-align: center;">
           <h3 style="
             margin-bottom: ${this.SPACING.xs};
@@ -4771,7 +4782,7 @@ class CreditPackageModal {
           </p>
         </div>
 
-        <!-- 套餐卡片 -->
+        <!-- Package cards -->
         <div style="
           display: grid;
           grid-template-columns: ${styles.packGridColumns};
@@ -4781,17 +4792,133 @@ class CreditPackageModal {
         </div>
       </div>
     `;
-        // 添加点击事件监听
+        // Attach event listeners
         this.attachEventListeners(container);
     }
+    // === Private Helper Methods ===
+    /**
+     * Get responsive style configuration
+     */
+    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)`,
+        };
+    }
+    /**
+     * Render compute credits cards
+     */
+    renderComputeCreditsCards() {
+        const isZh = this.language === 'zh-CN';
+        const cards = [
+            {
+                icon: '<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"/>',
+                gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                title: isZh ? '电影片段' : 'Film Clips',
+                credits: '100-300',
+                description: isZh ? '每次生成' : 'per generation',
+            },
+            {
+                icon: '<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"/>',
+                gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+                title: isZh ? '游戏场景' : 'Game Scenes',
+                credits: '50-200',
+                description: isZh ? '每个场景' : 'per scene',
+            },
+            {
+                icon: '<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"/>',
+                gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+                title: isZh ? '音乐' : 'Music',
+                credits: '30-100',
+                description: isZh ? '每首曲目' : 'per track',
+            },
+            {
+                icon: '<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"/>',
+                gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
+                title: isZh ? '3D 世界' : '3D Worlds',
+                credits: '150-500',
+                description: isZh ? '每个世界' : 'per world',
+            },
+            {
+                icon: '<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"/>',
+                gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
+                title: isZh ? 'AI 会话' : 'Agent Sessions',
+                credits: '10',
+                description: isZh ? '每次会话' : 'per session',
+            },
+        ];
+        return cards.map(card => `
+      <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: ${card.gradient};
+          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">
+            ${card.icon}
+          </svg>
+        </div>
+        <h3 style="margin-bottom: 8px; font-size: 16px; font-weight: 600; color: white;">
+          ${card.title}
+        </h3>
+        <p style="margin-bottom: 8px; font-family: 'Monaco', 'Menlo', monospace; font-size: 20px; font-weight: 800; color: #00ff88;">
+          ${card.credits}
+        </p>
+        <p style="font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.5);">
+          ${card.description}
+        </p>
+      </article>
+    `).join('');
+    }
     /**
-     * 渲染套餐卡片
+     * Render package card
      */
     renderPackageCard(pkg, index) {
         const isZh = this.language === 'zh-CN';
         const isPopular = pkg.is_popular;
-        const hasBonus = parseInt(pkg.bonus_credits) > 0;
-        // Popular包的呼吸动画
+        const hasBonus = pkg.bonus_credits && parseInt(pkg.bonus_credits) > 0;
+        // Popular package breathing animation
         const pulseAnimation = isPopular ? `
       <style>
         @keyframes pulse-${pkg.id} {
@@ -4851,7 +4978,7 @@ class CreditPackageModal {
           </div>
         ` : ''}
 
-        <!-- 积分总数 -->
+        <!-- Total credits -->
         <div style="
           margin-bottom: 8px;
           font-size: 36px;
@@ -4863,7 +4990,7 @@ class CreditPackageModal {
           ${this.formatNumber(pkg.credits)}
         </div>
 
-        <!-- 积分明细 -->
+        <!-- Credits breakdown -->
         <div style="
           margin-bottom: 12px;
           display: flex;
@@ -4877,7 +5004,7 @@ class CreditPackageModal {
             font-weight: 500;
             color: hsl(240, 5%, 65%);
           ">
-            ${this.formatNumber(pkg.base_credits)} ${isZh ? '积分' : 'Credits'}
+            ${this.formatNumber(pkg.base_credits || pkg.credits)} ${isZh ? '积分' : 'Credits'}
           </span>
           ${hasBonus ? `
             <span style="
@@ -4893,7 +5020,7 @@ class CreditPackageModal {
           ` : ''}
         </div>
 
-        <!-- 购买按钮 -->
+        <!-- Buy button -->
         <button
           data-package-button="${pkg.id}"
           style="
@@ -4918,202 +5045,6 @@ class CreditPackageModal {
       </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();
-    }
 }
 
 /**
@@ -5121,46 +5052,75 @@ class CreditPackageModal {
  * 支持多种套餐类型（破冰包、告急包、首充包等）
  * 套餐数据从外部配置传入,无硬编码
  */
-class GenericPackageModal {
+class GenericPackageModal extends BasePackageModal {
     constructor(options) {
-        this.resizeHandler = null;
-        this.isInitializingSDK = false;
-        this.sdkInitialized = false;
-        // 验证必填字段
+        // Validate required fields
         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'; // 单个套餐默认宽度（优化宽高比，确保积分文本完整显示）
+        super(options);
+    }
+    // === Abstract Method Implementations ===
+    /**
+     * Create and configure the PaymentModal instance
+     */
+    createModal() {
+        // Dynamically adjust width based on package count
+        const packageCount = this.options.packages.length;
+        let maxWidth = '680px'; // Single package default width (optimized aspect ratio, ensure credit text is fully displayed)
         if (packageCount === 2) {
             maxWidth = '1100px';
         }
         else if (packageCount >= 3) {
             maxWidth = '1200px';
         }
-        this.modal = new PaymentModal({
-            title: '', // 不显示标题
-            showCloseButton: false, // 不显示弹框关闭按钮，使用卡片内的关闭按钮
-            closeOnOverlayClick: false, // 禁用点击空白处关闭
-            closeOnEsc: true, // 允许ESC键关闭
+        return new PaymentModal({
+            title: '', // No title
+            showCloseButton: false, // No modal close button, use card close button
+            closeOnOverlayClick: false, // Disable click overlay to close
+            closeOnEsc: true, // Allow ESC key to close
             maxWidth: maxWidth,
             onClose: () => {
                 this.cleanup();
-                options.onClose?.();
+                this.options.onClose?.();
             },
         });
-        console.log('[GenericPackageModal] Created with', options.packages.length, 'packages');
     }
     /**
-     * 打开弹框
+     * Get packages to display
+     */
+    getPackages() {
+        return this.options.packages;
+    }
+    /**
+     * Get package display name for payment modal title
+     */
+    getPackageDisplayName(pkg) {
+        return pkg.name;
+    }
+    /**
+     * Get loading button HTML with spinner
+     */
+    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>
+    `;
+    }
+    /**
+     * Apply modal styling (hook method override)
      */
-    async open() {
-        console.log('[GenericPackageModal] Opening modal...');
-        this.modal.open();
-        // 修改弹框样式 - 让卡片完全填充
+    applyModalStyling() {
+        // Modify modal style - make card fully fill
         const modalElement = document.querySelector('.payment-modal');
         if (modalElement) {
             modalElement.style.background = 'transparent';
@@ -5169,176 +5129,41 @@ class GenericPackageModal {
             modalElement.style.borderRadius = '16px';
             modalElement.style.overflow = 'hidden';
         }
-        // 修改内容容器样式 - 移除padding
+        // Modify content container style - remove padding
         const contentElement = document.querySelector('.payment-modal-content');
         if (contentElement) {
             contentElement.style.padding = '0';
             contentElement.style.margin = '0';
         }
-        // 监听卡片内的关闭按钮事件
-        const container = this.modal.getContentContainer();
+        // Listen for close button event from card
+        const container = this.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();
     }
     /**
-     * 渲染弹框内容
+     * Render modal content
      */
     renderContent() {
-        const container = this.modal.getContentContainer();
+        const container = this.getContentContainer();
         if (!container) {
             throw new Error('Modal content container not found');
         }
-        // 直接渲染卡片内容，不添加任何外层包装
+        // Directly render card content without any outer wrapper
         container.innerHTML = this.options.packages.map((pkg, index) => this.renderPackageCard(pkg, index)).join('');
-        // 添加点击事件监听
+        // Attach event listeners
         this.attachEventListeners(container);
     }
+    // === Private Helper Methods ===
     /**
-     * 渲染套餐卡片
+     * Render package card
      */
     renderPackageCard(pkg, index) {
         const hasBonus = pkg.bonus_credits && parseInt(pkg.bonus_credits) > 0;
         const hasBonusPercentage = pkg.bonus_percentage && pkg.bonus_percentage > 0;
-        // 根据套餐类型决定显示的标题
+        // Determine title based on package type
         let packageTitle = '';
         if (pkg.package_type === 'iceBreaker' || pkg.package_type === 'firstCharge') {
             packageTitle = 'One-time Only';
@@ -5367,7 +5192,7 @@ class GenericPackageModal {
         onmouseover="this.style.borderColor='rgba(255, 255, 255, 0.2)';"
         onmouseout="this.style.borderColor='rgba(255, 255, 255, 0.1)';"
       >
-        <!-- 套餐标题 - 卡片内顶部居中 -->
+        <!-- Package title - top center of card -->
         ${packageTitle ? `
           <div style="
             position: absolute;
@@ -5385,7 +5210,7 @@ class GenericPackageModal {
           </div>
         ` : ''}
 
-        <!-- 关闭按钮 - 右上角 -->
+        <!-- Close button - top right -->
         <button
           onclick="this.closest('[data-package-id]').dispatchEvent(new CustomEvent('close-modal', { bubbles: true }));"
           style="
@@ -5413,7 +5238,7 @@ class GenericPackageModal {
           ×
         </button>
 
-        <!-- 折扣标签 - 关闭按钮下方 -->
+        <!-- Discount tag - below close button -->
         ${hasBonusPercentage ? `
           <div style="
             position: absolute;
@@ -5433,7 +5258,7 @@ class GenericPackageModal {
           </div>
         ` : ''}
 
-        <!-- 积分显示区域 - 确保不换行 -->
+        <!-- Credits display area - ensure no line break -->
         <div style="
           display: flex;
           flex-direction: column;
@@ -5450,7 +5275,7 @@ class GenericPackageModal {
             gap: 12px;
             flex-wrap: nowrap;
           ">
-            <!-- 基础积分 -->
+            <!-- Base credits -->
             <span style="
               font-size: 80px;
               line-height: 1;
@@ -5462,7 +5287,7 @@ class GenericPackageModal {
               ${this.formatNumber(pkg.base_credits || pkg.credits)}
             </span>
 
-            <!-- credits 文本 -->
+            <!-- credits text -->
             <span style="
               font-size: 52px;
               line-height: 1;
@@ -5474,7 +5299,7 @@ class GenericPackageModal {
               credits
             </span>
 
-            <!-- 奖励积分 -->
+            <!-- Bonus credits -->
             ${hasBonus ? `
               <span style="
                 font-size: 52px;
@@ -5490,7 +5315,7 @@ class GenericPackageModal {
           </div>
         </div>
 
-        <!-- 副标题 - Valid for all platform products -->
+        <!-- Subtitle - Valid for all platform products -->
         <div style="
           font-size: 22px;
           line-height: 1.4;
@@ -5501,7 +5326,7 @@ class GenericPackageModal {
           Valid for all platform products
         </div>
 
-        <!-- 购买按钮 -->
+        <!-- Buy button -->
         <button
           data-package-button="${pkg.id}"
           style="
@@ -5529,201 +5354,6 @@ class GenericPackageModal {
       </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();
-    }
 }
 
 /**