recur-tw 0.17.0 → 0.19.0

package/dist/index.cjs

@@ -757,7 +757,7 @@ var init_payment_form_skeleton = __esmMin((() => {
 }));
 
 //#endregion
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -769,7 +769,7 @@ function _typeof(o) {
 var init_typeof = __esmMin((() => {}));
 
 //#endregion
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -785,7 +785,7 @@ var init_toPrimitive = __esmMin((() => {
 }));
 
 //#endregion
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
@@ -796,7 +796,7 @@ var init_toPropertyKey = __esmMin((() => {
 }));
 
 //#endregion
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -1067,6 +1067,410 @@ var init_toast = __esmMin((() => {
 	if (typeof window !== "undefined" && !customElements.get("recur-toast-container")) customElements.define("recur-toast-container", RecurToastContainer);
 }));
 
+//#endregion
+//#region src/einvoice.ts
+/**
+* 統一編號 checksum (post-2023 rule: weighted digit-sum divisible by 5, with
+* the 7-in-7th-digit alternate). Providers reject checksum-invalid UBNs at
+* issue time as a non-retryable failure, so the SDK catches this at entry.
+*/
+function isValidTaiwanUbn(ubn) {
+	if (!UBN_RE.test(ubn)) return false;
+	const weights = [
+		1,
+		2,
+		1,
+		2,
+		1,
+		2,
+		4,
+		1
+	];
+	let sum = 0;
+	for (let i = 0; i < 8; i++) {
+		const product = Number(ubn.charAt(i)) * (weights[i] ?? 0);
+		sum += Math.floor(product / 10) + product % 10;
+	}
+	if (sum % 5 === 0) return true;
+	return ubn.charAt(6) === "7" && (sum + 1) % 5 === 0;
+}
+/**
+* Validate buyer invoice preferences.
+*
+* @returns an error message, or `null` when the prefs are valid
+*/
+function validateEinvoicePrefs(prefs) {
+	if (typeof prefs !== "object" || prefs === null) return "Invalid einvoice prefs: expected an object like { type: \"personal\" }";
+	switch (prefs.type) {
+		case "personal": return null;
+		case "mobile_barcode": return MOBILE_BARCODE_RE.test(prefs.carrierCode) ? null : "Invalid einvoice mobile barcode: must be \"/\" followed by 7 characters (0-9, A-Z, ., +, -)";
+		case "ubn":
+			if (!isValidTaiwanUbn(prefs.ubn)) return "Invalid einvoice UBN (統一編號): must be 8 digits with a valid checksum";
+			if (!prefs.buyerName || !prefs.buyerName.trim() || prefs.buyerName.trim().length > 60) return "Invalid einvoice buyerName (公司抬頭): required, at most 60 characters";
+			return null;
+		case "donation": return DONATION_CODE_RE.test(prefs.donationCode) ? null : "Invalid einvoice donation code (愛心碼): must be 3-7 digits";
+		default: return `Invalid einvoice type: ${String(prefs.type)}`;
+	}
+}
+/** Throw when buyer invoice preferences are invalid (fail fast, before the API call). */
+function assertValidEinvoicePrefs(prefs) {
+	const error = validateEinvoicePrefs(prefs);
+	if (error) throw new Error(error);
+}
+var MOBILE_BARCODE_RE, UBN_RE, DONATION_CODE_RE;
+var init_einvoice = __esmMin((() => {
+	MOBILE_BARCODE_RE = /^\/[0-9A-Z.+-]{7}$/;
+	UBN_RE = /^\d{8}$/;
+	DONATION_CODE_RE = /^\d{3,7}$/;
+}));
+
+//#endregion
+//#region src/components/einvoice-section.ts
+/**
+* <recur-einvoice-section> — Taiwan e-invoice (電子發票) buyer preferences
+*
+* Rendered inside <recur-payment-form> when the organization has an active
+* e-invoice integration (einvoice-enabled attribute), mirroring the hosted
+* checkout's 發票資訊 section: four choices (個人 / 手機條碼 / 統編 / 捐贈)
+* with per-type fields, hints, and blur-triggered validation.
+*
+* Attributes:
+* - defaults: JSON-encoded EinvoicePrefs used as the initial selection
+*
+* API:
+* - getValidatedPrefs(): EinvoicePrefs | null — validates (surfacing inline
+*   errors) and returns the prefs, or null when invalid
+* - einvoice-change CustomEvent (composed) fired on every state change with
+*   detail.prefs (null while the current input is invalid)
+*
+* Self-contained Shadow DOM: no third-party SDK needs to reach these inputs
+* (unlike the PAYUNi card containers, which must live in Light DOM).
+*/
+var einvoice_section_exports = /* @__PURE__ */ __exportAll({ RecurEinvoiceSection: () => RecurEinvoiceSection });
+var OPTIONS, styles, RecurEinvoiceSection;
+var init_einvoice_section = __esmMin((() => {
+	init_einvoice();
+	init_defineProperty();
+	OPTIONS = [
+		{
+			value: "personal",
+			label: "個人電子發票",
+			caption: "發票將寄送至您的 Email"
+		},
+		{
+			value: "mobile_barcode",
+			label: "手機條碼載具",
+			caption: "發票存入您的手機條碼"
+		},
+		{
+			value: "ubn",
+			label: "公司統編（三聯式）",
+			caption: "開立含統編的三聯式發票"
+		},
+		{
+			value: "donation",
+			label: "捐贈發票",
+			caption: "將發票捐贈給社福機構"
+		}
+	];
+	styles = `
+  :host {
+    display: block;
+    font-family: inherit;
+    color: var(--recur-text-color, #1f2937);
+  }
+  .einvoice-options { display: flex; flex-direction: column; gap: 8px; }
+  .einvoice-option {
+    display: flex; align-items: center; gap: 10px;
+    padding: 10px 12px;
+    border: 1px solid var(--recur-border-color, #e5e7eb);
+    border-radius: var(--recur-border-radius, 8px);
+    cursor: pointer;
+    background: var(--recur-bg-color, #fff);
+    transition: border-color 0.15s;
+    text-align: left;
+    width: 100%;
+    font: inherit;
+  }
+  .einvoice-option[aria-checked="true"] {
+    border-color: var(--recur-primary-color, #2563eb);
+    box-shadow: 0 0 0 1px var(--recur-primary-color, #2563eb);
+  }
+  .einvoice-option .radio-dot {
+    width: 16px; height: 16px; border-radius: 50%;
+    border: 1.5px solid var(--recur-border-color, #d1d5db);
+    flex-shrink: 0; position: relative;
+  }
+  .einvoice-option[aria-checked="true"] .radio-dot {
+    border-color: var(--recur-primary-color, #2563eb);
+  }
+  .einvoice-option[aria-checked="true"] .radio-dot::after {
+    content: ''; position: absolute; inset: 3px;
+    border-radius: 50%; background: var(--recur-primary-color, #2563eb);
+  }
+  .option-label { font-size: 14px; font-weight: 500; }
+  .option-caption { font-size: 12px; color: var(--recur-muted-color, #6b7280); }
+  .einvoice-fields { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
+  .field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
+  .field input {
+    width: 100%; box-sizing: border-box;
+    padding: 8px 10px; font-size: 14px; font-family: inherit;
+    border: 1px solid var(--recur-border-color, #e5e7eb);
+    border-radius: var(--recur-border-radius, 8px);
+    background: var(--recur-bg-color, #fff);
+    color: inherit;
+  }
+  .field input:focus {
+    outline: none;
+    border-color: var(--recur-primary-color, #2563eb);
+    box-shadow: 0 0 0 1px var(--recur-primary-color, #2563eb);
+  }
+  .field input[aria-invalid="true"] { border-color: var(--recur-error-color, #dc2626); }
+  .field .hint { font-size: 12px; color: var(--recur-muted-color, #6b7280); margin-top: 4px; }
+  .field .error { font-size: 12px; color: var(--recur-error-color, #dc2626); margin-top: 4px; }
+`;
+	RecurEinvoiceSection = class extends HTMLElement {
+		constructor() {
+			super();
+			_defineProperty(this, "selectedType", "personal");
+			_defineProperty(this, "values", {
+				carrierCode: "",
+				ubn: "",
+				buyerName: "",
+				donationCode: ""
+			});
+			_defineProperty(this, "touched", {
+				carrierCode: false,
+				ubn: false,
+				buyerName: false,
+				donationCode: false
+			});
+			this.attachShadow({ mode: "open" });
+		}
+		static get observedAttributes() {
+			return ["defaults"];
+		}
+		connectedCallback() {
+			this.applyDefaults(this.getAttribute("defaults"));
+			this.render();
+		}
+		attributeChangedCallback(name, oldValue, newValue) {
+			if (name === "defaults" && oldValue !== newValue) {
+				this.applyDefaults(newValue);
+				if (this.isConnected) this.render();
+			}
+		}
+		applyDefaults(raw) {
+			if (!raw) return;
+			try {
+				const prefs = JSON.parse(raw);
+				this.selectedType = "personal";
+				switch (prefs.type) {
+					case "mobile_barcode":
+						this.selectedType = "mobile_barcode";
+						this.values.carrierCode = "carrierCode" in prefs && prefs.carrierCode || "";
+						break;
+					case "ubn":
+						this.selectedType = "ubn";
+						this.values.ubn = "ubn" in prefs && prefs.ubn || "";
+						this.values.buyerName = "buyerName" in prefs && prefs.buyerName || "";
+						break;
+					case "donation":
+						this.selectedType = "donation";
+						this.values.donationCode = "donationCode" in prefs && prefs.donationCode || "";
+						break;
+					case "personal":
+						this.selectedType = "personal";
+						break;
+				}
+			} catch {}
+		}
+		buildPrefs() {
+			switch (this.selectedType) {
+				case "mobile_barcode": return {
+					type: "mobile_barcode",
+					carrierCode: this.values.carrierCode
+				};
+				case "ubn": return {
+					type: "ubn",
+					ubn: this.values.ubn,
+					buyerName: this.values.buyerName.trim()
+				};
+				case "donation": return {
+					type: "donation",
+					donationCode: this.values.donationCode
+				};
+				default: return { type: "personal" };
+			}
+		}
+		fieldError(field) {
+			switch (field) {
+				case "carrierCode":
+					if (this.selectedType !== "mobile_barcode") return null;
+					return MOBILE_BARCODE_RE.test(this.values.carrierCode) ? null : "手機條碼格式錯誤（/ 開頭共 8 碼）";
+				case "ubn":
+					if (this.selectedType !== "ubn") return null;
+					if (!UBN_RE.test(this.values.ubn)) return "統一編號須為 8 位數字";
+					return isValidTaiwanUbn(this.values.ubn) ? null : "統一編號檢查碼錯誤，請確認輸入是否正確";
+				case "buyerName":
+					if (this.selectedType !== "ubn") return null;
+					return this.values.buyerName.trim() ? null : "請填寫公司抬頭";
+				case "donationCode":
+					if (this.selectedType !== "donation") return null;
+					return DONATION_CODE_RE.test(this.values.donationCode) ? null : "愛心碼須為 3-7 位數字";
+			}
+		}
+		isValid() {
+			return [
+				"carrierCode",
+				"ubn",
+				"buyerName",
+				"donationCode"
+			].every((field) => this.fieldError(field) === null);
+		}
+		/**
+		* Validate the current selection, surfacing inline errors.
+		* @returns the prefs when valid, null otherwise
+		*/
+		getValidatedPrefs() {
+			this.touched = {
+				carrierCode: true,
+				ubn: true,
+				buyerName: true,
+				donationCode: true
+			};
+			this.render();
+			return this.isValid() ? this.buildPrefs() : null;
+		}
+		emitChange() {
+			this.dispatchEvent(new CustomEvent("einvoice-change", {
+				detail: { prefs: this.isValid() ? this.buildPrefs() : null },
+				bubbles: true,
+				composed: true
+			}));
+		}
+		selectType(type) {
+			if (this.selectedType === type) return;
+			this.selectedType = type;
+			this.render();
+			this.emitChange();
+		}
+		/** ARIA radio keyboard pattern: arrow keys move selection (with wrap). */
+		onOptionKeydown(event, index) {
+			const delta = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1 : event.key === "ArrowUp" || event.key === "ArrowLeft" ? -1 : 0;
+			if (delta === 0) return;
+			event.preventDefault();
+			const next = (index + delta + OPTIONS.length) % OPTIONS.length;
+			this.selectType(OPTIONS[next].value);
+			this.shadowRoot.querySelectorAll("[role=\"radio\"]")[next]?.focus();
+		}
+		onInput(field, event) {
+			const input = event.target;
+			let value = input.value;
+			if (field === "carrierCode") {
+				value = value.toUpperCase();
+				input.value = value;
+			}
+			if (field === "ubn" || field === "donationCode") {
+				value = value.replace(/\D/g, "");
+				input.value = value;
+			}
+			this.values[field] = value;
+			this.emitChange();
+		}
+		onBlur(field) {
+			this.touched[field] = true;
+			this.render();
+		}
+		renderField(opts) {
+			const { field, label, placeholder, hint, maxLength, inputMode } = opts;
+			const error = this.touched[field] ? this.fieldError(field) : null;
+			return lit_html.html`
+      <div class="field">
+        <label for="einvoice-${field}">${label}</label>
+        <input
+          id="einvoice-${field}"
+          type="text"
+          .value=${this.values[field]}
+          placeholder=${placeholder}
+          maxlength=${maxLength ?? lit_html.nothing}
+          inputmode=${inputMode ?? lit_html.nothing}
+          aria-invalid=${error ? "true" : "false"}
+          @input=${(e) => this.onInput(field, e)}
+          @blur=${() => this.onBlur(field)}
+        />
+        ${error ? lit_html.html`<p class="error" role="alert">${error}</p>` : hint ? lit_html.html`<p class="hint">${hint}</p>` : lit_html.nothing}
+      </div>
+    `;
+		}
+		renderFields() {
+			switch (this.selectedType) {
+				case "mobile_barcode": return lit_html.html`<div class="einvoice-fields">
+          ${this.renderField({
+					field: "carrierCode",
+					label: "手機條碼",
+					placeholder: "/ABC1234",
+					hint: "手機條碼共 8 碼，以 / 開頭",
+					maxLength: 8
+				})}
+        </div>`;
+				case "ubn": return lit_html.html`<div class="einvoice-fields">
+          ${this.renderField({
+					field: "ubn",
+					label: "統一編號",
+					placeholder: "12345675",
+					maxLength: 8,
+					inputMode: "numeric"
+				})}
+          ${this.renderField({
+					field: "buyerName",
+					label: "公司抬頭",
+					placeholder: "公司名稱",
+					maxLength: 60
+				})}
+        </div>`;
+				case "donation": return lit_html.html`<div class="einvoice-fields">
+          ${this.renderField({
+					field: "donationCode",
+					label: "愛心碼",
+					placeholder: "25885",
+					hint: "例如：25885（家扶基金會）、8957（創世基金會）",
+					maxLength: 7,
+					inputMode: "numeric"
+				})}
+        </div>`;
+				default: return lit_html.nothing;
+			}
+		}
+		render() {
+			(0, lit_html.render)(lit_html.html`
+      <style>${styles}</style>
+      <div class="einvoice-options" role="radiogroup" aria-label="發票類型">
+        ${OPTIONS.map((option, index) => lit_html.html`
+            <button
+              type="button"
+              class="einvoice-option"
+              role="radio"
+              aria-checked=${this.selectedType === option.value ? "true" : "false"}
+              tabindex=${this.selectedType === option.value ? "0" : "-1"}
+              @click=${() => this.selectType(option.value)}
+              @keydown=${(e) => this.onOptionKeydown(e, index)}
+            >
+              <span class="radio-dot"></span>
+              <span>
+                <span class="option-label">${option.label}</span><br />
+                <span class="option-caption">${option.caption}</span>
+              </span>
+            </button>
+          `)}
+      </div>
+      ${this.renderFields()}
+    `, this.shadowRoot);
+		}
+	};
+	if (typeof window !== "undefined" && !customElements.get("recur-einvoice-section")) customElements.define("recur-einvoice-section", RecurEinvoiceSection);
+}));
+
 //#endregion
 //#region src/components/styles/payment-form-shadow.css?css-text
 var payment_form_shadow_default;
@@ -1078,7 +1482,7 @@ var init_payment_form_shadow = __esmMin((() => {
 //#region src/components/styles/payment-form-light.css?css-text
 var payment_form_light_default;
 var init_payment_form_light = __esmMin((() => {
-	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  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n\n.recur-order-summary__total {\n  font-size: 18px;\n  line-height: 26px;\n  font-weight: 700;\n  color: #1a202c;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\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: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\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  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n}\n\n.recur-coupon__input-wrapper {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n}\n\n.recur-coupon__input {\n  width: 100%;\n  height: 36px;\n  padding: 0 32px 0 12px;\n  font-size: 14px;\n  text-transform: uppercase;\n  background-color: #ffffff;\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:hover:not(:focus) {\n  border-color: #9ca3af;\n}\n\n.recur-coupon__input:focus {\n  border-color: var(--ring, hsl(215 16% 47%));\n  outline: 0;\n  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring, hsl(215 16% 47%)) 50%, transparent);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n.recur-coupon__clear {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: none;\n  border: none;\n  padding: 4px;\n  cursor: pointer;\n  color: #9ca3af;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.2s;\n}\n\n.recur-coupon__clear:hover {\n  color: #6b7280;\n}\n\n.recur-coupon__clear-icon {\n  width: 16px;\n  height: 16px;\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  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.recur-coupon__btn--apply {\n  background: #18181b;\n  color: white;\n  border: none;\n  min-width: 52px;\n}\n\n.recur-coupon__btn--apply .recur-coupon__spinner {\n  width: 14px;\n  height: 14px;\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__error {\n  width: 100%;\n  margin-top: 8px;\n  font-size: 13px;\n  color: #dc2626;\n}\n\n.recur-coupon__applied-wrapper {\n  width: 100%;\n}\n\n.recur-coupon__description {\n  font-size: 12px;\n  color: #6b7280;\n  margin: 4px 0 0 22px;\n}\n\n.recur-coupon__bonus {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #dcfce7;\n  border-radius: 6px;\n  padding: 8px 12px;\n  margin-top: 8px;\n  font-size: 12px;\n  color: #15803d;\n}\n\n.recur-coupon__applied {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n}\n\n.recur-coupon__applied-info {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  flex: 1;\n}\n\n.recur-coupon__applied-icon {\n  width: 16px;\n  height: 16px;\n  color: #dc2626;\n  flex-shrink: 0;\n}\n\n.recur-coupon__applied-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #dc2626;\n  white-space: nowrap;\n}\n\n.recur-coupon__applied-code {\n  font-size: 14px;\n  color: #9ca3af;\n  white-space: nowrap;\n  margin-right: 2px;\n}\n\n.recur-coupon__applied-amount {\n  font-size: 14px;\n  font-weight: 500;\n  color: #dc2626;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n  flex-shrink: 0;\n  margin-left: auto;\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  flex-shrink: 0;\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  height: 36px;\n  padding: 0 12px;\n  font-size: 14px;\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  border-color: var(--ring, hsl(215 16% 47%));\n  outline: 0;\n  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring, hsl(215 16% 47%)) 50%, transparent);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\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\n/* ============================================\n * Skeleton Loading Styles\n * ============================================ */\n.recur-skeleton {\n  display: inline-block;\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}\n\n/* ============================================\n * Test Mode Banner Styles\n * ============================================ */\n.recur-test-mode-banner {\n  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n  border: 1px solid #f59e0b;\n  border-radius: 8px;\n  margin-bottom: 16px;\n  overflow: hidden;\n}\n\n.recur-test-mode-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 14px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.2s;\n}\n\n.recur-test-mode-header:hover {\n  background: rgba(245, 158, 11, 0.1);\n}\n\n.recur-test-mode-badge {\n  font-size: 13px;\n  font-weight: 600;\n  color: #92400e;\n}\n\n.recur-test-mode-toggle {\n  font-size: 12px;\n  color: #b45309;\n}\n\n.recur-test-cards {\n  background: rgba(255, 255, 255, 0.7);\n  padding: 12px 14px;\n  border-top: 1px solid rgba(245, 158, 11, 0.3);\n}\n\n.recur-test-cards-info {\n  font-size: 12px;\n  color: #78350f;\n  margin: 0 0 10px 0;\n}\n\n.recur-test-card {\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  padding: 10px 12px;\n  margin-bottom: 8px;\n}\n\n.recur-test-card:last-child {\n  margin-bottom: 0;\n}\n\n.recur-test-card-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 4px;\n}\n\n.recur-test-card-number {\n  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;\n  font-size: 14px;\n  font-weight: 600;\n  color: #1f2937;\n  letter-spacing: 0.5px;\n}\n\n.recur-test-card-copy {\n  font-size: 11px;\n  font-weight: 500;\n  color: #3b82f6;\n  background: #eff6ff;\n  border: 1px solid #bfdbfe;\n  border-radius: 4px;\n  padding: 3px 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.recur-test-card-copy:hover {\n  background: #dbeafe;\n  border-color: #93c5fd;\n}\n\n.recur-test-card-copy.copied {\n  background: #dcfce7;\n  border-color: #86efac;\n  color: #16a34a;\n}\n\n.recur-test-card-details {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  font-size: 11px;\n  color: #6b7280;\n}\n\n.recur-test-card-desc {\n  color: #374151;\n  font-weight: 500;\n}\n\n.recur-test-card-meta {\n  color: #9ca3af;\n}\n";
+	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  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n\n.recur-order-summary__total {\n  font-size: 18px;\n  line-height: 26px;\n  font-weight: 700;\n  color: #1a202c;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\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: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\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  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n}\n\n.recur-coupon__input-wrapper {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n}\n\n.recur-coupon__input {\n  width: 100%;\n  height: 36px;\n  padding: 0 32px 0 12px;\n  font-size: 14px;\n  text-transform: uppercase;\n  background-color: #ffffff;\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:hover:not(:focus) {\n  border-color: #9ca3af;\n}\n\n.recur-coupon__input:focus {\n  border-color: var(--ring, hsl(215 16% 47%));\n  outline: 0;\n  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring, hsl(215 16% 47%)) 50%, transparent);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n.recur-coupon__clear {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: none;\n  border: none;\n  padding: 4px;\n  cursor: pointer;\n  color: #9ca3af;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.2s;\n}\n\n.recur-coupon__clear:hover {\n  color: #6b7280;\n}\n\n.recur-coupon__clear-icon {\n  width: 16px;\n  height: 16px;\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  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.recur-coupon__btn--apply {\n  background: #18181b;\n  color: white;\n  border: none;\n  min-width: 52px;\n}\n\n.recur-coupon__btn--apply .recur-coupon__spinner {\n  width: 14px;\n  height: 14px;\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__error {\n  width: 100%;\n  margin-top: 8px;\n  font-size: 13px;\n  color: #dc2626;\n}\n\n.recur-coupon__applied-wrapper {\n  width: 100%;\n}\n\n.recur-coupon__description {\n  font-size: 12px;\n  color: #6b7280;\n  margin: 4px 0 0 22px;\n}\n\n.recur-coupon__bonus {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #dcfce7;\n  border-radius: 6px;\n  padding: 8px 12px;\n  margin-top: 8px;\n  font-size: 12px;\n  color: #15803d;\n}\n\n.recur-coupon__applied {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n}\n\n.recur-coupon__applied-info {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  flex: 1;\n}\n\n.recur-coupon__applied-icon {\n  width: 16px;\n  height: 16px;\n  color: #dc2626;\n  flex-shrink: 0;\n}\n\n.recur-coupon__applied-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #dc2626;\n  white-space: nowrap;\n}\n\n.recur-coupon__applied-code {\n  font-size: 14px;\n  color: #9ca3af;\n  white-space: nowrap;\n  margin-right: 2px;\n}\n\n.recur-coupon__applied-amount {\n  font-size: 14px;\n  font-weight: 500;\n  color: #dc2626;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n  flex-shrink: 0;\n  margin-left: auto;\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  flex-shrink: 0;\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  height: 36px;\n  padding: 0 12px;\n  font-size: 14px;\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  border-color: var(--ring, hsl(215 16% 47%));\n  outline: 0;\n  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring, hsl(215 16% 47%)) 50%, transparent);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\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/* Card verification notice ($0 total, card still bound for future charges) */\n.recur-verification-notice {\n  border: 1px solid #bfdbfe;\n  background-color: #eff6ff;\n  color: #1e40af;\n  border-radius: 8px;\n  padding: 12px 16px;\n  font-size: 14px;\n  font-weight: 500;\n  margin-bottom: 16px;\n}\n\n.recur-verification-notice.hidden {\n  display: none;\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\n/* ============================================\n * Skeleton Loading Styles\n * ============================================ */\n.recur-skeleton {\n  display: inline-block;\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}\n\n/* ============================================\n * Test Mode Banner Styles\n * ============================================ */\n.recur-test-mode-banner {\n  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n  border: 1px solid #f59e0b;\n  border-radius: 8px;\n  margin-bottom: 16px;\n  overflow: hidden;\n}\n\n.recur-test-mode-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 14px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.2s;\n}\n\n.recur-test-mode-header:hover {\n  background: rgba(245, 158, 11, 0.1);\n}\n\n.recur-test-mode-badge {\n  font-size: 13px;\n  font-weight: 600;\n  color: #92400e;\n}\n\n.recur-test-mode-toggle {\n  font-size: 12px;\n  color: #b45309;\n}\n\n.recur-test-cards {\n  background: rgba(255, 255, 255, 0.7);\n  padding: 12px 14px;\n  border-top: 1px solid rgba(245, 158, 11, 0.3);\n}\n\n.recur-test-cards-info {\n  font-size: 12px;\n  color: #78350f;\n  margin: 0 0 10px 0;\n}\n\n.recur-test-card {\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  padding: 10px 12px;\n  margin-bottom: 8px;\n}\n\n.recur-test-card:last-child {\n  margin-bottom: 0;\n}\n\n.recur-test-card-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 4px;\n}\n\n.recur-test-card-number {\n  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;\n  font-size: 14px;\n  font-weight: 600;\n  color: #1f2937;\n  letter-spacing: 0.5px;\n}\n\n.recur-test-card-copy {\n  font-size: 11px;\n  font-weight: 500;\n  color: #3b82f6;\n  background: #eff6ff;\n  border: 1px solid #bfdbfe;\n  border-radius: 4px;\n  padding: 3px 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.recur-test-card-copy:hover {\n  background: #dbeafe;\n  border-color: #93c5fd;\n}\n\n.recur-test-card-copy.copied {\n  background: #dcfce7;\n  border-color: #86efac;\n  color: #16a34a;\n}\n\n.recur-test-card-details {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  font-size: 11px;\n  color: #6b7280;\n}\n\n.recur-test-card-desc {\n  color: #374151;\n  font-weight: 500;\n}\n\n.recur-test-card-meta {\n  color: #9ca3af;\n}\n";
 }));
 
 //#endregion
@@ -1107,6 +1511,7 @@ function formatPrice(amount) {
 function getCheckoutDiscountDisplay(input) {
 	const { discountType, couponDiscountValue, discountAmount, duration, durationMonths, productPrice, productInterval, productIntervalCount, bonusMonths, bonusTrialDays } = input;
 	const intervalText = getIntervalText(productInterval, productIntervalCount);
+	const isOneTime = !intervalText;
 	const originalPriceText = intervalText ? `${formatPrice(productPrice)}/${intervalText}` : formatPrice(productPrice);
 	const bonusSuffix = buildBonusSuffix(bonusMonths, bonusTrialDays);
 	if (discountAmount === 0 && (bonusMonths || bonusTrialDays)) return {
@@ -1121,9 +1526,10 @@ function getCheckoutDiscountDisplay(input) {
 	if (discountType === "FIRST_PERIOD_PRICE") {
 		const firstPeriodPrice = couponDiscountValue;
 		const priceText = firstPeriodPrice === 0 ? "免費" : `特價 ${formatPrice(firstPeriodPrice)}`;
+		const base = isOneTime ? priceText : `首期${priceText}`;
 		return {
-			line1: bonusSuffix ? `首期${priceText}，${bonusSuffix}` : `首期${priceText}`,
-			line2: afterLine
+			line1: bonusSuffix ? `${base}，${bonusSuffix}` : base,
+			line2: isOneTime ? null : afterLine
 		};
 	}
 	if (discountType === "FIXED_AMOUNT") return buildStandardDiscount({
@@ -1131,14 +1537,16 @@ function getCheckoutDiscountDisplay(input) {
 		duration,
 		durationMonths,
 		bonusSuffix,
-		afterLine
+		afterLine,
+		isOneTime
 	});
 	if (discountType === "PERCENTAGE") return buildStandardDiscount({
-		discountText: `享 ${formatZhe(couponDiscountValue)}`,
+		discountText: couponDiscountValue >= 1e4 ? "免費" : `享 ${formatZhe(couponDiscountValue)}`,
 		duration,
 		durationMonths,
 		bonusSuffix,
-		afterLine
+		afterLine,
+		isOneTime
 	});
 	return {
 		line1: "",
@@ -1146,7 +1554,11 @@ function getCheckoutDiscountDisplay(input) {
 	};
 }
 function buildStandardDiscount(opts) {
-	const { discountText, duration, durationMonths, bonusSuffix, afterLine } = opts;
+	const { discountText, duration, durationMonths, bonusSuffix, afterLine, isOneTime } = opts;
+	if (isOneTime) return {
+		line1: bonusSuffix ? `${discountText}，${bonusSuffix}` : discountText,
+		line2: null
+	};
 	switch (duration) {
 		case "ONCE": {
 			const base = `首期${discountText}`;
@@ -1268,7 +1680,9 @@ var init_payment_form = __esmMin((() => {
 				"interval",
 				"checkout-id",
 				"publishable-key",
-				"api-base-url"
+				"api-base-url",
+				"einvoice-enabled",
+				"einvoice-defaults"
 			];
 		}
 		attributeChangedCallback(name, oldValue, newValue) {
@@ -1276,8 +1690,13 @@ var init_payment_form = __esmMin((() => {
 			if (name === "custom-styles") {
 				this.customStyles = newValue || "";
 				this.updateCustomStyles();
+			} else if (name === "einvoice-enabled" || name === "einvoice-defaults") {
+				if (this.isConnected) this.render();
 			} else this.updateOrderSummaryDOM();
 		}
+		isEinvoiceEnabled() {
+			return this.getAttribute("einvoice-enabled") === "true";
+		}
 		getShadowDOMStyles() {
 			return payment_form_shadow_default;
 		}
@@ -1309,6 +1728,13 @@ var init_payment_form = __esmMin((() => {
           <slot name="customer-info"></slot>
         </div>
 
+        ${this.isEinvoiceEnabled() ? lit_html.html`
+              <div class="form-section">
+                <h3 class="section-title">發票資訊</h3>
+                <slot name="einvoice"></slot>
+              </div>
+            ` : lit_html.nothing}
+
         <div class="form-section">
           <h3 class="section-title">信用卡資訊</h3>
           <slot name="card-fields"></slot>
@@ -1342,6 +1768,15 @@ var init_payment_form = __esmMin((() => {
         ${this.renderCustomerInfo()}
       </div>
 
+      ${this.isEinvoiceEnabled() ? lit_html.html`
+            <div slot="einvoice">
+              <recur-einvoice-section
+                id="${this.containerId}-einvoice"
+                defaults=${this.getAttribute("einvoice-defaults") ?? lit_html.nothing}
+              ></recur-einvoice-section>
+            </div>
+          ` : lit_html.nothing}
+
       <div slot="card-fields">
         ${this.renderCardFields()}
       </div>
@@ -1737,6 +2172,7 @@ var init_payment_form = __esmMin((() => {
 			const totalValue = summaryContainer.querySelector(".recur-order-summary__row--total")?.querySelector(".recur-order-summary__total");
 			if (totalValue) totalValue.textContent = `NT$ ${finalAmount.toLocaleString()}`;
 			this.updateCouponSectionDOM();
+			this.updateVerificationUI();
 		}
 		async applyCoupon() {
 			const code = this._couponCode.trim();
@@ -1875,8 +2311,41 @@ var init_payment_form = __esmMin((() => {
       </div>
     `;
 		}
+		/** Final payable amount after any applied coupon (never negative). */
+		getFinalAmount() {
+			const amount = Number(this.getAttribute("amount") || 0);
+			const discountAmount = this._appliedCoupon?.discountAmount || 0;
+			return Math.max(0, amount - discountAmount);
+		}
+		/**
+		* $0 total but the card form is still shown: the backend runs a NT$2
+		* verification charge (voided afterwards) to bind the card for future
+		* charges. The UI must say 驗證 instead of 付款.
+		*/
+		isCardVerificationMode() {
+			const amountAttr = this.getAttribute("amount");
+			if (amountAttr === null || amountAttr === "") return false;
+			return this.getFinalAmount() === 0;
+		}
+		getSubmitLabel() {
+			return this.isCardVerificationMode() ? "驗證卡片" : "確認付款";
+		}
+		/** Sync the verification notice + submit label with the current amount. */
+		updateVerificationUI() {
+			const notice = document.getElementById(`${this.containerId}-verification-notice`);
+			if (notice) notice.classList.toggle("hidden", !this.isCardVerificationMode());
+			const submitText = document.getElementById(`${this.containerId}-submit-text`);
+			if (submitText) submitText.textContent = this.getSubmitLabel();
+		}
 		renderCardFields() {
 			return lit_html.html`
+      <div
+        id="${this.containerId}-verification-notice"
+        class="recur-verification-notice${this.isCardVerificationMode() ? "" : " hidden"}"
+      >
+        您的優惠碼已抵扣全額，仍需驗證信用卡以供日後扣款使用
+      </div>
+
       <div class="recur-card-field">
         <label class="recur-card-field-label">卡號</label>
         <div class="recur-card-field-container" id="${this.containerId}-card-no-wrapper">
@@ -1922,7 +2391,7 @@ var init_payment_form = __esmMin((() => {
         class="recur-submit-button"
         disabled
       >
-        <span id="${this.containerId}-submit-text">確認付款</span>
+        <span id="${this.containerId}-submit-text">${this.getSubmitLabel()}</span>
       </button>
     `;
 		}
@@ -2040,6 +2509,18 @@ var init_payment_form = __esmMin((() => {
 						return;
 					}
 				}
+				let einvoice;
+				if (this.isEinvoiceEnabled()) {
+					const einvoiceSection = this.querySelector("recur-einvoice-section");
+					if (einvoiceSection) {
+						const prefs = einvoiceSection.getValidatedPrefs();
+						if (!prefs) {
+							this.showError("請確認發票資訊");
+							return;
+						}
+						einvoice = prefs;
+					}
+				}
 				this.clearError();
 				this.setButtonLoading(true);
 				this.dispatchEvent(new CustomEvent("submit", {
@@ -2047,7 +2528,8 @@ var init_payment_form = __esmMin((() => {
 						customerEmail: email,
 						customerName: name,
 						paymentSession: this._paymentSession,
-						appliedCoupon: this._appliedCoupon
+						appliedCoupon: this._appliedCoupon,
+						einvoice
 					},
 					bubbles: true,
 					composed: true
@@ -2067,7 +2549,7 @@ var init_payment_form = __esmMin((() => {
 			} else {
 				submitBtn.classList.remove("loading");
 				submitBtn.disabled = false;
-				submitBtn.innerHTML = "<span id=\"" + this.containerId + "-submit-text\">確認付款</span>";
+				submitBtn.innerHTML = "<span id=\"" + this.containerId + "-submit-text\">" + this.getSubmitLabel() + "</span>";
 			}
 		}
 		resetButton() {
@@ -2669,6 +3151,7 @@ async function registerComponents() {
 		Promise.resolve().then(() => (init_skeleton_loader(), skeleton_loader_exports)),
 		Promise.resolve().then(() => (init_payment_form_skeleton(), payment_form_skeleton_exports)),
 		Promise.resolve().then(() => (init_toast(), toast_exports)),
+		Promise.resolve().then(() => (init_einvoice_section(), einvoice_section_exports)),
 		Promise.resolve().then(() => (init_payment_form(), payment_form_exports)),
 		Promise.resolve().then(() => (init_checkout_button(), checkout_button_exports)),
 		Promise.resolve().then(() => (init_portal_button(), portal_button_exports))
@@ -2681,6 +3164,7 @@ async function registerComponents() {
 		"recur-payment-form-skeleton",
 		"recur-toast",
 		"recur-toast-container",
+		"recur-einvoice-section",
 		"recur-payment-form",
 		"recur-checkout",
 		"recur-portal"
@@ -2765,10 +3249,11 @@ function toCamelCase(obj) {
 
 //#endregion
 //#region package.json
-var version = "0.17.0";
+var version = "0.19.0";
 
 //#endregion
 //#region src/context.tsx
+init_einvoice();
 const SDK_VERSION$1 = version;
 const SDK_TYPE$1 = "react";
 const RecurContext = (0, react.createContext)(null);
@@ -3108,6 +3593,10 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
 			if (options.externalCustomerId) checkoutRequestBody.external_customer_id = options.externalCustomerId;
 			if (options.successUrl) checkoutRequestBody.success_url = options.successUrl;
 			if (options.cancelUrl) checkoutRequestBody.cancel_url = options.cancelUrl;
+			if (options.einvoice) {
+				assertValidEinvoicePrefs(options.einvoice);
+				checkoutRequestBody.einvoice = options.einvoice;
+			}
 			const checkoutResponse = await fetch(`${baseUrl}/v1/checkouts`, {
 				method: "POST",
 				headers,
@@ -3191,6 +3680,11 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
 			if (checkoutResult.product?.name) paymentForm.setAttribute("product-name", checkoutResult.product.name);
 			if (checkoutResult.checkout?.amount) paymentForm.setAttribute("amount", checkoutResult.checkout.amount.toString());
 			if (checkoutResult.product?.interval) paymentForm.setAttribute("interval", checkoutResult.product.interval);
+			if (checkoutResult.einvoiceEnabled) {
+				paymentForm.setAttribute("einvoice-enabled", "true");
+				const einvoiceDefaults = options.einvoice ?? checkoutResult.einvoiceDefaults;
+				if (einvoiceDefaults) paymentForm.setAttribute("einvoice-defaults", JSON.stringify(einvoiceDefaults));
+			}
 			paymentForm.setAttribute("custom-styles", `
           .form-input-focus {
             border-color: var(--ring, hsl(215 16% 47%)) !important;
@@ -3210,7 +3704,7 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
 			console.log("[Recur SDK] Step 7: Setting up submit handler...");
 			paymentForm.addEventListener("submit", (async (event) => {
 				console.log("[Recur SDK] Form submitted via Web Component");
-				const { paymentSession } = event.detail;
+				const { paymentSession, einvoice } = event.detail;
 				try {
 					console.log("[Recur SDK] Getting trade result from PAYUNi...");
 					const tradeResult = await paymentSession.getTradeResult();
@@ -3252,6 +3746,7 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
 						console.log("[Recur SDK] Using creditToken from checkout:", subscriptionCreditToken.substring(0, 30) + "...");
 						console.log("[Recur SDK] Using timestamp:", subscriptionTimestamp ? "from checkout (sdkTimestamp)" : "from tradeResult");
 					}
+					if (einvoice) paymentBody.einvoice = einvoice;
 					const paymentResponse = await fetch(`${baseUrl}/v1/checkouts/${checkoutResult.checkout.id}/pay`, {
 						method: "POST",
 						headers,
@@ -3559,6 +4054,10 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
 		if (options.customerEmail) requestBody.customerEmail = options.customerEmail;
 		if (options.customerName) requestBody.customerName = options.customerName;
 		if (options.externalCustomerId) requestBody.externalCustomerId = options.externalCustomerId;
+		if (options.einvoice) {
+			assertValidEinvoicePrefs(options.einvoice);
+			requestBody.einvoice = options.einvoice;
+		}
 		const response = await fetch(`${baseUrl}/v1/checkout/sessions`, {
 			method: "POST",
 			headers: {
@@ -3579,7 +4078,8 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
 			id: result.id,
 			url: result.url,
 			expiresAt: result.expiresAt,
-			clientSecret: result.clientSecret
+			clientSecret: result.clientSecret,
+			einvoiceEnabled: result.einvoiceEnabled
 		};
 	}, [config]);
 	const redirectToCheckout = (0, react.useCallback)(async (options) => {
@@ -4331,11 +4831,21 @@ function useCustomer() {
 }
 
 //#endregion
+//#region src/index.ts
+init_einvoice();
+
+//#endregion
+exports.DONATION_CODE_RE = DONATION_CODE_RE;
+exports.MOBILE_BARCODE_RE = MOBILE_BARCODE_RE;
 exports.PromoCodeInput = PromoCodeInput;
 exports.RecurProvider = RecurProvider;
+exports.UBN_RE = UBN_RE;
+exports.assertValidEinvoicePrefs = assertValidEinvoicePrefs;
+exports.isValidTaiwanUbn = isValidTaiwanUbn;
 exports.useCustomer = useCustomer;
 exports.usePlans = useProducts;
 exports.useProducts = useProducts;
 exports.usePromoCode = usePromoCode;
 exports.useRecur = useRecur;
-exports.useSubscribe = useSubscribe;
+exports.useSubscribe = useSubscribe;
+exports.validateEinvoicePrefs = validateEinvoicePrefs;