recur-tw 0.3.3 → 0.3.5

package/dist/index.cjs

@@ -643,21 +643,36 @@ var init_payment_form_skeleton = __esm({
           margin-bottom: 24px;
         }
 
+        .form-title {
+          font-size: 20px;
+          font-weight: 600;
+          color: #1a202c;
+          margin: 0 0 4px 0;
+        }
+
+        .form-subtitle {
+          font-size: 14px;
+          color: #718096;
+          margin: 0;
+        }
+
         .form-section {
           margin-bottom: 24px;
         }
 
         .section-title {
-          margin: 0 0 12px 0;
-          font-size: 16px;
+          font-size: 14px;
           font-weight: 600;
           color: #2d3748;
+          margin: 0 0 12px 0;
         }
 
         .label {
+          display: block;
           font-size: 14px;
-          color: #4a5568;
-          margin-bottom: 4px;
+          font-weight: 500;
+          color: #2d3748;
+          margin-bottom: 6px;
         }
 
         /* Skeleton base styles */
@@ -665,7 +680,7 @@ var init_payment_form_skeleton = __esm({
           background: linear-gradient(
             90deg,
             #f0f0f0 0%,
-            #f8f8f8 50%,
+            #e8e8e8 50%,
             #f0f0f0 100%
           );
           background-size: 200% 100%;
@@ -682,68 +697,109 @@ var init_payment_form_skeleton = __esm({
           }
         }
 
-        .skeleton-title {
-          height: 28px;
-          width: 200px;
+        /* Order Summary */
+        .order-summary {
+          background: #f7fafc;
+          border: 1px solid #e2e8f0;
+          border-radius: 8px;
+          padding: 16px;
+          margin-bottom: 24px;
+        }
+
+        .order-summary-title {
+          font-size: 14px;
+          font-weight: 600;
+          color: #2d3748;
+          margin: 0 0 12px 0;
+        }
+
+        .order-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
           margin-bottom: 8px;
         }
 
-        .skeleton-subtitle {
-          height: 18px;
-          width: 320px;
+        .order-row:last-child {
+          margin-bottom: 0;
+          padding-top: 12px;
+          border-top: 1px solid #e2e8f0;
         }
 
-        .skeleton-order-summary {
-          padding: 16px;
+        .order-label {
+          font-size: 14px;
+          color: #4a5568;
+        }
+
+        .skeleton-order-value {
+          height: 20px;
+          width: 80px;
+        }
+
+        .skeleton-order-total {
+          height: 26px;
+          width: 100px;
+        }
+
+        /* Customer Info Display */
+        .customer-info-display {
           background: #f7fafc;
+          border: 1px solid #e2e8f0;
           border-radius: 6px;
-          margin-bottom: 24px;
+          padding: 12px;
+          margin-bottom: 8px;
         }
 
-        .skeleton-order-row {
+        .info-row {
           display: flex;
-          justify-content: space-between;
           align-items: center;
-          margin-bottom: 12px;
+          margin-bottom: 6px;
         }
 
-        .skeleton-order-row:last-child {
+        .info-row:last-child {
           margin-bottom: 0;
-          padding-top: 12px;
-          border-top: 1px solid #e2e8f0;
-          font-weight: 600;
         }
 
-        .skeleton-order-value {
+        .info-label {
+          font-size: 13px;
+          color: #718096;
+          min-width: 80px;
+        }
+
+        .skeleton-info-value {
           height: 20px;
           width: 120px;
         }
 
-        .input-group {
+        /* Card Fields */
+        .card-field {
           margin-bottom: 16px;
         }
 
-        .input-group:last-child {
+        .card-field:last-child {
           margin-bottom: 0;
         }
 
         .skeleton-input {
-          height: 44px;
+          height: 36px;
           width: 100%;
+          border-radius: 6px;
         }
 
-        .card-fields-grid {
+        .card-row {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 12px;
         }
 
+        /* Submit Button - matches .recur-submit-button: padding 14px*2 + font 16px * line-height ~1.5 */
         .skeleton-button {
-          height: 44px;
+          height: 52px;
           width: 100%;
           border-radius: 6px;
         }
 
+        /* Security Note */
         .security-note {
           display: flex;
           align-items: center;
@@ -766,73 +822,67 @@ var init_payment_form_skeleton = __esm({
       </style>
 
       <div class="payment-form-wrapper">
-        <!-- Header Skeleton -->
+        <!-- Header (matches payment-form.ts) -->
         <div class="form-header">
-          <div class="skeleton skeleton-title"></div>
-          <div class="skeleton skeleton-subtitle"></div>
+          <h2 class="form-title">\u8A02\u95B1\u4ED8\u6B3E</h2>
+          <p class="form-subtitle">\u8ACB\u586B\u5BEB\u4FE1\u7528\u5361\u8CC7\u8A0A\u5B8C\u6210\u8A02\u95B1</p>
         </div>
 
-        <!-- Order Summary - Static labels, skeleton values -->
-        <div class="skeleton-order-summary">
-          <h3 class="section-title">\u8A02\u55AE\u6458\u8981</h3>
-          <div class="skeleton-order-row">
-            <span class="label">\u65B9\u6848</span>
-            <div class="skeleton skeleton-order-value"></div>
-          </div>
-          <div class="skeleton-order-row">
-            <span class="label">\u91D1\u984D</span>
+        <!-- Order Summary (matches createOrderSummarySection) -->
+        <div class="order-summary">
+          <h3 class="order-summary-title">\u8A02\u55AE\u6458\u8981</h3>
+          <div class="order-row">
+            <span class="order-label">\u8A02\u95B1\u65B9\u6848</span>
             <div class="skeleton skeleton-order-value"></div>
           </div>
-          <div class="skeleton-order-row">
-            <span class="label">\u9031\u671F</span>
+          <div class="order-row">
+            <span class="order-label">\u8A08\u8CBB\u9031\u671F</span>
             <div class="skeleton skeleton-order-value"></div>
           </div>
-          <div class="skeleton-order-row">
-            <span class="label">\u7E3D\u8A08</span>
-            <div class="skeleton skeleton-order-value"></div>
+          <div class="order-row">
+            <span class="order-label">\u7E3D\u8A08</span>
+            <div class="skeleton skeleton-order-total"></div>
           </div>
         </div>
 
-        <!-- Customer Info Section - Static labels, skeleton inputs -->
+        <!-- Customer Info Section (matches createCustomerInfoSection read-only display) -->
         <div class="form-section">
           <h3 class="section-title">\u5BA2\u6236\u8CC7\u8A0A</h3>
-          <div class="input-group">
-            <div class="label">\u59D3\u540D</div>
-            <div class="skeleton skeleton-input"></div>
-          </div>
-          <div class="input-group">
-            <div class="label">Email</div>
-            <div class="skeleton skeleton-input"></div>
-          </div>
-          <div class="input-group">
-            <div class="label">\u96FB\u8A71\uFF08\u9078\u586B\uFF09</div>
-            <div class="skeleton skeleton-input"></div>
+          <div class="customer-info-display">
+            <div class="info-row">
+              <span class="info-label">\u5BA2\u6236\u59D3\u540D\uFF1A</span>
+              <div class="skeleton skeleton-info-value"></div>
+            </div>
+            <div class="info-row">
+              <span class="info-label">\u96FB\u5B50\u90F5\u4EF6\uFF1A</span>
+              <div class="skeleton skeleton-info-value" style="width: 160px;"></div>
+            </div>
           </div>
         </div>
 
-        <!-- Card Fields Section - Static labels, skeleton inputs -->
+        <!-- Card Fields Section (matches createCardFieldsSection) -->
         <div class="form-section">
           <h3 class="section-title">\u4FE1\u7528\u5361\u8CC7\u8A0A</h3>
-          <div class="input-group">
-            <div class="label">\u4FE1\u7528\u5361\u865F</div>
+          <div class="card-field">
+            <label class="label">\u5361\u865F</label>
             <div class="skeleton skeleton-input"></div>
           </div>
-          <div class="card-fields-grid">
-            <div class="input-group">
-              <div class="label">\u6709\u6548\u671F\u9650</div>
+          <div class="card-row">
+            <div class="card-field">
+              <label class="label">\u6709\u6548\u671F\u9650</label>
               <div class="skeleton skeleton-input"></div>
             </div>
-            <div class="input-group">
-              <div class="label">\u5B89\u5168\u78BC</div>
+            <div class="card-field">
+              <label class="label">\u5B89\u5168\u78BC</label>
               <div class="skeleton skeleton-input"></div>
             </div>
           </div>
         </div>
 
-        <!-- Submit Button Skeleton -->
+        <!-- Submit Button -->
         <div class="skeleton skeleton-button"></div>
 
-        <!-- Security Note -->
+        <!-- Security Note (matches payment-form.ts) -->
         <div class="security-note">
           <svg class="security-icon" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
@@ -1190,10 +1240,10 @@ var init_payment_form = __esm({
         }
 
         .form-title {
-          font-size: 24px;
+          font-size: 20px;
           font-weight: 600;
           color: #1a202c;
-          margin: 0 0 8px 0;
+          margin: 0 0 4px 0;
         }
 
         .form-subtitle {
@@ -1241,8 +1291,8 @@ var init_payment_form = __esm({
 
       <div class="payment-form-wrapper">
         <div class="form-header">
-          <h2 class="form-title">\u4ED8\u6B3E\u8CC7\u8A0A</h2>
-          <p class="form-subtitle">\u8ACB\u586B\u5BEB\u60A8\u7684\u4FE1\u7528\u5361\u8CC7\u8A0A\u4EE5\u5B8C\u6210\u8A02\u95B1</p>
+          <h2 class="form-title">\u8A02\u95B1\u4ED8\u6B3E</h2>
+          <p class="form-subtitle">\u8ACB\u586B\u5BEB\u4FE1\u7528\u5361\u8CC7\u8A0A\u5B8C\u6210\u8A02\u95B1</p>
         </div>
 
         <!-- Slot for order summary (Light DOM) -->
@@ -1375,12 +1425,14 @@ var init_payment_form = __esm({
 
         .order-summary-value {
           font-size: 14px;
+          line-height: 20px;
           font-weight: 500;
           color: #2d3748;
         }
 
         .order-summary-total {
           font-size: 18px;
+          line-height: 26px;
           font-weight: 700;
           color: #1a202c;
         }
@@ -1438,6 +1490,7 @@ var init_payment_form = __esm({
 
           .recur-info-value {
             font-size: 14px;
+            line-height: 20px;
             color: #2d3748;
             font-weight: 500;
           }
@@ -1556,11 +1609,43 @@ var init_payment_form = __esm({
           grid-template-columns: 1fr 1fr;
           gap: 12px;
         }
+
+        /* Container needs relative positioning for skeleton overlay */
+        .recur-card-field-container {
+          position: relative;
+        }
+
+        /* Loading skeleton for card fields - shown until PAYUNi iframe loads */
+        .recur-card-skeleton {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 36px;
+          width: 100%;
+          background: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 50%, #f0f0f0 100%);
+          background-size: 200% 100%;
+          animation: recur-skeleton-loading 1.5s ease-in-out infinite;
+          border-radius: 4px;
+          z-index: 1;
+          pointer-events: none;
+        }
+
+        /* Hide skeleton when PAYUNi iframe is ready (has content) */
+        .recur-card-skeleton.hidden {
+          display: none;
+        }
+
+        @keyframes recur-skeleton-loading {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
       </style>
 
       <div class="recur-card-field">
         <label class="recur-card-field-label">\u5361\u865F</label>
         <div class="recur-card-field-container" id="${this.containerId}-card-no-wrapper">
+          <!-- Skeleton shown until PAYUNi iframe loads -->
+          <div class="recur-card-skeleton" id="${this.containerId}-card-no-skeleton"></div>
           <!-- PAYUNi \u6703\u5728\u9019\u88E1\u6CE8\u5165 iframe -->
           <div id="${this.containerId}-card-no" class="recur-payuni-iframe"></div>
         </div>
@@ -1570,6 +1655,7 @@ var init_payment_form = __esm({
         <div class="recur-card-field">
           <label class="recur-card-field-label">\u6709\u6548\u671F\u9650</label>
           <div class="recur-card-field-container" id="${this.containerId}-card-exp-wrapper">
+            <div class="recur-card-skeleton" id="${this.containerId}-card-exp-skeleton"></div>
             <div id="${this.containerId}-card-exp" class="recur-payuni-iframe"></div>
           </div>
         </div>
@@ -1577,6 +1663,7 @@ var init_payment_form = __esm({
         <div class="recur-card-field">
           <label class="recur-card-field-label">\u5B89\u5168\u78BC</label>
           <div class="recur-card-field-container" id="${this.containerId}-card-cvc-wrapper">
+            <div class="recur-card-skeleton" id="${this.containerId}-card-cvc-skeleton"></div>
             <div id="${this.containerId}-card-cvc" class="recur-payuni-iframe"></div>
           </div>
         </div>
@@ -1584,6 +1671,22 @@ var init_payment_form = __esm({
     `;
         return section;
       }
+      /**
+       * Hide card field skeletons after PAYUNi iframes are loaded
+       */
+      hideCardSkeletons() {
+        const skeletonIds = [
+          `${this.containerId}-card-no-skeleton`,
+          `${this.containerId}-card-exp-skeleton`,
+          `${this.containerId}-card-cvc-skeleton`
+        ];
+        skeletonIds.forEach((id) => {
+          const skeleton = document.getElementById(id);
+          if (skeleton) {
+            skeleton.classList.add("hidden");
+          }
+        });
+      }
       createActionsSection() {
         const section = document.createElement("div");
         section.className = "actions-section";
@@ -1708,6 +1811,7 @@ var init_payment_form = __esm({
             this._isInitializing = false;
             return null;
           }
+          this.hideCardSkeletons();
           paymentSession.onUpdate?.((data) => {
             if (this._initializationAborted) {
               console.log("[PaymentForm] Ignoring onUpdate event - component disconnected");
@@ -2283,9 +2387,6 @@ function RecurProvider({ children, config: initialConfig = {} }) {
           modalContent = document.createElement("div");
           modalContent.className = "recur-sdk__modal-content";
           modalContent.style.cssText = `
-            background: white;
-            padding: 32px;
-            border-radius: 12px;
             max-width: 500px;
             width: 90%;
             max-height: 90vh;
@@ -2297,11 +2398,11 @@ function RecurProvider({ children, config: initialConfig = {} }) {
           closeButton.innerHTML = "\u2715";
           closeButton.style.cssText = `
             position: absolute;
-            top: 16px;
-            right: 16px;
-            background: none;
+            top: 12px;
+            right: 12px;
+            background: rgba(0, 0, 0, 0.05);
             border: none;
-            font-size: 24px;
+            font-size: 18px;
             cursor: pointer;
             color: #666;
             padding: 0;
@@ -2310,24 +2411,32 @@ function RecurProvider({ children, config: initialConfig = {} }) {
             display: flex;
             align-items: center;
             justify-content: center;
+            border-radius: 50%;
+            z-index: 10;
+            transition: background 0.2s;
           `;
+          closeButton.onmouseover = () => {
+            closeButton.style.background = "rgba(0, 0, 0, 0.1)";
+          };
+          closeButton.onmouseout = () => {
+            closeButton.style.background = "rgba(0, 0, 0, 0.05)";
+          };
           closeButton.onclick = () => {
             modalOverlay?.remove();
             setIsCheckingOut(false);
             options.onPaymentCancel?.();
           };
-          const title = document.createElement("h2");
-          title.className = "recur-sdk__title";
-          title.textContent = "\u8A02\u95B1\u4ED8\u6B3E";
-          title.style.cssText = "margin: 0 0 24px 0; font-size: 24px; font-weight: 600;";
           loadingContainer = document.createElement("div");
           loadingContainer.id = "recur-modal-loading";
           loadingContainer.className = "recur-sdk__loading-container";
-          loadingContainer.style.cssText = "padding: 0;";
+          loadingContainer.style.cssText = `
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+          `;
           const skeleton = document.createElement("recur-payment-form-skeleton");
           loadingContainer.appendChild(skeleton);
           modalContent.appendChild(closeButton);
-          modalContent.appendChild(title);
           modalContent.appendChild(loadingContainer);
           modalOverlay.appendChild(modalContent);
           document.body.appendChild(modalOverlay);

package/dist/index.d.cts

@@ -414,6 +414,10 @@ declare class RecurPaymentForm extends HTMLElement {
     private createOrderSummarySection;
     private createCustomerInfoSection;
     private createCardFieldsSection;
+    /**
+     * Hide card field skeletons after PAYUNi iframes are loaded
+     */
+    private hideCardSkeletons;
     private createActionsSection;
     /**
      * 初始化 PAYUNi SDK

package/dist/index.d.ts

@@ -414,6 +414,10 @@ declare class RecurPaymentForm extends HTMLElement {
     private createOrderSummarySection;
     private createCustomerInfoSection;
     private createCardFieldsSection;
+    /**
+     * Hide card field skeletons after PAYUNi iframes are loaded
+     */
+    private hideCardSkeletons;
     private createActionsSection;
     /**
      * 初始化 PAYUNi SDK