@seaverse/payment-sdk 0.9.3 → 0.9.5

package/dist/index.browser.js

@@ -2843,6 +2843,64 @@ class DropinPaymentModal {
     }
 }
 
+/**
+ * 共享配置文件
+ * Shared configuration for CreditPackageModal and GenericPackageModal
+ */
+/**
+ * 环境配置映射表
+ * SDK 根据 environment 参数自动选择对应的配置
+ */
+const ENVIRONMENT_CONFIGS = {
+    development: {
+        scriptUrl: 'https://seaart-publish.sc-api-release.saconsole.com/payment-component/client.js',
+        clientId: 'XF49NOfyZ54O16GujB0ptio2',
+        orderApiUrl: 'https://payment.sg.seaverse.dev',
+        walletApiUrl: 'https://wallet.sg.seaverse.dev',
+        cssUrl: 'https://seaart-publish.sc-api-release.saconsole.com/payment-component/public/style.css',
+    },
+    production: {
+        scriptUrl: 'https://seaart-publish.sc-api.saconsole.com/payment-component/client.js',
+        clientId: 'XF11ik3u5AJ16IyDI3hebq5',
+        orderApiUrl: 'https://payment.seaverse.com',
+        walletApiUrl: 'https://wallet.seaverse.com',
+        cssUrl: 'https://seaart-publish.sc-api.saconsole.com/payment-component/public/style.css',
+    },
+};
+/**
+ * 响应式断点配置
+ * Responsive breakpoints for grid layout
+ */
+const RESPONSIVE_BREAKPOINTS = {
+    mobile: 768,
+    tablet: 1200,
+    laptop: 1400,
+    desktop: Infinity,
+};
+/**
+ * 网格列数配置
+ * Grid columns for different screen sizes
+ */
+const GRID_COLUMNS = {
+    mobile: 1,
+    tablet: 2,
+    laptop: 2,
+    desktop: 4,
+};
+/**
+ * SDK 初始化配置
+ */
+const SDK_CONFIG = {
+    /** 默认脚本加载超时 (毫秒) */
+    DEFAULT_SCRIPT_TIMEOUT: 10000,
+    /** 默认 SDK 初始化超时 (毫秒) */
+    DEFAULT_INIT_TIMEOUT: 30000,
+    /** 默认最大重试次数 */
+    DEFAULT_MAX_RETRIES: 1,
+    /** 默认业务类型 (1=一次性购买, 2=订阅) */
+    DEFAULT_BUSINESS_TYPE: 1,
+};
+
 /**
  * SeaartPaymentSDK
  * 基于 SeaartPaymentComponent 的支付 SDK 封装
@@ -2879,22 +2937,22 @@ class SeaartPaymentSDK {
             return;
         }
         console.log('[SeaartPaymentSDK] Initializing...', {
-            scriptUrl: config.scriptUrl,
-            clientId: config.clientId,
+            scriptUrl: ENVIRONMENT_CONFIGS[config.environment].scriptUrl,
+            clientId: ENVIRONMENT_CONFIGS[config.environment].clientId,
             language: config.language,
-            cssUrl: config.cssUrl,
+            cssUrl: ENVIRONMENT_CONFIGS[config.environment].cssUrl,
         });
         try {
             // 1. 并行加载 CSS 和 JavaScript
             const loadTasks = [
                 ScriptLoader.loadSeaartPaymentComponent({
-                    scriptUrl: config.scriptUrl,
+                    scriptUrl: ENVIRONMENT_CONFIGS[config.environment].scriptUrl,
                     timeout: config.scriptTimeout || 10000,
                 }),
             ];
             // 2. 如果提供了 CSS URL，则加载样式表
-            if (config.cssUrl) {
-                loadTasks.push(StylesheetLoader.loadPaymentStylesheet(config.cssUrl));
+            if (ENVIRONMENT_CONFIGS[config.environment].cssUrl) {
+                loadTasks.push(StylesheetLoader.loadPaymentStylesheet(ENVIRONMENT_CONFIGS[config.environment].cssUrl));
             }
             // 3. 等待所有资源加载完成
             await Promise.all(loadTasks);
@@ -2910,7 +2968,7 @@ class SeaartPaymentSDK {
             }
             // 4. 初始化 SDK
             await window.SeaartPaymentComponent.init({
-                client_id: config.clientId,
+                client_id: ENVIRONMENT_CONFIGS[config.environment].clientId,
                 language: language,
             });
             // 5. 保存配置并标记已初始化
@@ -3285,64 +3343,6 @@ async function getCreditDetail(apiHost, authToken) {
     }
 }
 
-/**
- * 共享配置文件
- * Shared configuration for CreditPackageModal and GenericPackageModal
- */
-/**
- * 环境配置映射表
- * SDK 根据 environment 参数自动选择对应的配置
- */
-const ENVIRONMENT_CONFIGS = {
-    development: {
-        scriptUrl: 'https://seaart-publish.sc-api-release.saconsole.com/payment-component/client.js',
-        clientId: 'XF49NOfyZ54O16GujB0ptio2',
-        orderApiUrl: 'https://payment.sg.seaverse.dev',
-        walletApiUrl: 'https://wallet.sg.seaverse.dev',
-        cssUrl: 'https://seaart-publish.sc-api-release.saconsole.com/payment-component/public/style.css',
-    },
-    production: {
-        scriptUrl: 'https://seaart-publish.sc-api.saconsole.com/payment-component/client.js',
-        clientId: 'prod_client_id',
-        orderApiUrl: 'https://payment.seaverse.com',
-        walletApiUrl: 'https://wallet.seaverse.com',
-        cssUrl: 'https://seaart-publish.sc-api.saconsole.com/payment-component/public/style.css',
-    },
-};
-/**
- * 响应式断点配置
- * Responsive breakpoints for grid layout
- */
-const RESPONSIVE_BREAKPOINTS = {
-    mobile: 768,
-    tablet: 1200,
-    laptop: 1400,
-    desktop: Infinity,
-};
-/**
- * 网格列数配置
- * Grid columns for different screen sizes
- */
-const GRID_COLUMNS = {
-    mobile: 1,
-    tablet: 2,
-    laptop: 2,
-    desktop: 4,
-};
-/**
- * SDK 初始化配置
- */
-const SDK_CONFIG = {
-    /** 默认脚本加载超时 (毫秒) */
-    DEFAULT_SCRIPT_TIMEOUT: 10000,
-    /** 默认 SDK 初始化超时 (毫秒) */
-    DEFAULT_INIT_TIMEOUT: 30000,
-    /** 默认最大重试次数 */
-    DEFAULT_MAX_RETRIES: 1,
-    /** 默认业务类型 (1=一次性购买, 2=订阅) */
-    DEFAULT_BUSINESS_TYPE: 1,
-};
-
 /**
  * 共享类型定义
  * Shared types for CreditPackageModal and GenericPackageModal
@@ -4178,6 +4178,7 @@ class BasePackageModal {
             console.log(`[${this.constructor.name}] Using environment:`, config.environment);
             // 3. Initialize SeaartPaymentSDK
             await SeaartPaymentSDK.getInstance().init({
+                environment: config.environment,
                 scriptUrl: finalConfig.scriptUrl,
                 clientId: finalConfig.clientId,
                 language: this.language,
@@ -4488,34 +4489,33 @@ async function fetchAvailablePackages(apiHost, token) {
  * - 悬停微交互和平滑过渡
  */
 /**
- * 设计系统常量 - 完全还原 Restore UI Design
+ * 设计系统常量 - 一比一还原参考图
  */
 const DESIGN_TOKENS = {
-    // 卡片尺寸（固定 246x252px）
+    // 卡片尺寸（紧凑布局，4卡并排）
     card: {
-        width: '246px',
-        height: '252px',
+        width: '228px',
+        height: 'auto',
         borderRadius: '16px',
-        padding: '20px',
+        padding: '28px 20px 16px',
     },
     // 颜色系统
     colors: {
         text: {
             primary: '#ffffff',
-            secondary: '#aaaaaa',
-            bonus: '#00e699',
+            bonus: '#00E699',
         },
         background: {
-            card: 'rgba(255, 255, 255, 0.05)',
-            cardHighlight: 'linear-gradient(to bottom, rgba(0, 255, 136, 0.1), rgba(255, 255, 255, 0.05))',
-            bonus: 'rgba(0, 204, 136, 0.12)',
-            button: 'rgba(255, 255, 255, 0.08)',
-            buttonHighlight: 'linear-gradient(to right, #00ff88, #00f2fe)',
+            card: 'rgba(255, 255, 255, 0.04)',
+            cardHighlight: 'linear-gradient(180deg, rgba(0, 230, 153, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)',
+            bonus: 'rgba(0, 230, 153, 0.1)',
+            button: 'rgba(255, 255, 255, 0.06)',
+            buttonHighlight: 'linear-gradient(90deg, #00E699 0%, #00D4AA 100%)',
         },
         border: {
-            default: 'rgba(255, 255, 255, 0.06)',
-            highlighted: 'rgba(0, 255, 136, 0.3)',
-            button: 'rgba(255, 255, 255, 0.12)',
+            default: 'rgba(255, 255, 255, 0.08)',
+            highlighted: 'rgba(0, 230, 153, 0.3)',
+            button: 'rgba(255, 255, 255, 0.1)',
         },
         glow: '#00E699',
         badge: {
@@ -4532,7 +4532,7 @@ const DESIGN_TOKENS = {
     },
     // 徽章
     badge: {
-        size: '86px',
+        size: '72px',
     },
 };
 /**
@@ -4590,7 +4590,6 @@ class CreditPackCard {
       display: flex;
       flex-direction: column;
       align-items: center;
-      justify-content: space-between;
       width: ${DESIGN_TOKENS.card.width};
       height: ${DESIGN_TOKENS.card.height};
       padding: ${DESIGN_TOKENS.card.padding};
@@ -4599,6 +4598,7 @@ class CreditPackCard {
       overflow: hidden;
       transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       cursor: pointer;
+      box-sizing: border-box;
     `;
         // 边框层
         const border = document.createElement('div');
@@ -4618,11 +4618,11 @@ class CreditPackCard {
             const glowContainer = document.createElement('div');
             glowContainer.style.cssText = `
         position: absolute;
-        top: -72px;
+        top: -60px;
         left: 50%;
         transform: translateX(-50%);
-        width: 194px;
-        height: 144px;
+        width: 160px;
+        height: 120px;
         pointer-events: none;
         overflow: visible;
       `;
@@ -4636,73 +4636,61 @@ class CreditPackCard {
       `;
             const glow = document.createElement('div');
             glow.style.cssText = `
-        width: 194px;
-        height: 144px;
+        width: 160px;
+        height: 120px;
         background: ${DESIGN_TOKENS.colors.glow};
-        opacity: 0.2;
-        filter: blur(54px);
+        opacity: 0.18;
+        filter: blur(50px);
         border-radius: 50%;
       `;
             glowInner.appendChild(glow);
             glowContainer.appendChild(glowInner);
             card.appendChild(glowContainer);
         }
-        // 悬停效果
-        let hoverAnimationId = null;
         card.addEventListener('mouseenter', () => {
             card.style.transform = 'translateY(-4px) scale(1.02)';
             border.style.borderColor = isHighlighted
-                ? 'rgba(0, 255, 136, 0.5)'
-                : 'rgba(255, 255, 255, 0.12)';
-            // 暂停呼吸动画
-            if (hoverAnimationId) {
-                card.style.animationPlayState = 'paused';
-            }
+                ? 'rgba(0, 230, 153, 0.5)'
+                : 'rgba(255, 255, 255, 0.15)';
         });
         card.addEventListener('mouseleave', () => {
             card.style.transform = 'translateY(0) scale(1)';
             border.style.borderColor = isHighlighted
                 ? DESIGN_TOKENS.colors.border.highlighted
                 : DESIGN_TOKENS.colors.border.default;
-            // 恢复呼吸动画
-            if (hoverAnimationId) {
-                card.style.animationPlayState = 'running';
-            }
         });
         // 添加呼吸动画（仅高亮卡片）
-        if (isHighlighted) {
-            const animationId = `pulse-${this.options.id}`;
-            hoverAnimationId = animationId;
-            const style = document.createElement('style');
-            style.textContent = `
-        @keyframes ${animationId} {
-          0%, 100% {
-            transform: translateY(0) scale(1);
-            box-shadow: 0 8px 32px rgba(0, 255, 136, 0.3);
-          }
-          50% {
-            transform: translateY(-2px) scale(1.02);
-            box-shadow: 0 12px 40px rgba(0, 255, 136, 0.4);
-          }
-        }
-        .credit-pack-card[data-package-id="${this.options.id}"] {
-          animation: ${animationId} 2s ease-in-out infinite;
-        }
-      `;
-            document.head.appendChild(style);
-        }
+        // if (isHighlighted) {
+        //   const animationId = `pulse-${this.options.id}`;
+        //   hoverAnimationId = animationId;
+        //   const style = document.createElement('style');
+        //   style.textContent = `
+        //     @keyframes ${animationId} {
+        //       0%, 100% {
+        //         transform: translateY(0) scale(1);
+        //         box-shadow: 0 8px 32px rgba(0, 255, 136, 0.3);
+        //       }
+        //       50% {
+        //         transform: translateY(-2px) scale(1.02);
+        //         box-shadow: 0 12px 40px rgba(0, 255, 136, 0.4);
+        //       }
+        //     }
+        //     .credit-pack-card[data-package-id="${this.options.id}"] {
+        //       animation: ${animationId} 2s ease-in-out infinite;
+        //     }
+        //   `;
+        //   document.head.appendChild(style);
+        // }
         // 内容容器
         const contentContainer = document.createElement('div');
         contentContainer.style.cssText = `
       display: flex;
       flex-direction: column;
       align-items: center;
-      justify-content: center;
-      gap: 12px;
-      margin-top: 16px;
+      justify-content: flex-start;
+      gap: 0;
       z-index: 10;
       width: 100%;
-      flex: 1;
     `;
         // 金额（大数字）
         const amountWrapper = document.createElement('div');
@@ -4710,15 +4698,17 @@ class CreditPackCard {
       display: flex;
       flex-direction: column;
       align-items: center;
+      margin-bottom: 2px;
     `;
         const amount = document.createElement('span');
         amount.style.cssText = `
-      font-size: 36px;
-      font-weight: 700;
-      line-height: 36px;
+      font-size: 32px;
+      font-weight: 600;
+      line-height: 1.1;
       font-style: italic;
       color: ${DESIGN_TOKENS.colors.text.primary};
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      letter-spacing: -0.02em;
     `;
         amount.textContent = this.options.totalCredits.toLocaleString();
         amountWrapper.appendChild(amount);
@@ -4726,8 +4716,8 @@ class CreditPackCard {
         // 积分文本
         const creditsWrapper = document.createElement('div');
         creditsWrapper.style.cssText = `
-      padding: 2px 8px;
-      border-radius: 4px;
+      margin-bottom: 12px;
+      margin-top: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -4735,9 +4725,9 @@ class CreditPackCard {
         const creditsText = document.createElement('span');
         creditsText.style.cssText = `
       font-size: 16px;
-      font-weight: 500;
-      line-height: 24px;
-      color: ${DESIGN_TOKENS.colors.text.secondary};
+      font-weight: 400;
+      color: rgba(255, 255, 255, 0.45);
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     `;
         creditsText.textContent = `${this.options.baseCredits.toLocaleString()} ${texts.credits}`;
         creditsWrapper.appendChild(creditsText);
@@ -4747,27 +4737,26 @@ class CreditPackCard {
             const bonusWrapper = document.createElement('div');
             bonusWrapper.style.cssText = `
         background: ${DESIGN_TOKENS.colors.background.bonus};
-        padding: 2px 8px;
-        border-radius: 4px;
-        display: flex;
+        padding: 4px 6px;
+        border-radius: 6px;
         align-items: center;
         justify-content: center;
+        margin-bottom: 0;
       `;
             const bonusText = document.createElement('span');
             bonusText.style.cssText = `
-        font-size: 18px;
-        font-weight: 500;
-        line-height: 24px;
+        font-size: 16px;
+        font-weight: 700;
         color: ${DESIGN_TOKENS.colors.text.bonus};
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
       `;
             bonusText.textContent = `+${this.options.bonusCredits.toLocaleString()} ${texts.bonus}`;
             bonusWrapper.appendChild(bonusText);
             contentContainer.appendChild(bonusWrapper);
         }
         else {
-            // 占位以保持高度一致
             const spacer = document.createElement('div');
-            spacer.style.cssText = 'height: 28px;';
+            spacer.style.cssText = 'height: 24px; margin-bottom: 0;';
             contentContainer.appendChild(spacer);
         }
         card.appendChild(contentContainer);
@@ -4783,9 +4772,9 @@ class CreditPackCard {
       border: ${isHighlighted ? 'none' : `1px solid ${DESIGN_TOKENS.colors.border.button}`};
       background: ${isHighlighted ? DESIGN_TOKENS.colors.background.buttonHighlight : DESIGN_TOKENS.colors.background.button};
       color: ${isHighlighted ? '#0a0a0f' : DESIGN_TOKENS.colors.text.primary};
-      font-size: 16px;
-      font-weight: ${isHighlighted ? '700' : '600'};
-      line-height: 20px;
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 1;
       cursor: pointer;
       display: flex;
       align-items: center;
@@ -4793,8 +4782,9 @@ class CreditPackCard {
       overflow: hidden;
       transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       z-index: 10;
-      margin-top: auto;
-      box-shadow: ${isHighlighted ? '0 4px 16px rgba(0, 255, 136, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)' : 'none'};
+      margin-top: 16px;
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      box-shadow: ${isHighlighted ? '0 4px 16px rgba(0, 230, 153, 0.35)' : 'none'};
     `;
         // 按钮内边框（仅非高亮）
         if (!isHighlighted) {
@@ -4815,16 +4805,17 @@ class CreditPackCard {
         // 按钮悬停效果
         button.addEventListener('mouseenter', () => {
             if (isHighlighted) {
-                button.style.boxShadow = '0 6px 20px rgba(0, 255, 136, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4)';
+                button.style.boxShadow = '0 6px 20px rgba(0, 230, 153, 0.45)';
+                button.style.transform = 'translateY(-1px)';
             }
             else {
-                button.style.background = 'rgba(255, 255, 255, 0.15)';
+                button.style.background = 'rgba(255, 255, 255, 0.1)';
+                button.style.transform = 'translateY(-1px)';
             }
-            button.style.transform = 'translateY(-2px)';
         });
         button.addEventListener('mouseleave', () => {
             if (isHighlighted) {
-                button.style.boxShadow = '0 4px 16px rgba(0, 255, 136, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)';
+                button.style.boxShadow = '0 4px 16px rgba(0, 230, 153, 0.35)';
             }
             else {
                 button.style.background = DESIGN_TOKENS.colors.background.button;
@@ -4851,18 +4842,19 @@ class CreditPackCard {
         const badge = document.createElement('div');
         badge.style.cssText = `
       position: absolute;
-      top: -30px;
-      right: -14px;
+      top: -16px;
+      right: -12px;
       width: ${DESIGN_TOKENS.badge.size};
       height: ${DESIGN_TOKENS.badge.size};
       z-index: 30;
       pointer-events: none;
+      transform: rotate(12deg);
     `;
         // SVG 内容
         const svgNS = 'http://www.w3.org/2000/svg';
         const svg = document.createElementNS(svgNS, 'svg');
-        svg.setAttribute('width', '86');
-        svg.setAttribute('height', '86');
+        svg.setAttribute('width', '72');
+        svg.setAttribute('height', '72');
         svg.setAttribute('viewBox', '0 0 86 86');
         svg.setAttribute('fill', 'none');
         svg.style.cssText = 'width: 100%; height: 100%;';
@@ -4878,47 +4870,25 @@ class CreditPackCard {
         starStroke.setAttribute('stroke-opacity', '0.08');
         svg.appendChild(starStroke);
         // 文字（中文或英文）
-        if (isZh) {
-            // 中文复杂路径 - 简化显示
-            const text1 = document.createElementNS(svgNS, 'text');
-            text1.setAttribute('x', '43');
-            text1.setAttribute('y', '35');
-            text1.setAttribute('text-anchor', 'middle');
-            text1.setAttribute('fill', DESIGN_TOKENS.colors.badge.text);
-            text1.setAttribute('font-size', '12');
-            text1.setAttribute('font-weight', '700');
-            text1.textContent = 'On 1st';
-            svg.appendChild(text1);
-            const text2 = document.createElementNS(svgNS, 'text');
-            text2.setAttribute('x', '43');
-            text2.setAttribute('y', '51');
-            text2.setAttribute('text-anchor', 'middle');
-            text2.setAttribute('fill', DESIGN_TOKENS.colors.badge.text);
-            text2.setAttribute('font-size', '13');
-            text2.setAttribute('font-weight', '700');
-            text2.textContent = 'Double';
-            svg.appendChild(text2);
-        }
-        else {
-            const text1 = document.createElementNS(svgNS, 'text');
-            text1.setAttribute('x', '43');
-            text1.setAttribute('y', '35');
-            text1.setAttribute('text-anchor', 'middle');
-            text1.setAttribute('fill', DESIGN_TOKENS.colors.badge.text);
-            text1.setAttribute('font-size', '10');
-            text1.setAttribute('font-weight', '700');
-            text1.textContent = 'On 1st';
-            svg.appendChild(text1);
-            const text2 = document.createElementNS(svgNS, 'text');
-            text2.setAttribute('x', '43');
-            text2.setAttribute('y', '51');
-            text2.setAttribute('text-anchor', 'middle');
-            text2.setAttribute('fill', DESIGN_TOKENS.colors.badge.text);
-            text2.setAttribute('font-size', '12');
-            text2.setAttribute('font-weight', '700');
-            text2.textContent = 'Double';
-            svg.appendChild(text2);
-        }
+        const text1 = document.createElementNS(svgNS, 'text');
+        text1.setAttribute('x', '43');
+        text1.setAttribute('y', '38');
+        text1.setAttribute('text-anchor', 'middle');
+        text1.setAttribute('fill', DESIGN_TOKENS.colors.badge.text);
+        text1.setAttribute('font-size', '14');
+        text1.setAttribute('font-weight', '800');
+        text1.setAttribute('font-style', 'italic');
+        text1.textContent = 'Double';
+        svg.appendChild(text1);
+        const text2 = document.createElementNS(svgNS, 'text');
+        text2.setAttribute('x', '43');
+        text2.setAttribute('y', '53');
+        text2.setAttribute('text-anchor', 'middle');
+        text2.setAttribute('fill', DESIGN_TOKENS.colors.badge.text);
+        text2.setAttribute('font-size', '10');
+        text2.setAttribute('font-weight', '700');
+        text2.textContent = 'ON 1ST';
+        svg.appendChild(text2);
         // 渐变定义
         const defs = document.createElementNS(svgNS, 'defs');
         const gradient = document.createElementNS(svgNS, 'linearGradient');
@@ -8377,16 +8347,6 @@ class CreditPackageModal extends BasePackageModal {
             this.isFetchingPackages = false;
         }
     }
-    /**
-     * Parse purchase limit string to day_limit number
-     * Example: "Daily limit: 1" => 1
-     */
-    parsePurchaseLimit(limit) {
-        if (!limit)
-            return 0;
-        const match = limit.match(/\d+/);
-        return match ? parseInt(match[0]) : 0;
-    }
     /**
      * 覆盖 BasePackageModal 的 handlePaymentFlow 方法
      * 使用 PaymentCheckoutModal 替代旧的 DropinPaymentModal
@@ -8521,6 +8481,7 @@ class CreditPackageModal extends BasePackageModal {
         if (modalElement) {
             modalElement.style.background = '#0a0a0f';
             modalElement.style.border = '1px solid rgba(255, 255, 255, 0.1)';
+            modalElement.style.borderRadius = '24px';
         }
         // Modify title style
         const titleElement = document.querySelector('.payment-modal-title');
@@ -8531,6 +8492,33 @@ class CreditPackageModal extends BasePackageModal {
             titleElement.style.padding = '32px 32px 0 32px';
             titleElement.style.marginBottom = '16px';
             titleElement.style.letterSpacing = '-0.01em';
+            titleElement.style.display = 'none'; // Hide default title, we use custom header in renderContent
+        }
+        // Add responsive styles for cards
+        if (!document.getElementById('credit-package-responsive-styles')) {
+            const style = document.createElement('style');
+            style.id = 'credit-package-responsive-styles';
+            style.textContent = `
+        @media (max-width: 768px) {
+          .credit-pack-card-container {
+            width: 100% !important;
+            max-width: 320px;
+            margin: 0 auto;
+          }
+          .credit-pack-card {
+            width: 100% !important;
+            height: 300px !important;
+            padding: 28px 20px 20px !important;
+            border-radius: 20px !important;
+          }
+          .payment-modal {
+            width: 95vw !important;
+            max-height: 90vh !important;
+            overflow-y: auto !important;
+          }
+        }
+      `;
+            document.head.appendChild(style);
         }
         // Modify close button color and add hover animation
         const closeButton = document.querySelector('.payment-modal-close');
@@ -8563,7 +8551,8 @@ class CreditPackageModal extends BasePackageModal {
         if (!container) {
             throw new Error('Modal content container not found');
         }
-        const isZh = this.language === 'zh';
+        const lang = this.language ?? 'en';
+        const isZh = lang === 'zh' || lang === 'zh-TW';
         const styles = this.getResponsiveStyles();
         container.innerHTML = `
       <div style="
@@ -8573,10 +8562,10 @@ class CreditPackageModal extends BasePackageModal {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       ">
         <!-- Credit Packs - credit package purchase title -->
-        <div style="margin: 0 auto ${this.SPACING.lg}; max-width: 80rem; text-align: center;">
+        <div style="margin: 0 auto ${styles.headerMargin}; max-width: 80rem; text-align: center;">
           <h3 style="
             margin-bottom: ${this.SPACING.xs};
-            font-size: 24px;
+            font-size: ${styles.titleFontSize};
             font-weight: 700;
             color: ${this.COLORS.text.primary};
             letter-spacing: -0.02em;
@@ -8584,7 +8573,7 @@ class CreditPackageModal extends BasePackageModal {
             ${isZh ? '需要更多积分?' : 'Need More Credits?'}
           </h3>
           <p style="
-            font-size: 16px;
+            font-size: ${styles.subtitleFontSize};
             color: ${this.COLORS.text.secondary};
             line-height: 1.6;
           ">
@@ -8596,7 +8585,8 @@ class CreditPackageModal extends BasePackageModal {
         <div style="
           display: grid;
           grid-template-columns: ${styles.packGridColumns};
-          gap: 16px;
+          gap: ${styles.gridGap};
+          justify-items: center;
         ">
           ${this.getPackages().map((pkg, index) => this.renderPackageCard(pkg, index)).join('')}
         </div>
@@ -8611,30 +8601,55 @@ class CreditPackageModal extends BasePackageModal {
      */
     getResponsiveStyles() {
         const isMobile = window.matchMedia('(max-width: 768px)').matches;
-        const isTablet = window.matchMedia('(max-width: 1200px)').matches;
+        const isTablet = window.matchMedia('(max-width: 1024px)').matches;
         const isLaptop = window.matchMedia('(max-width: 1400px)').matches;
         let computeColumns = 5;
         let packColumns = 4;
         let padding = '0 60px 60px';
+        let titleSize = '32px';
+        let subtitleSize = '16px';
+        let headerMargin = this.SPACING.lg;
+        let gridGap = '24px';
         if (isMobile) {
             computeColumns = 1;
             packColumns = 1;
-            padding = '0 20px 20px';
+            padding = '0 16px 32px';
+            titleSize = '24px';
+            subtitleSize = '14px';
+            headerMargin = this.SPACING.md;
+            gridGap = '16px';
         }
         else if (isTablet) {
             computeColumns = 2;
             packColumns = 2;
-            padding = '0 30px 30px';
+            padding = '0 32px 48px';
+            titleSize = '28px';
+            subtitleSize = '15px';
+            headerMargin = this.SPACING.md;
+            gridGap = '20px';
         }
         else if (isLaptop) {
             computeColumns = 3;
-            packColumns = 2;
-            padding = '0 40px 40px';
+            packColumns = 3;
+            padding = '0 48px 60px';
+            titleSize = '32px';
+            subtitleSize = '16px';
+            headerMargin = this.SPACING.lg;
+            gridGap = '24px';
+        }
+        // Adjust columns based on package count if small
+        const packageCount = this.getPackages().length;
+        if (!isMobile && packageCount < packColumns) {
+            packColumns = packageCount;
         }
         return {
             containerPadding: padding,
             computeGridColumns: `repeat(${computeColumns}, 1fr)`,
             packGridColumns: `repeat(${packColumns}, 1fr)`,
+            titleFontSize: titleSize,
+            subtitleFontSize: subtitleSize,
+            headerMargin: headerMargin,
+            gridGap: gridGap,
         };
     }
     /**
@@ -8758,20 +8773,23 @@ class GenericPackageModal extends BasePackageModal {
      * Apply modal styling (hook method override)
      */
     applyModalStyling() {
-        // Modify modal style - make card fully fill
+        // Modify modal style - make card fully fill, remove white background
         const modalElement = document.querySelector('.payment-modal');
         if (modalElement) {
             modalElement.style.background = 'transparent';
+            modalElement.style.backgroundColor = 'transparent';
             modalElement.style.border = 'none';
             modalElement.style.padding = '0';
-            modalElement.style.borderRadius = '16px';
-            modalElement.style.overflow = 'hidden';
+            modalElement.style.borderRadius = '0';
+            modalElement.style.overflow = 'visible';
+            modalElement.style.boxShadow = 'none';
         }
         // Modify content container style - remove padding
         const contentElement = document.querySelector('.payment-modal-content');
         if (contentElement) {
             contentElement.style.padding = '0';
             contentElement.style.margin = '0';
+            contentElement.style.background = 'transparent';
         }
         // Listen for close button event from card
         const container = this.getContentContainer();
@@ -9166,7 +9184,7 @@ class GenericPackageModal extends BasePackageModal {
 /**
  * SDK version
  */
-const VERSION$2 = '0.9.2';
+const VERSION$2 = '0.9.5';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;