@seaverse/payment-sdk 0.9.4 → 0.9.5

package/README.md

@@ -1,6 +1,6 @@
 # @seaverse/payment-sdk
 
-> **Version**: 0.9.4 | **Language**: English
+> **Version**: 0.9.5 | **Language**: English
 
 A comprehensive payment solution for SeaVerse platform, providing credit management, payment checkout, subscription management, and order tracking.
 
@@ -928,6 +928,25 @@ import type {
 
 ## 📄 Changelog
 
+### v0.9.5 (2026-02-08) - CreditPackCard UI Refinement & Modal Fix
+
+**🎨 CreditPackCard UI Overhaul**:
+- **1:1 Design Restoration**: Rebuilt CreditPackCard to pixel-match reference design across all dimensions.
+  - Card: `246x252` → `228x auto`, `border-radius: 16px`, compact padding `28px 20px 16px`.
+  - Number: `36px` → `32px`, italic weight `600`, tighter letter-spacing.
+  - Credits text: `16px` at `0.45` opacity, 8px margin below.
+  - Bonus tag: `16px` bold green `#00E699`, `6px` border-radius, compact padding.
+  - Button: `48px` height, `14px` border-radius, `18px` font, fixed `16px` margin-top.
+- **Color System Update**: Unified to `#00E699` green palette across glow, bonus text, button gradient, and borders.
+- **Badge Refinement**: Reduced to `72px`, repositioned `top: -16px, right: -12px`, `12deg` rotation, italic "Double" text.
+- **Spacing Optimization**: Eliminated excessive gaps between bonus tag and button; content flows naturally without `flex: 1` or `margin-top: auto` stretch.
+
+**🔧 GenericPackageModal Fix**:
+- **Fixed White Background Layer**: Resolved issue where `.payment-modal` white background (`#ffffff`) was visible behind dark-themed cards.
+  - Added `backgroundColor: transparent`, `boxShadow: none`, `borderRadius: 0` overrides.
+  - Cleared `.payment-modal-content` background to transparent.
+- **SeaartPaymentSDK**: Now uses environment config `clientId` instead of user-provided one for correct payment gateway routing.
+
 ### v0.9.4 (2026-02-07) - Mobile Responsiveness & SDK Refinement
 
 **📱 Mobile & Responsive Enhancements**:
@@ -1022,5 +1041,5 @@ Issues and Pull Requests are welcome!
 
 ---
 
-**Last Updated**: 2026-02-07
-**SDK Version**: 0.9.4
+**Last Updated**: 2026-02-08
+**SDK Version**: 0.9.5

package/dist/index.browser.js

@@ -2968,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. 保存配置并标记已初始化
@@ -4489,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: {
@@ -4533,7 +4532,7 @@ const DESIGN_TOKENS = {
     },
     // 徽章
     badge: {
-        size: '86px',
+        size: '72px',
     },
 };
 /**
@@ -4591,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};
@@ -4600,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');
@@ -4619,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;
       `;
@@ -4637,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');
@@ -4711,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);
@@ -4727,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;
@@ -4736,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);
@@ -4748,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);
@@ -4784,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;
@@ -4794,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) {
@@ -4816,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;
@@ -4852,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%;';
@@ -4879,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');
@@ -8538,7 +8507,9 @@ class CreditPackageModal extends BasePackageModal {
           }
           .credit-pack-card {
             width: 100% !important;
-            height: 260px !important;
+            height: 300px !important;
+            padding: 28px 20px 20px !important;
+            border-radius: 20px !important;
           }
           .payment-modal {
             width: 95vw !important;
@@ -8802,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();
@@ -9210,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;