@seaverse/payment-sdk 0.9.7 → 0.9.9

package/dist/index.d.ts

@@ -1597,6 +1597,12 @@ interface PaymentModalOptions {
     className?: string;
     /** 弹框宽度（默认: 480px） */
     maxWidth?: string;
+    /** 弹框背景色（默认: #ffffff） */
+    background?: string;
+    /** 弹框边框样式（默认: 1px solid rgba(0, 0, 0, 0.1)） */
+    border?: string;
+    /** 弹框圆角（默认: 16px） */
+    borderRadius?: string;
 }
 declare class PaymentModal {
     private overlay;

package/dist/index.js

@@ -1885,6 +1885,9 @@ class PaymentModal {
             onClose: options.onClose ?? (() => { }),
             className: options.className ?? '',
             maxWidth: options.maxWidth ?? '480px',
+            background: options.background ?? '#ffffff',
+            border: options.border ?? '1px solid rgba(0, 0, 0, 0.1)',
+            borderRadius: options.borderRadius ?? '16px',
         };
     }
     /**
@@ -2011,15 +2014,14 @@ class PaymentModal {
       width: 100%;
       max-width: ${this.options.maxWidth};
       overflow-y: auto;
-      border-radius: 16px;
-      border: 1px solid rgba(0, 0, 0, 0.1);
-      background: #ffffff;
+      overflow-x: hidden;
+      border-radius: ${this.options.borderRadius};
+      border: ${this.options.border};
+      background: ${this.options.background};
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
       transform: translateY(20px);
       opacity: 0;
-    `;
-        // 自定义滚动条样式
-        this.modal.style.cssText += `
+      outline: none;
       scrollbar-width: thin;
       scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
     `;
@@ -8304,6 +8306,9 @@ class CreditPackageModal extends BasePackageModal {
             closeOnOverlayClick: false, // Disable click overlay to close
             closeOnEsc: false, // Disable ESC key to close
             maxWidth: '1200px',
+            background: '#0a0a0f',
+            border: '1px solid #0a0a0f',
+            borderRadius: '24px',
             onClose: () => {
                 this.cleanup();
                 this.options.onClose?.();
@@ -8475,12 +8480,12 @@ class CreditPackageModal extends BasePackageModal {
      * Apply modal styling (hook method override)
      */
     applyModalStyling() {
-        // Modify modal background to dark
-        const modalElement = document.querySelector('.payment-modal');
-        if (modalElement) {
-            modalElement.style.background = '#0a0a0f';
-            modalElement.style.border = '1px solid rgba(255, 255, 255, 0.1)';
-            modalElement.style.borderRadius = '24px';
+        // Modal background, border, and borderRadius are now configured
+        // via PaymentModal constructor options in createModal()
+        // Remove content container padding — renderContent manages its own padding
+        const contentContainer = this.getContentContainer();
+        if (contentContainer) {
+            contentContainer.style.padding = '0';
         }
         // Modify title style
         const titleElement = document.querySelector('.payment-modal-title');
@@ -8557,6 +8562,7 @@ class CreditPackageModal extends BasePackageModal {
       <div style="
         padding: ${styles.containerPadding};
         background: #0a0a0f;
+        border-radius: 24px;
         color: white;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       ">
@@ -8604,7 +8610,7 @@ class CreditPackageModal extends BasePackageModal {
         const isLaptop = window.matchMedia('(max-width: 1400px)').matches;
         let computeColumns = 5;
         let packColumns = 4;
-        let padding = '0 60px 60px';
+        let padding = '40px 60px 60px';
         let titleSize = '32px';
         let subtitleSize = '16px';
         let headerMargin = this.SPACING.lg;
@@ -8612,7 +8618,7 @@ class CreditPackageModal extends BasePackageModal {
         if (isMobile) {
             computeColumns = 1;
             packColumns = 1;
-            padding = '0 16px 32px';
+            padding = '24px 16px 32px';
             titleSize = '24px';
             subtitleSize = '14px';
             headerMargin = this.SPACING.md;
@@ -8621,7 +8627,7 @@ class CreditPackageModal extends BasePackageModal {
         else if (isTablet) {
             computeColumns = 2;
             packColumns = 2;
-            padding = '0 32px 48px';
+            padding = '32px 32px 48px';
             titleSize = '28px';
             subtitleSize = '15px';
             headerMargin = this.SPACING.md;
@@ -8630,7 +8636,7 @@ class CreditPackageModal extends BasePackageModal {
         else if (isLaptop) {
             computeColumns = 3;
             packColumns = 3;
-            padding = '0 48px 60px';
+            padding = '36px 48px 60px';
             titleSize = '32px';
             subtitleSize = '16px';
             headerMargin = this.SPACING.lg;