recur-tw 0.9.8 → 0.9.9

package/dist/index.js

@@ -1,3 +1,4 @@
+import { html, render, nothing } from 'lit-html';
 import React, { createContext, useState, useCallback, useMemo, useContext, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -604,14 +605,28 @@ var init_skeleton_loader = __esm({
   }
 });
 
+// src/components/styles/payment-form-skeleton.css
+var payment_form_skeleton_default;
+var init_payment_form_skeleton = __esm({
+  "src/components/styles/payment-form-skeleton.css"() {
+    payment_form_skeleton_default = "/**\n * Payment Form Skeleton - Shadow DOM Styles\n * Loading skeleton that matches the structure of RecurPaymentForm\n */\n\n:host {\n  display: block;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.payment-form-wrapper {\n  max-width: 500px;\n  margin: 0 auto;\n  padding: 24px;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* Header */\n.form-header {\n  margin-bottom: 24px;\n}\n\n.form-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a202c;\n  margin: 0 0 4px 0;\n}\n\n.form-subtitle {\n  font-size: 14px;\n  color: #718096;\n  margin: 0;\n}\n\n/* Sections */\n.form-section {\n  margin-bottom: 24px;\n}\n\n.section-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2d3748;\n  margin: 0 0 12px 0;\n}\n\n.label {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  color: #2d3748;\n  margin-bottom: 6px;\n}\n\n/* Skeleton base styles */\n.skeleton {\n  background: linear-gradient(\n    90deg,\n    #f0f0f0 0%,\n    #e8e8e8 50%,\n    #f0f0f0 100%\n  );\n  background-size: 200% 100%;\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n  border-radius: 4px;\n}\n\n@keyframes skeleton-loading {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n/* Order Summary */\n.order-summary {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  padding: 16px;\n}\n\n.order-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.order-row:last-child {\n  margin-bottom: 0;\n}\n\n.order-row--total {\n  padding-top: 12px;\n  border-top: 1px solid #e2e8f0;\n}\n\n.order-label {\n  font-size: 14px;\n  color: #4a5568;\n}\n\n.skeleton-order-value {\n  height: 20px;\n  width: 80px;\n}\n\n.skeleton-order-total {\n  height: 26px;\n  width: 100px;\n}\n\n/* Coupon Skeleton */\n.coupon-section {\n  padding: 12px 0;\n  border-top: 1px solid #e2e8f0;\n  margin-top: 12px;\n  min-height: 36px;\n  display: flex;\n  align-items: center;\n}\n\n.skeleton-coupon-trigger {\n  height: 20px;\n  width: 88px;\n}\n\n/* Customer Info Display */\n.customer-info-display {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  padding: 12px;\n  margin-bottom: 8px;\n}\n\n.info-row {\n  margin-bottom: 12px;\n}\n\n.info-row:last-child {\n  margin-bottom: 0;\n}\n\n.info-label {\n  display: block;\n  font-size: 12px;\n  line-height: 16px;\n  color: #718096;\n  margin-bottom: 2px;\n}\n\n.skeleton-info-value {\n  height: 20px;\n  width: 120px;\n}\n\n/* Card Fields */\n.card-field {\n  margin-bottom: 16px;\n}\n\n.card-field:last-child {\n  margin-bottom: 0;\n}\n\n.skeleton-input {\n  height: 36px;\n  width: 100%;\n  border-radius: 6px;\n}\n\n.card-row {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  column-gap: 16px;\n}\n\n/* Submit Button - matches .recur-submit-button: padding 14px*2 + font 16px * line-height ~1.5 */\n.skeleton-button {\n  height: 52px;\n  width: 100%;\n  border-radius: 6px;\n}\n\n/* Security Note */\n.security-note {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  background: #f7fafc;\n  border-radius: 6px;\n  margin-top: 16px;\n}\n\n.security-icon {\n  color: #48bb78;\n}\n\n.security-text {\n  font-size: 13px;\n  color: #4a5568;\n  margin: 0;\n}\n";
+  }
+});
+
 // src/components/base/payment-form-skeleton.ts
 var payment_form_skeleton_exports = {};
 __export(payment_form_skeleton_exports, {
   RecurPaymentFormSkeleton: () => RecurPaymentFormSkeleton
 });
-var RecurPaymentFormSkeleton;
-var init_payment_form_skeleton = __esm({
+var lockIcon, RecurPaymentFormSkeleton;
+var init_payment_form_skeleton2 = __esm({
   "src/components/base/payment-form-skeleton.ts"() {
+    init_payment_form_skeleton();
+    lockIcon = html`
+  <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" />
+  </svg>
+`;
     RecurPaymentFormSkeleton = class extends HTMLElement {
       constructor() {
         super();
@@ -620,275 +635,106 @@ var init_payment_form_skeleton = __esm({
       connectedCallback() {
         this.render();
       }
-      render() {
-        this.shadowRoot.innerHTML = `
-      <style>
-        :host {
-          display: block;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        }
-
-        .payment-form-wrapper {
-          max-width: 500px;
-          margin: 0 auto;
-          padding: 24px;
-          background: white;
-          border-radius: 12px;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        }
-
-        .form-header {
-          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 {
-          font-size: 14px;
-          font-weight: 600;
-          color: #2d3748;
-          margin: 0 0 12px 0;
-        }
-
-        .label {
-          display: block;
-          font-size: 14px;
-          font-weight: 500;
-          color: #2d3748;
-          margin-bottom: 6px;
-        }
-
-        /* Skeleton base styles */
-        .skeleton {
-          background: linear-gradient(
-            90deg,
-            #f0f0f0 0%,
-            #e8e8e8 50%,
-            #f0f0f0 100%
-          );
-          background-size: 200% 100%;
-          animation: skeleton-loading 1.5s ease-in-out infinite;
-          border-radius: 4px;
-        }
-
-        @keyframes skeleton-loading {
-          0% {
-            background-position: 200% 0;
-          }
-          100% {
-            background-position: -200% 0;
-          }
-        }
-
-        /* 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;
-        }
-
-        .order-row:last-child {
-          margin-bottom: 0;
-          padding-top: 12px;
-          border-top: 1px solid #e2e8f0;
-        }
-
-        .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;
-          padding: 12px;
-          margin-bottom: 8px;
-        }
-
-        .info-row {
-          margin-bottom: 12px;
-        }
-
-        .info-row:last-child {
-          margin-bottom: 0;
-        }
-
-        .info-label {
-          display: block;
-          font-size: 12px;
-          line-height: 16px;
-          color: #718096;
-          margin-bottom: 2px;
-        }
-
-        .skeleton-info-value {
-          height: 20px;
-          width: 120px;
-        }
-
-        /* Card Fields */
-        .card-field {
-          margin-bottom: 16px;
-        }
-
-        .card-field:last-child {
-          margin-bottom: 0;
-        }
-
-        .skeleton-input {
-          height: 36px;
-          width: 100%;
-          border-radius: 6px;
-        }
-
-        .card-row {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-          column-gap: 16px;
-        }
-
-        /* Submit Button - matches .recur-submit-button: padding 14px*2 + font 16px * line-height ~1.5 */
-        .skeleton-button {
-          height: 52px;
-          width: 100%;
-          border-radius: 6px;
-        }
-
-        /* Security Note */
-        .security-note {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          padding: 12px;
-          background: #f7fafc;
-          border-radius: 6px;
-          margin-top: 16px;
-        }
-
-        .security-icon {
-          color: #48bb78;
-        }
-
-        .security-text {
-          font-size: 13px;
-          color: #4a5568;
-          margin: 0;
-        }
-      </style>
-
-      <div class="payment-form-wrapper">
-        <!-- Header (matches payment-form.ts) -->
-        <div class="form-header">
-          <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 (matches createOrderSummarySection) -->
+      // ============================================
+      // Section Renderers
+      // ============================================
+      renderHeader() {
+        return html`
+      <div class="form-header">
+        <h2 class="form-title">訂閱付款</h2>
+      </div>
+    `;
+      }
+      renderOrderSummary() {
+        return html`
+      <div class="form-section">
+        <h3 class="section-title">訂單摘要</h3>
         <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>
+            <span class="order-label">訂閱方案</span>
             <div class="skeleton skeleton-order-value"></div>
           </div>
           <div class="order-row">
-            <span class="order-label">\u8A08\u8CBB\u9031\u671F</span>
+            <span class="order-label">計費週期</span>
             <div class="skeleton skeleton-order-value"></div>
           </div>
-          <div class="order-row">
-            <span class="order-label">\u7E3D\u8A08</span>
+          <div class="coupon-section">
+            <div class="skeleton skeleton-coupon-trigger"></div>
+          </div>
+          <div class="order-row order-row--total">
+            <span class="order-label">總計</span>
             <div class="skeleton skeleton-order-total"></div>
           </div>
         </div>
-
-        <!-- Customer Info Section (matches createCustomerInfoSection read-only display) -->
-        <div class="form-section">
-          <h3 class="section-title">\u806F\u7D61\u8CC7\u8A0A</h3>
-          <div class="customer-info-display">
-            <div class="info-row">
-              <span class="info-label">\u59D3\u540D</span>
-              <div class="skeleton skeleton-info-value"></div>
-            </div>
-            <div class="info-row">
-              <span class="info-label">\u96FB\u5B50\u90F5\u4EF6</span>
-              <div class="skeleton skeleton-info-value" style="width: 160px;"></div>
-            </div>
+      </div>
+    `;
+      }
+      renderCustomerInfo() {
+        return html`
+      <div class="form-section">
+        <h3 class="section-title">聯絡資訊</h3>
+        <div class="customer-info-display">
+          <div class="info-row">
+            <span class="info-label">姓名</span>
+            <div class="skeleton skeleton-info-value"></div>
+          </div>
+          <div class="info-row">
+            <span class="info-label">電子郵件</span>
+            <div class="skeleton skeleton-info-value" style="width: 160px;"></div>
           </div>
         </div>
-
-        <!-- Card Fields Section (matches createCardFieldsSection) -->
-        <div class="form-section">
-          <h3 class="section-title">\u4FE1\u7528\u5361\u8CC7\u8A0A</h3>
+      </div>
+    `;
+      }
+      renderCardFields() {
+        return html`
+      <div class="form-section">
+        <h3 class="section-title">信用卡資訊</h3>
+        <div class="card-field">
+          <label class="label">卡號</label>
+          <div class="skeleton skeleton-input"></div>
+        </div>
+        <div class="card-row">
           <div class="card-field">
-            <label class="label">\u5361\u865F</label>
+            <label class="label">有效期限</label>
             <div class="skeleton skeleton-input"></div>
           </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="card-field">
-              <label class="label">\u5B89\u5168\u78BC</label>
-              <div class="skeleton skeleton-input"></div>
-            </div>
+          <div class="card-field">
+            <label class="label">安全碼</label>
+            <div class="skeleton skeleton-input"></div>
           </div>
         </div>
+      </div>
+    `;
+      }
+      renderSubmitButton() {
+        return html`<div class="skeleton skeleton-button"></div>`;
+      }
+      renderSecurityNote() {
+        return html`
+      <div class="security-note">
+        ${lockIcon}
+        <p class="security-text">您的付款資訊經過加密保護</p>
+      </div>
+    `;
+      }
+      // ============================================
+      // Main Render
+      // ============================================
+      render() {
+        const template = html`
+      <style>${payment_form_skeleton_default}</style>
 
-        <!-- Submit Button -->
-        <div class="skeleton skeleton-button"></div>
-
-        <!-- 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" />
-          </svg>
-          <p class="security-text">\u60A8\u7684\u4ED8\u6B3E\u8CC7\u8A0A\u7D93\u904E\u52A0\u5BC6\u4FDD\u8B77</p>
-        </div>
+      <div class="payment-form-wrapper">
+        ${this.renderHeader()}
+        ${this.renderOrderSummary()}
+        ${this.renderCustomerInfo()}
+        ${this.renderCardFields()}
+        ${this.renderSubmitButton()}
+        ${this.renderSecurityNote()}
       </div>
     `;
+        render(template, this.shadowRoot);
       }
     };
     if (typeof window !== "undefined" && !customElements.get("recur-payment-form-skeleton")) {
@@ -1171,14 +1017,55 @@ var init_toast = __esm({
   }
 });
 
+// src/components/styles/payment-form-shadow.css
+var payment_form_shadow_default;
+var init_payment_form_shadow = __esm({
+  "src/components/styles/payment-form-shadow.css"() {
+    payment_form_shadow_default = "/**\n * Payment Form - Shadow DOM Styles\n * These styles are encapsulated within the Shadow DOM\n */\n\n:host {\n  display: block;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.payment-form-wrapper {\n  max-width: 500px;\n  margin: 0 auto;\n  padding: 24px;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  touch-action: manipulation;\n  container-type: inline-size;\n}\n\n.form-header {\n  margin-bottom: 24px;\n}\n\n.form-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a202c;\n  margin: 0 0 4px 0;\n}\n\n.form-subtitle {\n  font-size: 14px;\n  color: #718096;\n  margin: 0;\n}\n\n.form-section {\n  margin-bottom: 24px;\n}\n\n.section-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2d3748;\n  margin: 0 0 12px 0;\n}\n\n::slotted(*) {\n  display: block;\n}\n\n.security-note {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  background: #f7fafc;\n  border-radius: 6px;\n  margin-top: 16px;\n}\n\n.security-icon {\n  color: #48bb78;\n}\n\n.security-text {\n  font-size: 13px;\n  color: #4a5568;\n  margin: 0;\n}\n";
+  }
+});
+
+// src/components/styles/payment-form-light.css
+var payment_form_light_default;
+var init_payment_form_light = __esm({
+  "src/components/styles/payment-form-light.css"() {
+    payment_form_light_default = "/**\n * Payment Form - Light DOM Styles\n * These styles are applied to slotted content in the Light DOM\n * Using BEM naming convention with 'recur-' prefix for isolation\n */\n\n/* ============================================\n * Order Summary Styles\n * ============================================ */\n.recur-order-summary {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  padding: 16px;\n}\n\n.recur-order-summary__row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.recur-order-summary__row--total {\n  margin-bottom: 0;\n  padding-top: 12px;\n  border-top: 1px solid #e2e8f0;\n}\n\n.recur-order-summary__label {\n  font-size: 14px;\n  color: #4a5568;\n}\n\n.recur-order-summary__value {\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 500;\n  color: #2d3748;\n}\n\n.recur-order-summary__total {\n  font-size: 18px;\n  line-height: 26px;\n  font-weight: 700;\n  color: #1a202c;\n}\n\n/* ============================================\n * Coupon Section Styles\n * ============================================ */\n.recur-coupon {\n  padding: 12px 0;\n  border-top: 1px solid #e2e8f0;\n  margin-top: 12px;\n  min-height: 36px;\n  display: flex;\n  align-items: center;\n}\n\n.recur-coupon__trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  height: 36px;\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 14px;\n  line-height: 1;\n  color: #718096;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.recur-coupon__trigger:hover {\n  color: #4a5568;\n}\n\n.recur-coupon__trigger-icon {\n  width: 16px;\n  height: 16px;\n}\n\n.recur-coupon__input-row {\n  display: flex;\n  gap: 8px;\n  width: 100%;\n}\n\n.recur-coupon__input {\n  flex: 1;\n  height: 36px;\n  padding: 0 12px;\n  font-size: 14px;\n  text-transform: uppercase;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  outline: none;\n  transition: border-color 0.2s, box-shadow 0.2s;\n}\n\n.recur-coupon__input::placeholder {\n  text-transform: none;\n}\n\n.recur-coupon__input:focus {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.recur-coupon__btn {\n  height: 36px;\n  padding: 0 12px;\n  font-size: 14px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background-color 0.2s, opacity 0.2s;\n  white-space: nowrap;\n}\n\n.recur-coupon__btn--apply {\n  background: #18181b;\n  color: white;\n  border: none;\n}\n\n.recur-coupon__btn--apply:hover:not(:disabled) {\n  background: #27272a;\n}\n\n.recur-coupon__btn--apply:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.recur-coupon__btn--cancel {\n  background: transparent;\n  color: #718096;\n  border: 1px solid #d1d5db;\n}\n\n.recur-coupon__btn--cancel:hover {\n  background: #f7fafc;\n}\n\n.recur-coupon__error {\n  width: 100%;\n  margin-top: 8px;\n  font-size: 13px;\n  color: #dc2626;\n}\n\n.recur-coupon__applied {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 8px;\n  width: 100%;\n}\n\n.recur-coupon__applied-info {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  min-width: 0;\n}\n\n.recur-coupon__applied-icon {\n  width: 16px;\n  height: 16px;\n  color: #16a34a;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.recur-coupon__applied-details {\n  min-width: 0;\n}\n\n.recur-coupon__applied-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #16a34a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.recur-coupon__applied-code {\n  font-size: 12px;\n  color: #718096;\n}\n\n.recur-coupon__applied-amount {\n  font-size: 14px;\n  font-weight: 500;\n  color: #16a34a;\n  white-space: nowrap;\n}\n\n.recur-coupon__remove {\n  background: none;\n  border: none;\n  padding: 4px;\n  cursor: pointer;\n  color: #9ca3af;\n  border-radius: 4px;\n  transition: color 0.2s, background-color 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.recur-coupon__remove:hover {\n  color: #6b7280;\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.recur-coupon__remove-icon {\n  width: 14px;\n  height: 14px;\n}\n\n.recur-coupon__spinner {\n  width: 14px;\n  height: 14px;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: recur-spin 0.6s linear infinite;\n}\n\n/* Discount Row */\n.recur-order-summary__row--discount {\n  color: #16a34a;\n}\n\n.recur-order-summary__row--discount .recur-order-summary__value {\n  color: #16a34a;\n  font-weight: 500;\n}\n\n/* ============================================\n * Customer Info Styles\n * ============================================ */\n.recur-info-display {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  padding: 12px;\n  margin-bottom: 8px;\n}\n\n.recur-info-row {\n  margin-bottom: 12px;\n}\n\n.recur-info-row:last-child {\n  margin-bottom: 0;\n}\n\n.recur-info-label {\n  display: block;\n  font-size: 12px;\n  line-height: 16px;\n  color: #718096;\n  margin-bottom: 2px;\n}\n\n.recur-info-value {\n  display: block;\n  font-size: 14px;\n  line-height: 20px;\n  min-height: 20px;\n  color: #2d3748;\n  font-weight: 500;\n  word-break: break-all;\n}\n\n.recur-form-group {\n  margin-bottom: 16px;\n}\n\n.recur-form-label {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  color: #2d3748;\n  margin-bottom: 6px;\n}\n\n.recur-form-input {\n  width: 100%;\n  padding: 10px 12px;\n  font-size: 16px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  transition: border-color 0.2s;\n  box-sizing: border-box;\n}\n\n.recur-form-input:focus {\n  outline: none;\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.recur-form-input:hover:not(:focus) {\n  border-color: #9ca3af;\n}\n\n/* ============================================\n * Card Fields Styles\n * ============================================ */\n.recur-card-field {\n  margin-bottom: 16px;\n}\n\n.recur-card-field-label {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  color: #2d3748;\n  margin-bottom: 6px;\n}\n\n.recur-payuni-iframe {\n  height: 36px;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  touch-action: manipulation;\n}\n\n.recur-card-row {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  column-gap: 16px;\n  max-width: 100%;\n  box-sizing: border-box;\n}\n\n.recur-card-field-container {\n  position: relative;\n  touch-action: manipulation;\n}\n\n.recur-card-skeleton {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 36px;\n  width: 100%;\n  background: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 50%, #f0f0f0 100%);\n  background-size: 200% 100%;\n  animation: recur-skeleton-loading 1.5s ease-in-out infinite;\n  border-radius: 4px;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.recur-card-skeleton.hidden {\n  display: none;\n}\n\n@keyframes recur-skeleton-loading {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n/* ============================================\n * Submit Button Styles\n * ============================================ */\n.recur-submit-button {\n  width: 100%;\n  padding: 14px 20px;\n  font-size: 16px;\n  font-weight: 500;\n  color: #ffffff;\n  background: #18181b;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  box-sizing: border-box;\n}\n\n.recur-submit-button:hover:not(:disabled) {\n  background: #27272a;\n}\n\n.recur-submit-button:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.recur-submit-button.loading {\n  cursor: wait;\n}\n\n.recur-loading-spinner {\n  width: 16px;\n  height: 16px;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: recur-spin 0.6s linear infinite;\n}\n\n@keyframes recur-spin {\n  to { transform: rotate(360deg); }\n}\n";
+  }
+});
+
 // src/components/payment-form.ts
 var payment_form_exports = {};
 __export(payment_form_exports, {
   RecurPaymentForm: () => RecurPaymentForm
 });
-var RecurPaymentForm;
+var icons, RecurPaymentForm;
 var init_payment_form = __esm({
   "src/components/payment-form.ts"() {
+    init_payment_form_shadow();
+    init_payment_form_light();
+    icons = {
+      lock: html`
+    <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" />
+    </svg>
+  `,
+      tag: html`
+    <svg class="recur-coupon__trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+    </svg>
+  `,
+      tagApplied: html`
+    <svg class="recur-coupon__applied-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+    </svg>
+  `,
+      close: html`
+    <svg class="recur-coupon__remove-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  `,
+      spinner: html`<span class="recur-coupon__spinner"></span>`
+    };
     RecurPaymentForm = class extends HTMLElement {
       constructor() {
         super();
@@ -1186,6 +1073,12 @@ var init_payment_form = __esm({
         __publicField(this, "customStyles");
         __publicField(this, "_isInitializing", false);
         __publicField(this, "_initializationAborted", false);
+        // Coupon state
+        __publicField(this, "_showCouponInput", false);
+        __publicField(this, "_couponCode", "");
+        __publicField(this, "_couponLoading", false);
+        __publicField(this, "_couponError", null);
+        __publicField(this, "_appliedCoupon", null);
         this.containerId = this.getAttribute("container-id") || `recur-${Date.now()}`;
         this.customStyles = this.getAttribute("custom-styles") || "";
         this.attachShadow({ mode: "open" });
@@ -1203,183 +1096,129 @@ var init_payment_form = __esm({
           submitBtn.parentNode?.replaceChild(newBtn, submitBtn);
         }
       }
-      // 監聽 attribute 變化
       static get observedAttributes() {
-        return ["custom-styles", "customer-name", "customer-email", "product-name", "amount", "interval"];
+        return [
+          "custom-styles",
+          "customer-name",
+          "customer-email",
+          "product-name",
+          "amount",
+          "interval",
+          "checkout-id",
+          "publishable-key",
+          "api-base-url"
+        ];
       }
       attributeChangedCallback(name, oldValue, newValue) {
-        if (name === "custom-styles" && oldValue !== newValue) {
+        if (oldValue === newValue) return;
+        if (name === "custom-styles") {
           this.customStyles = newValue || "";
           this.updateCustomStyles();
-        } else if (oldValue !== newValue) {
-          this.updateCustomerInfoSection();
+        } else {
+          this.updateOrderSummaryDOM();
         }
       }
+      // ============================================
+      // Styles
+      // ============================================
+      getShadowDOMStyles() {
+        return payment_form_shadow_default;
+      }
+      getLightDOMStyles() {
+        return payment_form_light_default;
+      }
+      // ============================================
+      // Render Methods
+      // ============================================
       render() {
-        this.shadowRoot.innerHTML = `
-      <style>
-        :host {
-          display: block;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        }
-
-        .payment-form-wrapper {
-          max-width: 500px;
-          margin: 0 auto;
-          padding: 24px;
-          background: white;
-          border-radius: 12px;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-          /* Prevent double-tap zoom on iOS */
-          touch-action: manipulation;
-          /* Enable container queries for responsive layout */
-          container-type: inline-size;
-        }
-
-        .form-header {
-          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 {
-          font-size: 14px;
-          font-weight: 600;
-          color: #2d3748;
-          margin: 0 0 12px 0;
-        }
-
-        ::slotted(*) {
-          display: block;
-        }
-
-        .security-note {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          padding: 12px;
-          background: #f7fafc;
-          border-radius: 6px;
-          margin-top: 16px;
-        }
-
-        .security-icon {
-          color: #48bb78;
-        }
-
-        .security-text {
-          font-size: 13px;
-          color: #4a5568;
-          margin: 0;
-        }
-      </style>
+        this.renderShadowDOM();
+        this.renderLightDOM();
+      }
+      renderShadowDOM() {
+        const template = html`
+      <style>${this.getShadowDOMStyles()}</style>
 
       <div class="payment-form-wrapper">
         <div class="form-header">
-          <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>
+          <h2 class="form-title">訂閱付款</h2>
         </div>
 
-        <!-- Slot for order summary (Light DOM) -->
-        <slot name="order-summary"></slot>
+        <div class="form-section">
+          <h3 class="section-title">訂單摘要</h3>
+          <slot name="order-summary"></slot>
+        </div>
 
         <div class="form-section">
-          <h3 class="section-title">\u806F\u7D61\u8CC7\u8A0A</h3>
-          <!-- Slot for customer info fields (Light DOM) -->
+          <h3 class="section-title">聯絡資訊</h3>
           <slot name="customer-info"></slot>
         </div>
 
         <div class="form-section">
-          <h3 class="section-title">\u4FE1\u7528\u5361\u8CC7\u8A0A</h3>
-          <!-- Slot for PAYUNi card fields (Light DOM) -->
+          <h3 class="section-title">信用卡資訊</h3>
           <slot name="card-fields"></slot>
         </div>
 
-        <!-- Slot for submit button (Light DOM) -->
         <slot name="actions"></slot>
 
         <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" />
-          </svg>
-          <p class="security-text">\u60A8\u7684\u4ED8\u6B3E\u8CC7\u8A0A\u7D93\u904E\u52A0\u5BC6\u4FDD\u8B77</p>
+          ${icons.lock}
+          <p class="security-text">您的付款資訊經過加密保護</p>
         </div>
       </div>
     `;
-        this.createLightDOMContent();
-      }
-      createLightDOMContent() {
-        this.innerHTML = "";
-        const styleElement = document.createElement("style");
-        styleElement.id = `${this.containerId}-custom-styles`;
-        const idSpecificStyles = `
-      /* PAYUNi iframe \u5BB9\u5668\u9AD8\u5EA6\uFF08\u4F7F\u7528\u5BE6\u969B\u7684 container ID\uFF09 */
+        render(template, this.shadowRoot);
+      }
+      renderLightDOM() {
+        const template = html`
+      <style id="${this.containerId}-styles">
+        ${this.getLightDOMStyles()}
+        ${this.getCustomStyles()}
+      </style>
+
+      <div slot="order-summary">
+        ${this.renderOrderSummary()}
+      </div>
+
+      <div slot="customer-info">
+        ${this.renderCustomerInfo()}
+      </div>
+
+      <div slot="card-fields">
+        ${this.renderCardFields()}
+      </div>
+
+      <div slot="actions">
+        ${this.renderActions()}
+      </div>
+    `;
+        render(template, this);
+      }
+      getCustomStyles() {
+        return `
+      /* PAYUNi iframe container height */
       #${this.containerId}-card-no,
       #${this.containerId}-card-exp,
       #${this.containerId}-card-cvc {
         height: 36px !important;
       }
+      ${this.customStyles}
     `;
-        styleElement.textContent = this.customStyles + "\n" + idSpecificStyles;
-        this.appendChild(styleElement);
-        const orderSummary = this.createOrderSummarySection();
-        orderSummary.slot = "order-summary";
-        this.appendChild(orderSummary);
-        const customerInfo = this.createCustomerInfoSection();
-        customerInfo.slot = "customer-info";
-        this.appendChild(customerInfo);
-        const cardFields = this.createCardFieldsSection();
-        cardFields.slot = "card-fields";
-        this.appendChild(cardFields);
-        const actions = this.createActionsSection();
-        actions.slot = "actions";
-        this.appendChild(actions);
-      }
-      updateCustomerInfoSection() {
-        const existingSection = this.querySelector('[slot="customer-info"]');
-        if (existingSection) {
-          const newSection = this.createCustomerInfoSection();
-          newSection.slot = "customer-info";
-          existingSection.replaceWith(newSection);
-        }
       }
       updateCustomStyles() {
-        const styleElement = this.querySelector(`#${this.containerId}-custom-styles`);
+        const styleElement = this.querySelector(`#${this.containerId}-styles`);
         if (styleElement) {
-          const idSpecificStyles = `
-        /* PAYUNi iframe \u5BB9\u5668\u9AD8\u5EA6\uFF08\u4F7F\u7528\u5BE6\u969B\u7684 container ID\uFF09 */
-        #${this.containerId}-card-no,
-        #${this.containerId}-card-exp,
-        #${this.containerId}-card-cvc {
-          height: 36px !important;
-        }
-      `;
-          styleElement.textContent = this.customStyles + "\n" + idSpecificStyles;
+          styleElement.textContent = this.getLightDOMStyles() + this.getCustomStyles();
         }
       }
-      createOrderSummarySection() {
-        const section = document.createElement("div");
-        section.className = "order-summary-section";
+      // ============================================
+      // Section Renderers (lit-html)
+      // ============================================
+      renderOrderSummary() {
         const productName = this.getAttribute("product-name");
         const amount = this.getAttribute("amount");
         const interval = this.getAttribute("interval");
         if (!productName || !amount) {
-          return section;
+          return html`<div class="recur-order-summary" style="display: none;"></div>`;
         }
         const intervalMap = {
           "day": "\u65E5",
@@ -1388,275 +1227,444 @@ var init_payment_form = __esm({
           "year": "\u5E74"
         };
         const periodText = interval ? intervalMap[interval] || interval : "";
-        section.innerHTML = `
-      <style>
-        .order-summary-section {
-          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-summary-item {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 8px;
-        }
-
-        .order-summary-item:last-child {
-          margin-bottom: 0;
-          padding-top: 12px;
-          border-top: 1px solid #e2e8f0;
-        }
+        const originalAmount = Number(amount);
+        const discountAmount = this._appliedCoupon?.discountAmount || 0;
+        const finalAmount = originalAmount - discountAmount;
+        return html`
+      <div class="recur-order-summary" id="${this.containerId}-order-summary">
+        <div class="recur-order-summary__row">
+          <span class="recur-order-summary__label">訂閱方案</span>
+          <span class="recur-order-summary__value">${productName}</span>
+        </div>
 
-        .order-summary-label {
-          font-size: 14px;
-          color: #4a5568;
-        }
+        ${periodText ? html`
+          <div class="recur-order-summary__row">
+            <span class="recur-order-summary__label">計費週期</span>
+            <span class="recur-order-summary__value">每${periodText}</span>
+          </div>
+        ` : nothing}
 
-        .order-summary-value {
-          font-size: 14px;
-          line-height: 20px;
-          font-weight: 500;
-          color: #2d3748;
-        }
+        <div class="recur-coupon" id="${this.containerId}-coupon">
+          ${this.renderCoupon()}
+        </div>
 
-        .order-summary-total {
-          font-size: 18px;
-          line-height: 26px;
-          font-weight: 700;
-          color: #1a202c;
-        }
-      </style>
+        ${discountAmount > 0 ? html`
+          <div class="recur-order-summary__row">
+            <span class="recur-order-summary__label">小計</span>
+            <span class="recur-order-summary__value">NT$ ${originalAmount.toLocaleString()}</span>
+          </div>
+          <div class="recur-order-summary__row recur-order-summary__row--discount">
+            <span class="recur-order-summary__label">折扣</span>
+            <span class="recur-order-summary__value">-NT$ ${discountAmount.toLocaleString()}</span>
+          </div>
+        ` : nothing}
 
-      <h3 class="order-summary-title">\u8A02\u55AE\u6458\u8981</h3>
-      <div class="order-summary-item">
-        <span class="order-summary-label">\u8A02\u95B1\u65B9\u6848</span>
-        <span class="order-summary-value">${productName}</span>
-      </div>
-      ${periodText ? `
-        <div class="order-summary-item">
-          <span class="order-summary-label">\u8A08\u8CBB\u9031\u671F</span>
-          <span class="order-summary-value">\u6BCF${periodText}</span>
+        <div class="recur-order-summary__row recur-order-summary__row--total">
+          <span class="recur-order-summary__label">總計</span>
+          <span class="recur-order-summary__total">NT$ ${finalAmount.toLocaleString()}</span>
         </div>
-      ` : ""}
-      <div class="order-summary-item">
-        <span class="order-summary-label">\u7E3D\u8A08</span>
-        <span class="order-summary-total">NT$ ${Number(amount).toLocaleString()}</span>
       </div>
     `;
-        return section;
       }
-      createCustomerInfoSection() {
-        const section = document.createElement("div");
-        section.className = "customer-info-section";
-        const customerName = this.getAttribute("customer-name");
-        const customerEmail = this.getAttribute("customer-email");
-        if (customerEmail) {
-          section.innerHTML = `
-        <style>
-          .recur-info-display {
-            background: #f7fafc;
-            border: 1px solid #e2e8f0;
-            border-radius: 6px;
-            padding: 12px;
-            margin-bottom: 8px;
-          }
-
-          .recur-info-row {
-            margin-bottom: 12px;
-          }
-
-          .recur-info-row:last-child {
-            margin-bottom: 0;
-          }
-
-          .recur-info-label {
-            display: block;
-            font-size: 12px;
-            line-height: 16px;
-            color: #718096;
-            margin-bottom: 2px;
-          }
-
-          .recur-info-value {
-            display: block;
-            font-size: 14px;
-            line-height: 20px;
-            min-height: 20px;
-            color: #2d3748;
-            font-weight: 500;
-            word-break: break-all;
-          }
-        </style>
-
-        <div class="recur-info-display">
-          ${customerName ? `
-            <div class="recur-info-row">
-              <span class="recur-info-label">\u59D3\u540D</span>
-              <span class="recur-info-value">${customerName}</span>
+      renderCoupon() {
+        if (this._appliedCoupon) {
+          return html`
+        <div class="recur-coupon__applied">
+          <div class="recur-coupon__applied-info">
+            ${icons.tagApplied}
+            <div class="recur-coupon__applied-details">
+              <div class="recur-coupon__applied-name">
+                ${this._appliedCoupon.couponName || this._appliedCoupon.code}
+              </div>
+              ${this._appliedCoupon.couponName ? html`
+                <div class="recur-coupon__applied-code">代碼：${this._appliedCoupon.code}</div>
+              ` : nothing}
             </div>
-          ` : ""}
-          <div class="recur-info-row">
-            <span class="recur-info-label">\u96FB\u5B50\u90F5\u4EF6</span>
-            <span class="recur-info-value">${customerEmail}</span>
           </div>
+          <span class="recur-coupon__applied-amount">
+            -NT$ ${this._appliedCoupon.discountAmount.toLocaleString()}
+          </span>
+          <button
+            type="button"
+            class="recur-coupon__remove"
+            ?disabled=${this._couponLoading}
+            @click=${() => this.removeCoupon()}
+          >
+            ${this._couponLoading ? icons.spinner : icons.close}
+          </button>
         </div>
       `;
-        } else {
-          section.innerHTML = `
-        <style>
-          /* \u9019\u4E9B\u6A23\u5F0F\u5728 Light DOM \u4E2D\uFF0C\u6703\u5F71\u97FF\u5168\u5C40 */
-          /* \u4F7F\u7528\u5E36 prefix \u7684 class name \u907F\u514D\u885D\u7A81 */
-          .recur-form-group {
-            margin-bottom: 16px;
-          }
-
-          .recur-form-label {
-            display: block;
-            font-size: 14px;
-            font-weight: 500;
-            color: #2d3748;
-            margin-bottom: 6px;
-          }
-
-          .recur-form-input {
-            width: 100%;
-            padding: 10px 12px;
-            font-size: 16px; /* 16px prevents iOS Safari auto-zoom on focus */
-            border: 1px solid #d1d5db;
-            border-radius: 6px;
-            transition: border-color 0.2s;
-            box-sizing: border-box;
-          }
-
-          .recur-form-input:focus {
-            outline: none;
-            border-color: #3b82f6;
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-          }
-
-          .recur-form-input:hover:not(:focus) {
-            border-color: #9ca3af;
-          }
-        </style>
-
-        <div class="recur-form-group">
-          <label class="recur-form-label" for="${this.containerId}-email">Email</label>
-          <input
-            type="email"
-            id="${this.containerId}-email"
-            class="recur-form-input"
-            placeholder="your@email.com"
-            required
-          />
+        }
+        if (this._showCouponInput) {
+          return html`
+        <div style="width: 100%;">
+          <div class="recur-coupon__input-row">
+            <input
+              type="text"
+              class="recur-coupon__input"
+              id="${this.containerId}-coupon-input"
+              placeholder="輸入優惠碼"
+              .value=${this._couponCode}
+              ?disabled=${this._couponLoading}
+              @input=${(e) => this.handleCouponInputChange(e)}
+              @keydown=${(e) => this.handleCouponKeydown(e)}
+            />
+            <button
+              type="button"
+              class="recur-coupon__btn recur-coupon__btn--apply"
+              ?disabled=${this._couponLoading || !this._couponCode.trim()}
+              @click=${() => this.applyCoupon()}
+            >
+              ${this._couponLoading ? icons.spinner : "\u5957\u7528"}
+            </button>
+            <button
+              type="button"
+              class="recur-coupon__btn recur-coupon__btn--cancel"
+              ?disabled=${this._couponLoading}
+              @click=${() => this.cancelCouponInput()}
+            >
+              取消
+            </button>
+          </div>
+          ${this._couponError ? html`
+            <div class="recur-coupon__error">${this._couponError}</div>
+          ` : nothing}
         </div>
-
-        <div class="recur-form-group">
-          <label class="recur-form-label" for="${this.containerId}-name">\u59D3\u540D</label>
+      `;
+        }
+        return html`
+      <button
+        type="button"
+        class="recur-coupon__trigger"
+        @click=${() => this.showCouponInput()}
+      >
+        ${icons.tag}
+        有優惠碼？
+      </button>
+    `;
+      }
+      // Coupon event handlers
+      showCouponInput() {
+        this._showCouponInput = true;
+        this._couponError = null;
+        this.updateCouponSectionDOM();
+        requestAnimationFrame(() => {
+          const input = document.getElementById(`${this.containerId}-coupon-input`);
+          input?.focus();
+        });
+      }
+      cancelCouponInput() {
+        this._showCouponInput = false;
+        this._couponCode = "";
+        this._couponError = null;
+        this.updateCouponSectionDOM();
+      }
+      handleCouponInputChange(e) {
+        this._couponCode = e.target.value.toUpperCase();
+        this._couponError = null;
+        this.updateApplyButtonState();
+      }
+      handleCouponKeydown(e) {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          this.applyCoupon();
+        } else if (e.key === "Escape") {
+          this.cancelCouponInput();
+        }
+      }
+      updateApplyButtonState() {
+        const btn = this.querySelector(".recur-coupon__btn--apply");
+        if (btn) {
+          btn.disabled = this._couponLoading || !this._couponCode.trim();
+        }
+      }
+      // Direct DOM manipulation for coupon section updates (avoids lit-html tracking issues)
+      updateCouponSectionDOM() {
+        const container = document.getElementById(`${this.containerId}-coupon`);
+        if (!container) return;
+        if (this._appliedCoupon) {
+          container.innerHTML = this.getCouponAppliedHTML();
+          this.bindCouponAppliedEvents(container);
+        } else if (this._showCouponInput) {
+          container.innerHTML = this.getCouponInputHTML();
+          this.bindCouponInputEvents(container);
+        } else {
+          container.innerHTML = this.getCouponTriggerHTML();
+          this.bindCouponTriggerEvents(container);
+        }
+      }
+      getCouponTriggerHTML() {
+        return `
+      <button type="button" class="recur-coupon__trigger">
+        <svg class="recur-coupon__trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+        </svg>
+        \u6709\u512A\u60E0\u78BC\uFF1F
+      </button>
+    `;
+      }
+      getCouponInputHTML() {
+        const errorHTML = this._couponError ? `<div class="recur-coupon__error">${this._couponError}</div>` : "";
+        return `
+      <div style="width: 100%;">
+        <div class="recur-coupon__input-row">
           <input
             type="text"
-            id="${this.containerId}-name"
-            class="recur-form-input"
-            placeholder="\u738B\u5C0F\u660E"
-            value="${customerName || ""}"
-            required
+            class="recur-coupon__input"
+            id="${this.containerId}-coupon-input"
+            placeholder="\u8F38\u5165\u512A\u60E0\u78BC"
+            value="${this._couponCode}"
+            ${this._couponLoading ? "disabled" : ""}
           />
+          <button
+            type="button"
+            class="recur-coupon__btn recur-coupon__btn--apply"
+            ${this._couponLoading || !this._couponCode.trim() ? "disabled" : ""}
+          >
+            ${this._couponLoading ? '<span class="recur-coupon__spinner"></span>' : "\u5957\u7528"}
+          </button>
+          <button
+            type="button"
+            class="recur-coupon__btn recur-coupon__btn--cancel"
+            ${this._couponLoading ? "disabled" : ""}
+          >
+            \u53D6\u6D88
+          </button>
         </div>
-      `;
-        }
-        return section;
+        ${errorHTML}
+      </div>
+    `;
       }
-      createCardFieldsSection() {
-        const section = document.createElement("div");
-        section.className = "card-fields-section";
-        section.innerHTML = `
-      <style>
-        .recur-card-field {
-          margin-bottom: 16px;
+      getCouponAppliedHTML() {
+        const coupon = this._appliedCoupon;
+        const codeHTML = coupon.couponName ? `<div class="recur-coupon__applied-code">\u4EE3\u78BC\uFF1A${coupon.code}</div>` : "";
+        return `
+      <div class="recur-coupon__applied">
+        <div class="recur-coupon__applied-info">
+          <svg class="recur-coupon__applied-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+          </svg>
+          <div class="recur-coupon__applied-details">
+            <div class="recur-coupon__applied-name">${coupon.couponName || coupon.code}</div>
+            ${codeHTML}
+          </div>
+        </div>
+        <span class="recur-coupon__applied-amount">-NT$ ${coupon.discountAmount.toLocaleString()}</span>
+        <button type="button" class="recur-coupon__remove" ${this._couponLoading ? "disabled" : ""}>
+          ${this._couponLoading ? '<span class="recur-coupon__spinner"></span>' : '<svg class="recur-coupon__remove-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>'}
+        </button>
+      </div>
+    `;
+      }
+      bindCouponTriggerEvents(container) {
+        const btn = container.querySelector(".recur-coupon__trigger");
+        btn?.addEventListener("click", () => this.showCouponInput());
+      }
+      bindCouponInputEvents(container) {
+        const input = container.querySelector(".recur-coupon__input");
+        const applyBtn = container.querySelector(".recur-coupon__btn--apply");
+        const cancelBtn = container.querySelector(".recur-coupon__btn--cancel");
+        input?.addEventListener("input", (e) => this.handleCouponInputChange(e));
+        input?.addEventListener("keydown", (e) => this.handleCouponKeydown(e));
+        applyBtn?.addEventListener("click", () => this.applyCoupon());
+        cancelBtn?.addEventListener("click", () => this.cancelCouponInput());
+      }
+      bindCouponAppliedEvents(container) {
+        const removeBtn = container.querySelector(".recur-coupon__remove");
+        removeBtn?.addEventListener("click", () => this.removeCoupon());
+      }
+      updateOrderSummaryDOM() {
+        const summaryContainer = document.getElementById(`${this.containerId}-order-summary`);
+        if (!summaryContainer) return;
+        const amount = Number(this.getAttribute("amount") || 0);
+        const discountAmount = this._appliedCoupon?.discountAmount || 0;
+        const finalAmount = amount - discountAmount;
+        let discountRow = summaryContainer.querySelector(".recur-order-summary__row--discount");
+        const totalRow = summaryContainer.querySelector(".recur-order-summary__row--total");
+        if (discountAmount > 0) {
+          if (!discountRow && totalRow) {
+            const subtotalHTML = `
+          <div class="recur-order-summary__row">
+            <span class="recur-order-summary__label">\u5C0F\u8A08</span>
+            <span class="recur-order-summary__value">NT$ ${amount.toLocaleString()}</span>
+          </div>
+        `;
+            const discountHTML = `
+          <div class="recur-order-summary__row recur-order-summary__row--discount">
+            <span class="recur-order-summary__label">\u6298\u6263</span>
+            <span class="recur-order-summary__value">-NT$ ${discountAmount.toLocaleString()}</span>
+          </div>
+        `;
+            totalRow.insertAdjacentHTML("beforebegin", subtotalHTML + discountHTML);
+          }
+        } else {
+          const subtotalRow = summaryContainer.querySelector(".recur-order-summary__row:not(.recur-order-summary__row--total):last-of-type");
+          discountRow?.remove();
+          if (subtotalRow?.querySelector(".recur-order-summary__label")?.textContent === "\u5C0F\u8A08") {
+            subtotalRow.remove();
+          }
         }
-
-        .recur-card-field-label {
-          display: block;
-          font-size: 14px;
-          font-weight: 500;
-          color: #2d3748;
-          margin-bottom: 6px;
+        const totalValue = totalRow?.querySelector(".recur-order-summary__total");
+        if (totalValue) {
+          totalValue.textContent = `NT$ ${finalAmount.toLocaleString()}`;
         }
-
-        /* PAYUNi iframe \u5BB9\u5668\u6A23\u5F0F */
-        .recur-payuni-iframe {
-          height: 36px;
-          width: 100%;
-          max-width: 100%;
-          box-sizing: border-box;
-          /* Help reduce iOS zoom issues */
-          touch-action: manipulation;
+        this.updateCouponSectionDOM();
+      }
+      // ============================================
+      // Coupon API Methods
+      // ============================================
+      async applyCoupon() {
+        const code = this._couponCode.trim();
+        if (!code) {
+          this._couponError = "\u8ACB\u8F38\u5165\u512A\u60E0\u78BC";
+          this.updateCouponSectionDOM();
+          return;
         }
-
-        .recur-card-row {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-          column-gap: 16px;
-          max-width: 100%;
-          box-sizing: border-box;
+        const checkoutId = this.getAttribute("checkout-id");
+        const apiBaseUrl = this.getAttribute("api-base-url") || "";
+        if (!checkoutId) {
+          this._couponError = "\u7121\u6CD5\u5957\u7528\u512A\u60E0\u78BC";
+          this.updateCouponSectionDOM();
+          return;
         }
-
-        /* Container needs relative positioning for skeleton overlay */
-        .recur-card-field-container {
-          position: relative;
-          /* Help reduce iOS zoom issues */
-          touch-action: manipulation;
+        this._couponLoading = true;
+        this._couponError = null;
+        this.updateCouponSectionDOM();
+        try {
+          const response = await fetch(`${apiBaseUrl}/api/checkout/${checkoutId}/coupon`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ code })
+          });
+          const data = await response.json();
+          if (!response.ok) {
+            this._couponError = data.error?.message || "\u512A\u60E0\u78BC\u7121\u6548";
+            this._couponLoading = false;
+            this.updateCouponSectionDOM();
+            return;
+          }
+          this._appliedCoupon = {
+            code: data.discount.code,
+            couponName: data.discount.couponName,
+            discountType: data.discount.discountType,
+            discountAmount: data.discount.discountAmount,
+            duration: data.discount.duration,
+            durationMonths: data.discount.durationMonths,
+            bonusTrialDays: data.discount.bonusTrialDays,
+            bonusMonths: data.discount.bonusMonths
+          };
+          this._showCouponInput = false;
+          this._couponCode = "";
+          this._couponLoading = false;
+          this.updateOrderSummaryDOM();
+          this.dispatchEvent(new CustomEvent("coupon-applied", {
+            detail: { coupon: this._appliedCoupon },
+            bubbles: true,
+            composed: true
+          }));
+        } catch (err) {
+          this._couponError = "\u7DB2\u8DEF\u932F\u8AA4\uFF0C\u8ACB\u7A0D\u5F8C\u518D\u8A66";
+          this._couponLoading = false;
+          this.updateCouponSectionDOM();
         }
-
-        /* 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;
+      }
+      async removeCoupon() {
+        const checkoutId = this.getAttribute("checkout-id");
+        const apiBaseUrl = this.getAttribute("api-base-url") || "";
+        if (!checkoutId) {
+          return;
         }
-
-        /* Hide skeleton when PAYUNi iframe is ready (has content) */
-        .recur-card-skeleton.hidden {
-          display: none;
+        this._couponLoading = true;
+        this.updateCouponSectionDOM();
+        try {
+          const response = await fetch(`${apiBaseUrl}/api/checkout/${checkoutId}/coupon`, {
+            method: "DELETE"
+          });
+          if (!response.ok) {
+            const data = await response.json();
+            this._couponError = data.error?.message || "\u79FB\u9664\u5931\u6557";
+            this._couponLoading = false;
+            this.updateCouponSectionDOM();
+            return;
+          }
+          const removedCoupon = this._appliedCoupon;
+          this._appliedCoupon = null;
+          this._couponLoading = false;
+          this.updateOrderSummaryDOM();
+          this.dispatchEvent(new CustomEvent("coupon-removed", {
+            detail: { coupon: removedCoupon },
+            bubbles: true,
+            composed: true
+          }));
+        } catch (err) {
+          this._couponError = "\u7DB2\u8DEF\u932F\u8AA4\uFF0C\u8ACB\u7A0D\u5F8C\u518D\u8A66";
+          this._couponLoading = false;
+          this.updateCouponSectionDOM();
         }
-
-        @keyframes recur-skeleton-loading {
-          0% { background-position: 200% 0; }
-          100% { background-position: -200% 0; }
+      }
+      /**
+       * Get applied coupon (for external use)
+       */
+      getAppliedCoupon() {
+        return this._appliedCoupon;
+      }
+      renderCustomerInfo() {
+        const customerName = this.getAttribute("customer-name");
+        const customerEmail = this.getAttribute("customer-email");
+        if (customerEmail) {
+          return html`
+        <div class="recur-info-display">
+          ${customerName ? html`
+            <div class="recur-info-row">
+              <span class="recur-info-label">姓名</span>
+              <span class="recur-info-value">${customerName}</span>
+            </div>
+          ` : nothing}
+          <div class="recur-info-row">
+            <span class="recur-info-label">電子郵件</span>
+            <span class="recur-info-value">${customerEmail}</span>
+          </div>
+        </div>
+      `;
         }
-      </style>
+        return html`
+      <div class="recur-form-group">
+        <label class="recur-form-label" for="${this.containerId}-email">Email</label>
+        <input
+          type="email"
+          id="${this.containerId}-email"
+          class="recur-form-input"
+          placeholder="your@email.com"
+          required
+        />
+      </div>
 
+      <div class="recur-form-group">
+        <label class="recur-form-label" for="${this.containerId}-name">姓名</label>
+        <input
+          type="text"
+          id="${this.containerId}-name"
+          class="recur-form-input"
+          placeholder="王小明"
+          .value=${customerName || ""}
+          required
+        />
+      </div>
+    `;
+      }
+      renderCardFields() {
+        return html`
       <div class="recur-card-field">
-        <label class="recur-card-field-label">\u5361\u865F</label>
+        <label class="recur-card-field-label">卡號</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>
       </div>
 
       <div class="recur-card-row">
         <div class="recur-card-field">
-          <label class="recur-card-field-label">\u6709\u6548\u671F\u9650</label>
+          <label class="recur-card-field-label">有效期限</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>
@@ -1664,7 +1672,7 @@ var init_payment_form = __esm({
         </div>
 
         <div class="recur-card-field">
-          <label class="recur-card-field-label">\u5B89\u5168\u78BC</label>
+          <label class="recur-card-field-label">安全碼</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>
@@ -1672,11 +1680,7 @@ var init_payment_form = __esm({
         </div>
       </div>
     `;
-        return section;
       }
-      /**
-       * Hide card field skeletons after PAYUNi iframes are loaded
-       */
       hideCardSkeletons() {
         const skeletonIds = [
           `${this.containerId}-card-no-skeleton`,
@@ -1690,71 +1694,21 @@ var init_payment_form = __esm({
           }
         });
       }
-      createActionsSection() {
-        const section = document.createElement("div");
-        section.className = "actions-section";
-        section.innerHTML = `
-      <style>
-        .recur-submit-button {
-          width: 100%;
-          padding: 14px 20px;
-          font-size: 16px;
-          font-weight: 500;
-          color: #ffffff;
-          background: #18181b;
-          border: none;
-          border-radius: 6px;
-          cursor: pointer;
-          transition: background-color 0.2s;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 8px;
-          box-sizing: border-box;
-        }
-
-        .recur-submit-button:hover:not(:disabled) {
-          background: #27272a;
-        }
-
-        .recur-submit-button:disabled {
-          opacity: 0.6;
-          cursor: not-allowed;
-        }
-
-        .recur-submit-button.loading {
-          cursor: wait;
-        }
-
-        .recur-loading-spinner {
-          width: 16px;
-          height: 16px;
-          border: 2px solid currentColor;
-          border-top-color: transparent;
-          border-radius: 50%;
-          animation: recur-spin 0.6s linear infinite;
-        }
-
-        @keyframes recur-spin {
-          to { transform: rotate(360deg); }
-        }
-      </style>
-
+      renderActions() {
+        return html`
       <button
         type="submit"
         id="${this.containerId}-submit-btn"
         class="recur-submit-button"
         disabled
       >
-        <span id="${this.containerId}-submit-text">\u78BA\u8A8D\u4ED8\u6B3E</span>
+        <span id="${this.containerId}-submit-text">確認付款</span>
       </button>
     `;
-        return section;
       }
-      /**
-       * 初始化 PAYUNi SDK
-       * 這個方法會在外部調用，傳入 SDK token
-       */
+      // ============================================
+      // PAYUNi Integration
+      // ============================================
       async initializePayment(sdkToken, environment) {
         if (this._initializationAborted) {
           console.log("[PaymentForm] Initialization aborted before start");
@@ -1788,7 +1742,6 @@ var init_payment_form = __esm({
           const paymentSession = window.UniPayment.createSession(sdkToken, {
             env: environment === "SANDBOX" ? "S" : "P",
             elements: {
-              // 這些 ID 在 Light DOM 中，document.getElementById 可以找到
               CardNo: `${this.containerId}-card-no`,
               CardExp: `${this.containerId}-card-exp`,
               CardCvc: `${this.containerId}-card-cvc`
@@ -1877,17 +1830,17 @@ var init_payment_form = __esm({
             detail: {
               customerEmail: email,
               customerName: name,
-              paymentSession: this._paymentSession
+              paymentSession: this._paymentSession,
+              appliedCoupon: this._appliedCoupon
             },
             bubbles: true,
             composed: true
-            // 讓事件可以穿透 Shadow DOM
           }));
         });
       }
-      /**
-       * Set button loading state
-       */
+      // ============================================
+      // UI Helpers
+      // ============================================
       setButtonLoading(loading) {
         const submitBtn = document.getElementById(`${this.containerId}-submit-btn`);
         if (!submitBtn) return;
@@ -1904,16 +1857,9 @@ var init_payment_form = __esm({
           submitBtn.innerHTML = '<span id="' + this.containerId + '-submit-text">\u78BA\u8A8D\u4ED8\u6B3E</span>';
         }
       }
-      /**
-       * Reset button to normal state (call this when payment completes or fails)
-       */
       resetButton() {
         this.setButtonLoading(false);
       }
-      /**
-       * Set verifying state (for 3D Secure verification)
-       * Shows a "verifying" message while polling for 3D result
-       */
       setVerifying(verifying) {
         const submitBtn = document.getElementById(`${this.containerId}-submit-btn`);
         if (!submitBtn) return;
@@ -1928,9 +1874,6 @@ var init_payment_form = __esm({
           this.setButtonLoading(false);
         }
       }
-      /**
-       * Show error message using RecurErrorDisplay component
-       */
       showError(message) {
         let errorContainer = this.querySelector(".recur-sdk__error-container");
         if (!errorContainer) {
@@ -1946,18 +1889,12 @@ var init_payment_form = __esm({
         errorContainer.appendChild(errorDisplay);
         errorDisplay.scrollIntoView({ behavior: "smooth", block: "center" });
       }
-      /**
-       * Clear any displayed errors
-       */
       clearError() {
         const errorContainer = this.querySelector(".recur-sdk__error-container");
         if (errorContainer) {
           errorContainer.innerHTML = "";
         }
       }
-      /**
-       * 等待組件完全連接到 DOM
-       */
       updateComplete() {
         return new Promise((resolve) => {
           if (this.isConnected) {
@@ -1973,18 +1910,12 @@ var init_payment_form = __esm({
           }
         });
       }
-      /**
-       * 獲取表單數據
-       */
       getFormData() {
         return {
           email: document.getElementById(`${this.containerId}-email`)?.value,
           name: document.getElementById(`${this.containerId}-name`)?.value
         };
       }
-      /**
-       * 設置表單數據
-       */
       setFormData(data) {
         if (data.email) {
           const emailInput = document.getElementById(`${this.containerId}-email`);
@@ -2538,7 +2469,7 @@ async function registerComponents() {
     Promise.resolve().then(() => (init_success_message(), success_message_exports)),
     Promise.resolve().then(() => (init_error_display(), error_display_exports)),
     Promise.resolve().then(() => (init_skeleton_loader(), skeleton_loader_exports)),
-    Promise.resolve().then(() => (init_payment_form_skeleton(), payment_form_skeleton_exports)),
+    Promise.resolve().then(() => (init_payment_form_skeleton2(), payment_form_skeleton_exports)),
     Promise.resolve().then(() => (init_toast(), toast_exports)),
     Promise.resolve().then(() => (init_payment_form(), payment_form_exports)),
     Promise.resolve().then(() => (init_checkout_button(), checkout_button_exports)),