@seaverse/payment-sdk 0.8.0 → 0.8.2

package/dist/index.cjs

@@ -986,11 +986,33 @@ function centsToDollars(cents) {
 function formatPrice(amount, currency = 'USD') {
     const symbols = {
         USD: '$',
-        CNY: '¥',
         EUR: '€',
         GBP: '£',
         JPY: '¥',
+        CNY: '¥',
         KRW: '₩',
+        AUD: 'A$',
+        CAD: 'C$',
+        CHF: 'CHF',
+        HKD: 'HK$',
+        SGD: 'S$',
+        INR: '₹',
+        RUB: '₽',
+        BRL: 'R$',
+        MXN: 'MX$',
+        ZAR: 'R',
+        SEK: 'kr',
+        NOK: 'kr',
+        DKK: 'kr',
+        PLN: 'zł',
+        THB: '฿',
+        IDR: 'Rp',
+        MYR: 'RM',
+        PHP: '₱',
+        VND: '₫',
+        TRY: '₺',
+        AED: 'د.إ',
+        SAR: 'SR',
     };
     const symbol = symbols[currency] || currency + ' ';
     return `${symbol}${amount.toFixed(2)}`;
@@ -2143,222 +2165,771 @@ class PaymentModal {
 }
 
 /**
- * DropinPaymentModal - Dropin 支付弹框
- * 封装 DropinPaymentComponent 并在弹框中展示
+ * RetentionModal - 支付挽留弹框
+ * 当用户尝试取消支付时弹出，提供优惠信息以挽留用户
+ * 参考图片中的深色卡片设计风格
  */
-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,
-        });
+/**
+ * 支付挽留弹框类
+ */
+class RetentionModal {
+    constructor(options) {
+        this.overlay = null;
+        this.modal = null;
+        this.isExiting = false;
+        this.scrollY = 0;
+        this.boundHandleEscKey = null;
+        this.countdownInterval = null;
+        this.remainingSeconds = 60;
+        this.options = {
+            language: 'en',
+            bonusAmount: 0,
+            onClose: () => { },
+            ...options,
+        };
     }
     /**
-     * 打开弹框并渲染支付组件
+     * 打开弹框
      */
-    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;
-        }
+    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();
+        // 启动倒计时
+        this.startCountdown();
     }
     /**
      * 关闭弹框
      */
     close() {
-        console.log('[DropinPaymentModal] Closing modal...');
-        this.modal.close();
-    }
-    /**
-     * 清理资源
-     */
-    cleanup() {
-        console.log('[DropinPaymentModal] Cleaning up...');
-        if (this.dropinPayment) {
-            this.dropinPayment.destroy();
-            this.dropinPayment = null;
+        if (this.isExiting || !this.overlay)
+            return;
+        this.isExiting = true;
+        // 停止倒计时
+        this.stopCountdown();
+        // 添加退出动画
+        this.overlay.style.animation = 'fadeOut 0.3s ease-in';
+        if (this.modal) {
+            this.modal.style.animation = 'slideOutDown 0.3s ease-in';
         }
-        this.containerElement = null;
+        // 300ms 后移除元素
+        setTimeout(() => {
+            this.cleanup();
+            this.options.onClose?.();
+        }, 300);
     }
     /**
-     * 显示加载状态
+     * 创建弹框元素
      */
-    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;
+    createModal() {
+        const { language, productName, purchaseAmount, bonusAmount, discountPrice } = this.options;
+        const isZh = language === 'zh-CN';
+        const texts = isZh ? {
+            title: '你有一笔订单待支付',
+            timePrefix: '请在',
+            timeSuffix: '内支付，超时自动取消',
+            productLabel: '商品：',
+            bonusLabel: '活动赠送：',
+            discountLabel: '优惠价：',
+            cancelButton: '取消',
+            continueButton: '继续支付',
+        } : {
+            title: 'You have a pending order',
+            timePrefix: 'Please pay within',
+            timeSuffix: 'or the order will be automatically cancelled',
+            productLabel: 'Product:',
+            bonusLabel: 'Bonus:',
+            discountLabel: 'Discount:',
+            cancelButton: 'Cancel',
+            continueButton: 'Continue Payment',
+        };
+        // 创建遮罩层
+        this.overlay = document.createElement('div');
+        this.overlay.id = 'retention-modal-overlay';
+        this.overlay.style.cssText = `
+      position: fixed;
+      inset: 0;
+      z-index: 10002;
       display: flex;
       align-items: center;
       justify-content: center;
-      background: rgba(0, 0, 0, 0.3);
-      backdrop-filter: blur(2px);
-      z-index: 10;
+      padding: 20px;
+      background: rgba(0, 0, 0, 0.85);
+      backdrop-filter: blur(8px);
+      animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     `;
-        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>
+        // 创建弹框卡片
+        this.modal = document.createElement('div');
+        this.modal.style.cssText = `
+      position: relative;
+      width: 90vw;
+      max-width: 654px;
+      border-radius: 24px;
+      background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
+      animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      overflow: hidden;
     `;
-        // 添加旋转动画
-        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 {
-    /**
+        this.modal.innerHTML = `
+      <!-- 关闭按钮 -->
+      <button
+        type="button"
+        id="retention-modal-close-btn"
+        style="
+          position: absolute;
+          top: 20px;
+          right: 20px;
+          z-index: 10;
+          display: flex;
+          width: 32px;
+          height: 32px;
+          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="20" height="20" 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="
+        padding: 40px 32px 24px;
+        text-align: center;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      ">
+        <h2 style="
+          margin: 0 0 16px;
+          font-size: 24px;
+          font-weight: 600;
+          color: white;
+        ">${texts.title}</h2>
+
+        <!-- 倒计时 -->
+        <p style="
+          margin: 0;
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.6);
+        ">
+          ${texts.timePrefix} <span id="countdown-display" style="color: #fc8181; font-weight: 600;">00:15:00</span> ${texts.timeSuffix}
+        </p>
+      </div>
+
+      <!-- 内容区域 -->
+      <div style="padding: 32px;">
+        <!-- 订单详情卡片 -->
+        <div style="
+          border-radius: 16px;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          background: rgba(0, 0, 0, 0.3);
+          padding: 24px;
+        ">
+          <!-- 商品信息 -->
+          <div style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-bottom: 16px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            margin-bottom: 16px;
+          ">
+            <span style="
+              font-size: 14px;
+              color: rgba(255, 255, 255, 0.6);
+            ">${texts.productLabel}</span>
+            <span style="
+              font-size: 14px;
+              font-weight: 600;
+              color: white;
+            ">${this.escapeHtml(productName)}</span>
+          </div>
+
+          <!-- 活动赠送（可选） -->
+          ${bonusAmount ? `
+            <div style="
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              padding-bottom: 16px;
+              margin-bottom: 16px;
+            ">
+              <span style="
+                font-size: 14px;
+                color: rgba(255, 255, 255, 0.6);
+              ">${texts.bonusLabel}</span>
+              <span style="
+                font-size: 14px;
+                font-weight: 600;
+                color: white;
+              ">${bonusAmount.toLocaleString()}</span>
+            </div>
+          ` : ''}
+
+          <!-- 优惠价 -->
+          <div style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(90deg, rgba(168, 85, 247, 0.1) 0%, transparent 100%);
+            padding: 16px;
+            margin: 0 -24px -24px;
+            border-radius: 0 0 16px 16px;
+          ">
+            <span style="
+              font-size: 14px;
+              color: rgba(255, 255, 255, 0.6);
+            ">${texts.discountLabel}</span>
+            <span style="
+              font-size: 18px;
+              font-weight: 700;
+              color: #a855f7;
+            ">${this.escapeHtml(discountPrice)}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部按钮组 -->
+      <div style="
+        display: flex;
+        gap: 12px;
+        padding: 0 32px 32px;
+      ">
+        <!-- 取消按钮 -->
+        <button
+          type="button"
+          id="retention-cancel-btn"
+          style="
+            flex: 1;
+            padding: 14px 24px;
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            background: transparent;
+            color: white;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+          "
+        >
+          ${texts.cancelButton}
+        </button>
+
+        <!-- 继续支付按钮 -->
+        <button
+          type="button"
+          id="retention-continue-btn"
+          style="
+            flex: 1;
+            padding: 14px 24px;
+            border-radius: 12px;
+            border: none;
+            background: linear-gradient(135deg, #00ff88 0%, #00f2fe 100%);
+            color: white;
+            font-size: 16px;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.2s;
+            box-shadow: 0 4px 16px rgba(0, 255, 136, 0.4);
+          "
+        >
+          ${texts.continueButton}
+        </button>
+      </div>
+    `;
+        this.overlay.appendChild(this.modal);
+        document.body.appendChild(this.overlay);
+        // 添加 CSS 动画
+        this.addStyles();
+    }
+    /**
+     * 添加 CSS 动画
+     */
+    addStyles() {
+        // 检查是否已添加样式
+        if (document.getElementById('retention-modal-styles'))
+            return;
+        const style = document.createElement('style');
+        style.id = 'retention-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);
+        }
+      }
+
+      #retention-modal-close-btn:hover {
+        background: rgba(255, 255, 255, 0.2) !important;
+        color: white !important;
+      }
+
+      #retention-cancel-btn:hover {
+        background: rgba(255, 255, 255, 0.1) !important;
+        border-color: rgba(255, 255, 255, 0.3) !important;
+      }
+
+      #retention-continue-btn:hover {
+        box-shadow: 0 6px 20px rgba(0, 255, 136, 0.6) !important;
+        transform: translateY(-1px);
+      }
+    `;
+        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('retention-modal-close-btn');
+        if (closeBtn) {
+            closeBtn.addEventListener('click', () => {
+                this.options.onCancel();
+                this.close();
+            });
+        }
+        // 点击取消按钮
+        const cancelBtn = document.getElementById('retention-cancel-btn');
+        if (cancelBtn) {
+            cancelBtn.addEventListener('click', () => {
+                this.options.onCancel();
+                this.close();
+            });
+        }
+        // 点击继续支付按钮
+        const continueBtn = document.getElementById('retention-continue-btn');
+        if (continueBtn) {
+            continueBtn.addEventListener('click', () => {
+                this.options.onContinue();
+                this.close();
+            });
+        }
+        // ESC 键关闭
+        this.boundHandleEscKey = this.handleEscKey.bind(this);
+        document.addEventListener('keydown', this.boundHandleEscKey);
+    }
+    /**
+     * 处理 ESC 键
+     */
+    handleEscKey(e) {
+        if (e.key === 'Escape') {
+            this.options.onCancel();
+            this.close();
+        }
+    }
+    /**
+     * 启动倒计时
+     */
+    startCountdown() {
+        this.remainingSeconds = 15 * 60; // 从15分钟开始倒计时
+        this.updateCountdownDisplay();
+        this.countdownInterval = window.setInterval(() => {
+            this.remainingSeconds--;
+            this.updateCountdownDisplay();
+            if (this.remainingSeconds <= 0) {
+                this.stopCountdown();
+                // 倒计时结束，自动取消订单
+                this.options.onCancel();
+                this.close();
+            }
+        }, 1000);
+    }
+    /**
+     * 停止倒计时
+     */
+    stopCountdown() {
+        if (this.countdownInterval) {
+            clearInterval(this.countdownInterval);
+            this.countdownInterval = null;
+        }
+    }
+    /**
+     * 更新倒计时显示
+     */
+    updateCountdownDisplay() {
+        const display = document.getElementById('countdown-display');
+        if (!display)
+            return;
+        const hours = Math.floor(this.remainingSeconds / 3600);
+        const minutes = Math.floor((this.remainingSeconds % 3600) / 60);
+        const seconds = this.remainingSeconds % 60;
+        display.textContent = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+    }
+    /**
+     * 清理资源
+     */
+    cleanup() {
+        // 停止倒计时
+        this.stopCountdown();
+        // 移除事件监听
+        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;
+    }
+}
+
+/**
+ * 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.retentionModal = null;
+        this.shouldShowRetention = true; // 控制是否显示挽留弹框
+        this.paymentCompleted = false; // 标记支付是否已完成
+        // 创建弹框
+        this.modal = new PaymentModal({
+            title: options.modalTitle ?? `Pay with ${paymentMethod.payment_method_name}`,
+            showCloseButton: true,
+            closeOnOverlayClick: false, // Dropin 支付中不允许点击遮罩关闭
+            closeOnEsc: false, // 禁用 ESC 键关闭，改为触发挽留弹框
+            maxWidth: '600px',
+            onClose: () => {
+                // 当弹框真正关闭时触发挽留弹框
+                if (this.shouldShowRetention && this.options.enableRetention !== false && !this.paymentCompleted) {
+                    this.showRetentionModal();
+                }
+                else {
+                    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.paymentCompleted = true; // 标记支付已完成
+                    this.shouldShowRetention = false; // 支付完成后不显示挽留弹框
+                    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...');
+        // 关闭挽留弹框(如果存在)
+        if (this.retentionModal && this.retentionModal.isOpen()) {
+            this.retentionModal.close();
+        }
+        this.modal.close();
+    }
+    /**
+     * 清理资源
+     */
+    cleanup() {
+        console.log('[DropinPaymentModal] Cleaning up...');
+        // 清理 Dropin 支付组件
+        if (this.dropinPayment) {
+            this.dropinPayment.destroy();
+            this.dropinPayment = null;
+        }
+        // 清理挽留弹框
+        if (this.retentionModal) {
+            if (this.retentionModal.isOpen()) {
+                this.retentionModal.close();
+            }
+            this.retentionModal = null;
+        }
+        this.containerElement = null;
+        this.shouldShowRetention = true; // 重置状态
+        this.paymentCompleted = false; // 重置状态
+    }
+    /**
+     * 显示加载状态
+     */
+    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);
+        }
+    }
+    /**
+     * 显示挽留弹框
+     */
+    async showRetentionModal() {
+        console.log('[DropinPaymentModal] Showing retention modal...');
+        try {
+            // 获取订单信息用于挽留弹框展示
+            const response = await this.paymentInstance.getOrderInfo();
+            if (response.err || !response.data?.order_info) {
+                console.warn('[DropinPaymentModal] Failed to get order info for retention modal');
+                this.cleanup();
+                return;
+            }
+            const orderInfo = response.data.order_info;
+            // 创建挽留弹框
+            this.retentionModal = new RetentionModal({
+                language: this.options.retentionOptions?.language ?? 'en',
+                productName: orderInfo.product_name || this.paymentMethod.payment_method_name,
+                purchaseAmount: Number(orderInfo.quantity) || 0,
+                bonusAmount: this.options.retentionOptions?.bonusAmount,
+                discountPrice: formatPrice(orderInfo.price || orderInfo.mark_price || 0, orderInfo.currency || 'USD'),
+                onContinue: () => {
+                    // 继续支付：重新打开支付弹框
+                    console.log('[DropinPaymentModal] User chose to continue payment');
+                    this.shouldShowRetention = false; // 防止再次触发挽留弹框
+                    this.open(); // 重新打开支付弹框
+                },
+                onCancel: () => {
+                    // 确认取消：关闭所有弹框
+                    console.log('[DropinPaymentModal] User confirmed cancellation');
+                    this.cleanup();
+                },
+                onClose: () => {
+                    // 挽留弹框关闭时清理
+                    this.retentionModal = null;
+                },
+                ...this.options.retentionOptions,
+            });
+            this.retentionModal.open();
+        }
+        catch (error) {
+            console.error('[DropinPaymentModal] Failed to show retention modal:', error);
+            this.cleanup();
+        }
+    }
+    /**
+     * 检查弹框是否打开
+     */
+    isOpen() {
+        return this.modal.isModalOpen();
+    }
+}
+
+/**
+ * SeaartPaymentSDK
+ * 基于 SeaartPaymentComponent 的支付 SDK 封装
+ *
+ * 核心职责：
+ * 1. 动态加载 SeaartPaymentComponent 脚本
+ * 2. 全局初始化（仅一次）
+ * 3. 获取支付方式列表
+ * 4. 创建订单支付实例
+ */
+class SeaartPaymentSDK {
+    /**
      * 私有构造函数（单例模式）
      */
     constructor() {
@@ -3581,71 +4152,423 @@ class PurchaseSuccessModal {
         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;
+    }
+}
+
+/**
+ * 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 BasePackageModal {
+    // === Constructor ===
+    constructor(options) {
+        this.resizeHandler = null;
+        this.isInitializingSDK = false;
+        this.sdkInitialized = false;
+        this.options = options;
+        this.language = options.language || 'en';
+        this.modal = this.createModal();
+        console.log(`[${this.constructor.name}] Created`);
+    }
+    // === Public Methods ===
+    /**
+     * Open the modal
+     */
+    async open() {
+        console.log(`[${this.constructor.name}] Opening modal...`);
+        this.modal.open();
+        // Hook for subclass-specific styling
+        this.applyModalStyling();
+        // Render content (abstract method)
+        this.renderContent();
+        // Add resize listener
+        this.resizeHandler = () => this.renderContent();
+        window.addEventListener('resize', this.resizeHandler);
+        // Initialize SDK in background
+        if (!this.sdkInitialized && !this.isInitializingSDK) {
+            this.initializeSDK();
+        }
+        console.log(`[${this.constructor.name}] Modal opened`);
+    }
+    /**
+     * Close the modal
+     */
+    close() {
+        console.log(`[${this.constructor.name}] Closing modal...`);
+        this.modal.close();
+    }
+    /**
+     * 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(`[${this.constructor.name}] No SDK configuration provided, skipping initialization`);
+            return;
+        }
+        this.isInitializingSDK = true;
+        console.log(`[${this.constructor.name}] Initializing payment SDK...`);
+        // Show loading indicator
+        const loader = showLoadingIndicator('Initializing payment system...');
+        try {
+            const config = this.options.sdkConfig;
+            // 1. Get base configuration from environment
+            const envConfig = ENVIRONMENT_CONFIGS[config.environment];
+            // 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(`[${this.constructor.name}] Using environment:`, config.environment);
+            // 3. Initialize SeaartPaymentSDK
+            await SeaartPaymentSDK.getInstance().init({
+                scriptUrl: finalConfig.scriptUrl,
+                clientId: finalConfig.clientId,
+                language: 'en',
+                scriptTimeout: config.scriptTimeout,
+                cssUrl: finalConfig.cssUrl,
+            });
+            // 4. Get payment methods list
+            const paymentMethods = await SeaartPaymentSDK.getInstance().getPaymentMethods({
+                country_code: config.countryCode,
+                business_type: config.businessType ?? 1, // Default to 1 (one-time purchase)
+            });
+            // 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); // Default to dropin (payment_type === 2)
+            if (!paymentMethod) {
+                throw new Error(`Payment method "${config.paymentMethodType || 'dropin'}" not found`);
+            }
+            // 6. Store to class members (including finalConfig for later use)
+            this.paymentMethod = paymentMethod;
+            this.accountToken = config.accountToken;
+            this.sdkInitialized = true;
+            // Store final config to config object (for handlePaymentFlow)
+            this.options.sdkConfig._resolvedOrderApiUrl = finalConfig.orderApiUrl;
+            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(`[${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
+     */
+    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)
+     */
+    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() {
-        if (!this.overlay)
-            return;
-        // 点击遮罩关闭
-        this.overlay.addEventListener('click', (e) => {
-            if (e.target === this.overlay) {
-                this.close();
+    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);
+                    }
+                });
             }
         });
-        // 点击关闭按钮
-        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 resources
      */
     cleanup() {
-        // 移除事件监听
-        if (this.boundHandleEscKey) {
-            document.removeEventListener('keydown', this.boundHandleEscKey);
-            this.boundHandleEscKey = null;
-        }
-        // 移除元素
-        if (this.overlay && this.overlay.parentNode) {
-            this.overlay.parentNode.removeChild(this.overlay);
+        console.log(`[${this.constructor.name}] Cleaning up...`);
+        // Remove resize listener
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
         }
-        // 恢复 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;
     }
+    // === Utility Methods ===
     /**
-     * HTML 转义工具函数
-     * 防止 XSS 攻击
+     * Format number with commas
      */
-    escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
+    formatNumber(num) {
+        return parseInt(num).toLocaleString();
     }
     /**
-     * 检查弹窗是否打开
+     * Get content container from modal
      */
-    isOpen() {
-        return this.overlay !== null && !this.isExiting;
+    getContentContainer() {
+        return this.modal.getContentContainer();
     }
 }
 
@@ -3653,12 +4576,10 @@ class PurchaseSuccessModal {
  * CreditPackageModal - 积分套餐选择弹框
  * 展示不同的积分套餐供用户选择
  */
-class CreditPackageModal {
-    constructor(options) {
-        this.resizeHandler = null;
-        this.isInitializingSDK = false;
-        this.sdkInitialized = false;
-        // 设计系统常量
+class CreditPackageModal extends BasePackageModal {
+    constructor() {
+        super(...arguments);
+        // Design system constants
         this.SPACING = {
             xs: '8px',
             sm: '16px',
@@ -3678,241 +4599,105 @@ class CreditPackageModal {
                 accent: '#22ce9c',
             },
         };
-        this.options = options;
-        this.language = options.language || 'en';
-        // 创建弹框
-        this.modal = new PaymentModal({
+    }
+    // === Abstract Method Implementations ===
+    /**
+     * Create and configure the PaymentModal instance
+     */
+    createModal() {
+        return new PaymentModal({
             title: this.language === 'zh-CN'
-                ? (options.title_cn || '选择您的创作力量')
-                : (options.title || 'Choose Your Creative Power'),
+                ? (this.options.title_cn || '选择您的创作力量')
+                : (this.options.title || 'Choose Your Creative Power'),
             showCloseButton: true,
-            closeOnOverlayClick: false, // 禁用点击空白处关闭
-            closeOnEsc: false, // 禁用ESC键关闭
+            closeOnOverlayClick: false, // Disable click overlay to close
+            closeOnEsc: false, // Disable ESC key to close
             maxWidth: '1200px',
             onClose: () => {
                 this.cleanup();
-                options.onClose?.();
+                this.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 是否初始化成功
+     * Get packages to display
      */
-    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;
+    getPackages() {
+        return CREDIT_PACKAGES;
     }
     /**
-     * 初始化支付SDK（后台静默执行）
+     * Get package display name for payment modal title
      */
-    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);
-        }
+    getPackageDisplayName(pkg) {
+        const isZh = this.language === 'zh-CN';
+        return isZh ? `${pkg.credits} 积分套餐` : `${pkg.credits} Credits Package`;
     }
     /**
-     * 关闭弹框
+     * Get loading button HTML with spinner
      */
-    close() {
-        console.log('[CreditPackageModal] Closing modal...');
-        this.modal.close();
+    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)
      */
-    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';
+    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');
         }
@@ -3925,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;
@@ -3935,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;">
@@ -3963,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};
@@ -4200,7 +4782,7 @@ class CreditPackageModal {
           </p>
         </div>
 
-        <!-- 套餐卡片 -->
+        <!-- Package cards -->
         <div style="
           display: grid;
           grid-template-columns: ${styles.packGridColumns};
@@ -4210,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} {
@@ -4280,7 +4978,7 @@ class CreditPackageModal {
           </div>
         ` : ''}
 
-        <!-- 积分总数 -->
+        <!-- Total credits -->
         <div style="
           margin-bottom: 8px;
           font-size: 36px;
@@ -4292,7 +4990,7 @@ class CreditPackageModal {
           ${this.formatNumber(pkg.credits)}
         </div>
 
-        <!-- 积分明细 -->
+        <!-- Credits breakdown -->
         <div style="
           margin-bottom: 12px;
           display: flex;
@@ -4306,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="
@@ -4322,7 +5020,7 @@ class CreditPackageModal {
           ` : ''}
         </div>
 
-        <!-- 购买按钮 -->
+        <!-- Buy button -->
         <button
           data-package-button="${pkg.id}"
           style="
@@ -4347,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();
-    }
 }
 
 /**
@@ -4550,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';
@@ -4598,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';
@@ -4796,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;
@@ -4814,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="
@@ -4842,7 +5238,7 @@ class GenericPackageModal {
           ×
         </button>
 
-        <!-- 折扣标签 - 关闭按钮下方 -->
+        <!-- Discount tag - below close button -->
         ${hasBonusPercentage ? `
           <div style="
             position: absolute;
@@ -4862,7 +5258,7 @@ class GenericPackageModal {
           </div>
         ` : ''}
 
-        <!-- 积分显示区域 - 确保不换行 -->
+        <!-- Credits display area - ensure no line break -->
         <div style="
           display: flex;
           flex-direction: column;
@@ -4879,7 +5275,7 @@ class GenericPackageModal {
             gap: 12px;
             flex-wrap: nowrap;
           ">
-            <!-- 基础积分 -->
+            <!-- Base credits -->
             <span style="
               font-size: 80px;
               line-height: 1;
@@ -4891,7 +5287,7 @@ class GenericPackageModal {
               ${this.formatNumber(pkg.base_credits || pkg.credits)}
             </span>
 
-            <!-- credits 文本 -->
+            <!-- credits text -->
             <span style="
               font-size: 52px;
               line-height: 1;
@@ -4903,7 +5299,7 @@ class GenericPackageModal {
               credits
             </span>
 
-            <!-- 奖励积分 -->
+            <!-- Bonus credits -->
             ${hasBonus ? `
               <span style="
                 font-size: 52px;
@@ -4919,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;
@@ -4930,7 +5326,7 @@ class GenericPackageModal {
           Valid for all platform products
         </div>
 
-        <!-- 购买按钮 -->
+        <!-- Buy button -->
         <button
           data-package-button="${pkg.id}"
           style="
@@ -4958,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();
-    }
 }
 
 /**
@@ -21793,6 +21994,7 @@ exports.PaymentModal = PaymentModal;
 exports.PaymentStorage = PaymentStorage;
 exports.PurchaseSuccessModal = PurchaseSuccessModal;
 exports.RESPONSIVE_BREAKPOINTS = RESPONSIVE_BREAKPOINTS;
+exports.RetentionModal = RetentionModal;
 exports.SDK_CONFIG = SDK_CONFIG;
 exports.ScriptLoader = ScriptLoader;
 exports.SeaArtPayLoader = SeaArtPayLoader;