recur-tw 0.17.0 → 0.18.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,
@@ -1078,7 +1078,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 +1107,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 +1122,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 +1133,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 +1150,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}`;
@@ -1737,6 +1745,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 +1884,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 +1964,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>
     `;
 		}
@@ -2067,7 +2109,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() {
@@ -2763,9 +2805,66 @@ function toCamelCase(obj) {
 	return obj;
 }
 
+//#endregion
+//#region src/einvoice.ts
+/** 手機條碼: `/` + 7 chars from the MOF alphabet. */
+const MOBILE_BARCODE_RE = /^\/[0-9A-Z.+-]{7}$/;
+/** 統一編號: 8 digits. */
+const UBN_RE = /^\d{8}$/;
+/** 愛心碼: 3–7 digits. */
+const DONATION_CODE_RE = /^\d{3,7}$/;
+/**
+* 統一編號 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);
+}
+
 //#endregion
 //#region package.json
-var version = "0.17.0";
+var version = "0.18.0";
 
 //#endregion
 //#region src/context.tsx
@@ -3108,6 +3207,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,
@@ -3559,6 +3662,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 +3686,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 +4439,17 @@ function useCustomer() {
 }
 
 //#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;

package/dist/index.d.cts

@@ -159,12 +159,58 @@ declare global {
   }
 }
 //#endregion
-//#region src/types.d.ts
+//#region src/einvoice.d.ts
+/**
+ * Taiwan e-invoice (電子發票) buyer preferences
+ *
+ * Mirrors the server's einvoicePrefsSchema (@workspace/einvoice). Validation is
+ * kept inline — no zod, no dependency on the einvoice packages — so the browser
+ * bundles stay lean. A contract test (__tests__/einvoice.test.ts) pins this
+ * implementation against the server schema and @paid-tw/einvoice's validators.
+ */
+/**
+ * Buyer invoice choice, collected at checkout when the merchant has an active
+ * e-invoice integration:
+ * - `personal`: 個人雲端發票, delivered via the buyer's email
+ * - `mobile_barcode`: 手機條碼載具, e.g. `/ABC1234`
+ * - `ubn`: 公司統編三聯式 (B2B), 8-digit 統一編號 + company title
+ * - `donation`: 捐贈發票 via 愛心碼
+ */
+type EinvoicePrefs = {
+  type: 'personal';
+} | {
+  type: 'mobile_barcode';
+  carrierCode: string;
+} | {
+  type: 'ubn';
+  ubn: string;
+  buyerName: string;
+} | {
+  type: 'donation';
+  donationCode: string;
+};
+/** 手機條碼: `/` + 7 chars from the MOF alphabet. */
+declare const MOBILE_BARCODE_RE: RegExp;
+/** 統一編號: 8 digits. */
+declare const UBN_RE: RegExp;
+/** 愛心碼: 3–7 digits. */
+declare const DONATION_CODE_RE: RegExp;
+/**
+ * 統一編號 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.
+ */
+declare function isValidTaiwanUbn(ubn: string): boolean;
 /**
- * Recur SDK Types
+ * Validate buyer invoice preferences.
  *
- * Type definitions for the Recur checkout SDK
+ * @returns an error message, or `null` when the prefs are valid
  */
+declare function validateEinvoicePrefs(prefs: EinvoicePrefs): string | null;
+/** Throw when buyer invoice preferences are invalid (fail fast, before the API call). */
+declare function assertValidEinvoicePrefs(prefs: EinvoicePrefs): void;
+//#endregion
+//#region src/types.d.ts
 interface RecurConfig {
   /**
    * Publishable API key for authentication
@@ -251,11 +297,23 @@ interface CheckoutOptions {
   /**
    * External customer ID from your system (optional)
    * Use this to link Recur subscriptions to your existing users.
-   * Once set during customer creation, this cannot be changed.
+   * Applied when the customer is created or first linked during checkout;
+   * can later be updated via the Secret Key API (PATCH /v1/customers/:id).
    *
    * @example 'user_123', 'cus_abc456'
    */
   externalCustomerId?: string;
+  /**
+   * Taiwan e-invoice buyer preferences (optional)
+   * Used when the organization has an active e-invoice integration
+   * (`einvoiceEnabled` in the checkout response). Collect the buyer's choice
+   * in your own UI and pass it here; it is validated locally and stored with
+   * the checkout so the invoice is issued accordingly after payment.
+   *
+   * @example { type: 'mobile_barcode', carrierCode: '/ABC1234' }
+   * @example { type: 'ubn', ubn: '04595252', buyerName: '恆吉股份有限公司' }
+   */
+  einvoice?: EinvoicePrefs;
   /**
    * URL to redirect after successful payment (recommended for mobile)
    * Enables redirect after 3D verification in mobile environments.
@@ -367,6 +425,8 @@ interface CheckoutResult {
    * Used to determine PAYUNi SDK environment
    */
   livemode?: boolean;
+  /** Whether the organization issues e-invoices for paid checkouts */
+  einvoiceEnabled?: boolean;
 }
 /**
  * Payment failure codes from payment provider
@@ -568,6 +628,16 @@ interface RedirectToCheckoutOptions {
    * @example 'user_123', 'cus_abc456'
    */
   externalCustomerId?: string;
+  /**
+   * Taiwan e-invoice buyer preferences (optional)
+   * Prefills the 發票資訊 section on the hosted checkout page (the buyer can
+   * still change it there). Only used when the organization has an active
+   * e-invoice integration.
+   *
+   * @example { type: 'mobile_barcode', carrierCode: '/ABC1234' }
+   * @example { type: 'ubn', ubn: '04595252', buyerName: '恆吉股份有限公司' }
+   */
+  einvoice?: EinvoicePrefs;
 }
 /**
  * Result from creating a checkout session
@@ -581,6 +651,8 @@ interface CheckoutSessionResult {
   expiresAt: string;
   /** Stripe-like client secret for secure status polling */
   clientSecret?: string;
+  /** Whether the organization issues e-invoices for paid checkouts */
+  einvoiceEnabled?: boolean;
 }
 interface RecurContextValue {
   /**
@@ -1064,6 +1136,17 @@ declare class RecurPaymentForm extends HTMLElement {
     productPrice?: number;
   } | null;
   private renderCustomerInfo;
+  /** Final payable amount after any applied coupon (never negative). */
+  private getFinalAmount;
+  /**
+   * $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 付款.
+   */
+  private isCardVerificationMode;
+  private getSubmitLabel;
+  /** Sync the verification notice + submit label with the current amount. */
+  private updateVerificationUI;
   private renderCardFields;
   private hideCardSkeletons;
   private renderActions;
@@ -1775,4 +1858,4 @@ declare function PromoCodeInput({ promo, placeholder, applyText, clearText, disa
  */
 declare function useCustomer(): UseCustomerResult;
 //#endregion
-export { type ApiErrorCode, type ApplicableProduct, type CheckDeniedReason, type CheckOptions, type CheckResult, type CheckoutError, type CheckoutErrorDetails, type CheckoutOptions, type CheckoutResult, type CheckoutSessionResult, type CustomerIdentifier, type DuplicateSubscriptionDetails, type Entitlement, type EntitlementCustomer, type EntitlementStatus, type EntitlementSubscription, type PaymentFailedAction, type PaymentFailureCode, type PaymentFailureDetails, type Plan, type PlansResult, type Product, type ProductMetadata, type ProductsResult, type PromoCodeDiscount, PromoCodeInput, type PromoCodeInputProps, type PromoCodeStatus, type RecurConfig, type RecurContextValue, RecurProvider, type RecurProviderProps, type RedirectToCheckoutOptions, type SubscriptionResult, type UseCustomerResult, type UseProductsOptions as UsePlansOptions, type UseProductsOptions, type UseProductsResult as UsePlansResult, type UseProductsResult, type UsePromoCodeOptions, type UsePromoCodeReturn, type UseSubscribeOptions, type UseSubscribeResult, useCustomer, useProducts as usePlans, useProducts, usePromoCode, useRecur, useSubscribe };
+export { type ApiErrorCode, type ApplicableProduct, type CheckDeniedReason, type CheckOptions, type CheckResult, type CheckoutError, type CheckoutErrorDetails, type CheckoutOptions, type CheckoutResult, type CheckoutSessionResult, type CustomerIdentifier, DONATION_CODE_RE, type DuplicateSubscriptionDetails, type EinvoicePrefs, type Entitlement, type EntitlementCustomer, type EntitlementStatus, type EntitlementSubscription, MOBILE_BARCODE_RE, type PaymentFailedAction, type PaymentFailureCode, type PaymentFailureDetails, type Plan, type PlansResult, type Product, type ProductMetadata, type ProductsResult, type PromoCodeDiscount, PromoCodeInput, type PromoCodeInputProps, type PromoCodeStatus, type RecurConfig, type RecurContextValue, RecurProvider, type RecurProviderProps, type RedirectToCheckoutOptions, type SubscriptionResult, UBN_RE, type UseCustomerResult, type UseProductsOptions as UsePlansOptions, type UseProductsOptions, type UseProductsResult as UsePlansResult, type UseProductsResult, type UsePromoCodeOptions, type UsePromoCodeReturn, type UseSubscribeOptions, type UseSubscribeResult, assertValidEinvoicePrefs, isValidTaiwanUbn, useCustomer, useProducts as usePlans, useProducts, usePromoCode, useRecur, useSubscribe, validateEinvoicePrefs };

package/dist/index.d.ts

@@ -159,12 +159,58 @@ declare global {
   }
 }
 //#endregion
-//#region src/types.d.ts
+//#region src/einvoice.d.ts
+/**
+ * Taiwan e-invoice (電子發票) buyer preferences
+ *
+ * Mirrors the server's einvoicePrefsSchema (@workspace/einvoice). Validation is
+ * kept inline — no zod, no dependency on the einvoice packages — so the browser
+ * bundles stay lean. A contract test (__tests__/einvoice.test.ts) pins this
+ * implementation against the server schema and @paid-tw/einvoice's validators.
+ */
+/**
+ * Buyer invoice choice, collected at checkout when the merchant has an active
+ * e-invoice integration:
+ * - `personal`: 個人雲端發票, delivered via the buyer's email
+ * - `mobile_barcode`: 手機條碼載具, e.g. `/ABC1234`
+ * - `ubn`: 公司統編三聯式 (B2B), 8-digit 統一編號 + company title
+ * - `donation`: 捐贈發票 via 愛心碼
+ */
+type EinvoicePrefs = {
+  type: 'personal';
+} | {
+  type: 'mobile_barcode';
+  carrierCode: string;
+} | {
+  type: 'ubn';
+  ubn: string;
+  buyerName: string;
+} | {
+  type: 'donation';
+  donationCode: string;
+};
+/** 手機條碼: `/` + 7 chars from the MOF alphabet. */
+declare const MOBILE_BARCODE_RE: RegExp;
+/** 統一編號: 8 digits. */
+declare const UBN_RE: RegExp;
+/** 愛心碼: 3–7 digits. */
+declare const DONATION_CODE_RE: RegExp;
+/**
+ * 統一編號 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.
+ */
+declare function isValidTaiwanUbn(ubn: string): boolean;
 /**
- * Recur SDK Types
+ * Validate buyer invoice preferences.
  *
- * Type definitions for the Recur checkout SDK
+ * @returns an error message, or `null` when the prefs are valid
  */
+declare function validateEinvoicePrefs(prefs: EinvoicePrefs): string | null;
+/** Throw when buyer invoice preferences are invalid (fail fast, before the API call). */
+declare function assertValidEinvoicePrefs(prefs: EinvoicePrefs): void;
+//#endregion
+//#region src/types.d.ts
 interface RecurConfig {
   /**
    * Publishable API key for authentication
@@ -251,11 +297,23 @@ interface CheckoutOptions {
   /**
    * External customer ID from your system (optional)
    * Use this to link Recur subscriptions to your existing users.
-   * Once set during customer creation, this cannot be changed.
+   * Applied when the customer is created or first linked during checkout;
+   * can later be updated via the Secret Key API (PATCH /v1/customers/:id).
    *
    * @example 'user_123', 'cus_abc456'
    */
   externalCustomerId?: string;
+  /**
+   * Taiwan e-invoice buyer preferences (optional)
+   * Used when the organization has an active e-invoice integration
+   * (`einvoiceEnabled` in the checkout response). Collect the buyer's choice
+   * in your own UI and pass it here; it is validated locally and stored with
+   * the checkout so the invoice is issued accordingly after payment.
+   *
+   * @example { type: 'mobile_barcode', carrierCode: '/ABC1234' }
+   * @example { type: 'ubn', ubn: '04595252', buyerName: '恆吉股份有限公司' }
+   */
+  einvoice?: EinvoicePrefs;
   /**
    * URL to redirect after successful payment (recommended for mobile)
    * Enables redirect after 3D verification in mobile environments.
@@ -367,6 +425,8 @@ interface CheckoutResult {
    * Used to determine PAYUNi SDK environment
    */
   livemode?: boolean;
+  /** Whether the organization issues e-invoices for paid checkouts */
+  einvoiceEnabled?: boolean;
 }
 /**
  * Payment failure codes from payment provider
@@ -568,6 +628,16 @@ interface RedirectToCheckoutOptions {
    * @example 'user_123', 'cus_abc456'
    */
   externalCustomerId?: string;
+  /**
+   * Taiwan e-invoice buyer preferences (optional)
+   * Prefills the 發票資訊 section on the hosted checkout page (the buyer can
+   * still change it there). Only used when the organization has an active
+   * e-invoice integration.
+   *
+   * @example { type: 'mobile_barcode', carrierCode: '/ABC1234' }
+   * @example { type: 'ubn', ubn: '04595252', buyerName: '恆吉股份有限公司' }
+   */
+  einvoice?: EinvoicePrefs;
 }
 /**
  * Result from creating a checkout session
@@ -581,6 +651,8 @@ interface CheckoutSessionResult {
   expiresAt: string;
   /** Stripe-like client secret for secure status polling */
   clientSecret?: string;
+  /** Whether the organization issues e-invoices for paid checkouts */
+  einvoiceEnabled?: boolean;
 }
 interface RecurContextValue {
   /**
@@ -1064,6 +1136,17 @@ declare class RecurPaymentForm extends HTMLElement {
     productPrice?: number;
   } | null;
   private renderCustomerInfo;
+  /** Final payable amount after any applied coupon (never negative). */
+  private getFinalAmount;
+  /**
+   * $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 付款.
+   */
+  private isCardVerificationMode;
+  private getSubmitLabel;
+  /** Sync the verification notice + submit label with the current amount. */
+  private updateVerificationUI;
   private renderCardFields;
   private hideCardSkeletons;
   private renderActions;
@@ -1775,4 +1858,4 @@ declare function PromoCodeInput({ promo, placeholder, applyText, clearText, disa
  */
 declare function useCustomer(): UseCustomerResult;
 //#endregion
-export { type ApiErrorCode, type ApplicableProduct, type CheckDeniedReason, type CheckOptions, type CheckResult, type CheckoutError, type CheckoutErrorDetails, type CheckoutOptions, type CheckoutResult, type CheckoutSessionResult, type CustomerIdentifier, type DuplicateSubscriptionDetails, type Entitlement, type EntitlementCustomer, type EntitlementStatus, type EntitlementSubscription, type PaymentFailedAction, type PaymentFailureCode, type PaymentFailureDetails, type Plan, type PlansResult, type Product, type ProductMetadata, type ProductsResult, type PromoCodeDiscount, PromoCodeInput, type PromoCodeInputProps, type PromoCodeStatus, type RecurConfig, type RecurContextValue, RecurProvider, type RecurProviderProps, type RedirectToCheckoutOptions, type SubscriptionResult, type UseCustomerResult, type UseProductsOptions as UsePlansOptions, type UseProductsOptions, type UseProductsResult as UsePlansResult, type UseProductsResult, type UsePromoCodeOptions, type UsePromoCodeReturn, type UseSubscribeOptions, type UseSubscribeResult, useCustomer, useProducts as usePlans, useProducts, usePromoCode, useRecur, useSubscribe };
+export { type ApiErrorCode, type ApplicableProduct, type CheckDeniedReason, type CheckOptions, type CheckResult, type CheckoutError, type CheckoutErrorDetails, type CheckoutOptions, type CheckoutResult, type CheckoutSessionResult, type CustomerIdentifier, DONATION_CODE_RE, type DuplicateSubscriptionDetails, type EinvoicePrefs, type Entitlement, type EntitlementCustomer, type EntitlementStatus, type EntitlementSubscription, MOBILE_BARCODE_RE, type PaymentFailedAction, type PaymentFailureCode, type PaymentFailureDetails, type Plan, type PlansResult, type Product, type ProductMetadata, type ProductsResult, type PromoCodeDiscount, PromoCodeInput, type PromoCodeInputProps, type PromoCodeStatus, type RecurConfig, type RecurContextValue, RecurProvider, type RecurProviderProps, type RedirectToCheckoutOptions, type SubscriptionResult, UBN_RE, type UseCustomerResult, type UseProductsOptions as UsePlansOptions, type UseProductsOptions, type UseProductsResult as UsePlansResult, type UseProductsResult, type UsePromoCodeOptions, type UsePromoCodeReturn, type UseSubscribeOptions, type UseSubscribeResult, assertValidEinvoicePrefs, isValidTaiwanUbn, useCustomer, useProducts as usePlans, useProducts, usePromoCode, useRecur, useSubscribe, validateEinvoicePrefs };