recur-tw 0.11.0 → 0.12.0

package/dist/index.cjs

@@ -1048,7 +1048,7 @@ var init_payment_form_shadow = __esm({
 var payment_form_light_default;
 var init_payment_form_light = __esm({
   "src/components/styles/payment-form-light.css"() {
-    payment_form_light_default = "/**\n * Payment Form - Light DOM Styles\n * These styles are applied to slotted content in the Light DOM\n * Using BEM naming convention with 'recur-' prefix for isolation\n */\n\n/* ============================================\n * Order Summary Styles\n * ============================================ */\n.recur-order-summary {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  padding: 16px;\n}\n\n.recur-order-summary__row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.recur-order-summary__row--total {\n  margin-bottom: 0;\n  padding-top: 12px;\n  border-top: 1px solid #e2e8f0;\n}\n\n.recur-order-summary__label {\n  font-size: 14px;\n  color: #4a5568;\n}\n\n.recur-order-summary__value {\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 500;\n  color: #2d3748;\n  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";
+    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";
   }
 });
 
@@ -1097,6 +1097,8 @@ var init_payment_form = __esm({
         __publicField(this, "customStyles");
         __publicField(this, "_isInitializing", false);
         __publicField(this, "_initializationAborted", false);
+        // Test mode state
+        __publicField(this, "_showTestCardHints", false);
         // Coupon state
         __publicField(this, "_showCouponInput", false);
         __publicField(this, "_couponCode", "");
@@ -1163,6 +1165,8 @@ var init_payment_form = __esm({
       <style>${this.getShadowDOMStyles()}</style>
 
       <div class="payment-form-wrapper">
+        <slot name="test-mode-banner"></slot>
+
         <div class="form-header">
           <h2 class="form-title">訂閱付款</h2>
         </div>
@@ -1199,6 +1203,10 @@ var init_payment_form = __esm({
         ${this.getCustomStyles()}
       </style>
 
+      <div slot="test-mode-banner">
+        ${this.renderTestCardHints()}
+      </div>
+
       <div slot="order-summary">
         ${this.renderOrderSummary()}
       </div>
@@ -1235,6 +1243,63 @@ var init_payment_form = __esm({
         }
       }
       // ============================================
+      // Test Mode Helpers
+      // ============================================
+      isTestMode() {
+        const publishableKey = this.getAttribute("publishable-key") || "";
+        return publishableKey.startsWith("pk_test_");
+      }
+      renderTestCardHints() {
+        if (!this.isTestMode()) {
+          return litHtml.html``;
+        }
+        const testCards = [
+          { number: "4147 6310 0000 0001", desc: "VISA \u6E2C\u8A66\u5361\uFF08\u6388\u6B0A\u6210\u529F\uFF09", expiry: "\u4EFB\u610F\u672A\u4F86\u65E5\u671F", cvc: "\u4EFB\u610F3\u78BC" },
+          { number: "3560 5110 0000 0001", desc: "JCB \u6E2C\u8A66\u5361\uFF08\u6388\u6B0A\u6210\u529F\uFF09", expiry: "\u4EFB\u610F\u672A\u4F86\u65E5\u671F", cvc: "\u4EFB\u610F3\u78BC" },
+          { number: "4147 6310 0000 0002", desc: "VISA \u6E2C\u8A66\u5361\uFF083D\u9A57\u8B49\u5931\u6557\uFF09", expiry: "\u4EFB\u610F\u672A\u4F86\u65E5\u671F", cvc: "\u4EFB\u610F3\u78BC" }
+        ];
+        const copyToClipboard = (text, event) => {
+          const btn = event.currentTarget;
+          navigator.clipboard.writeText(text.replace(/\s/g, "")).then(() => {
+            const originalText = btn.textContent;
+            btn.textContent = "\u5DF2\u8907\u88FD!";
+            btn.classList.add("copied");
+            setTimeout(() => {
+              btn.textContent = originalText;
+              btn.classList.remove("copied");
+            }, 1500);
+          });
+        };
+        return litHtml.html`
+      <div class="recur-test-mode-banner">
+        <div class="recur-test-mode-header" @click=${() => {
+          this._showTestCardHints = !this._showTestCardHints;
+          this.renderLightDOM();
+        }}>
+          <span class="recur-test-mode-badge">🧪 測試模式</span>
+          <span class="recur-test-mode-toggle">${this._showTestCardHints ? "\u6536\u5408 \u25B2" : "\u5C55\u958B\u6E2C\u8A66\u5361\u865F \u25BC"}</span>
+        </div>
+        ${this._showTestCardHints ? litHtml.html`
+          <div class="recur-test-cards">
+            <p class="recur-test-cards-info">使用以下測試卡號進行測試付款：</p>
+            ${testCards.map((card) => litHtml.html`
+              <div class="recur-test-card">
+                <div class="recur-test-card-row">
+                  <span class="recur-test-card-number">${card.number}</span>
+                  <button type="button" class="recur-test-card-copy" @click=${(e) => copyToClipboard(card.number, e)}>複製</button>
+                </div>
+                <div class="recur-test-card-details">
+                  <span class="recur-test-card-desc">${card.desc}</span>
+                  <span class="recur-test-card-meta">到期日: ${card.expiry} / CVC: ${card.cvc}</span>
+                </div>
+              </div>
+            `)}
+          </div>
+        ` : litHtml.nothing}
+      </div>
+    `;
+      }
+      // ============================================
       // Section Renderers (lit-html)
       // ============================================
       renderOrderSummary() {
@@ -1648,16 +1713,16 @@ var init_payment_form = __esm({
           }
           this._appliedCoupon = {
             code: data.discount.code,
-            couponName: data.discount.couponName,
-            discountType: data.discount.discountType,
-            discountAmount: data.discount.discountAmount,
+            couponName: data.discount.coupon_name,
+            discountType: data.discount.discount_type,
+            discountAmount: data.discount.discount_amount,
             duration: data.discount.duration,
-            durationMonths: data.discount.durationMonths,
-            bonusTrialDays: data.discount.bonusTrialDays,
-            bonusMonths: data.discount.bonusMonths,
-            productInterval: data.discount.productInterval,
-            productIntervalCount: data.discount.productIntervalCount,
-            productPrice: data.discount.productPrice
+            durationMonths: data.discount.duration_months,
+            bonusTrialDays: data.discount.bonus_trial_days,
+            bonusMonths: data.discount.bonus_months,
+            productInterval: data.discount.product_interval,
+            productIntervalCount: data.discount.product_interval_count,
+            productPrice: data.discount.product_price
           };
           this._showCouponInput = false;
           this._couponCode = "";
@@ -2674,7 +2739,7 @@ function toCamelCase(obj) {
 
 // package.json
 var package_default = {
-  version: "0.11.0"};
+  version: "0.12.0"};
 var SDK_VERSION = package_default.version;
 var SDK_TYPE = "react";
 var RecurContext = React.createContext(null);
@@ -2988,14 +3053,14 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
         }
         console.log("[Recur SDK] Step 1: Creating checkout session...");
         const checkoutRequestBody = {
-          customerName: options.customerName,
-          customerEmail: options.customerEmail
+          customer_name: options.customerName,
+          customer_email: options.customerEmail
         };
-        if (productId) checkoutRequestBody.productId = productId;
-        if (productSlug) checkoutRequestBody.productSlug = productSlug;
-        if (options.externalCustomerId) checkoutRequestBody.externalCustomerId = options.externalCustomerId;
-        if (options.successUrl) checkoutRequestBody.successUrl = options.successUrl;
-        if (options.cancelUrl) checkoutRequestBody.cancelUrl = options.cancelUrl;
+        if (productId) checkoutRequestBody.product_id = productId;
+        if (productSlug) checkoutRequestBody.product_slug = productSlug;
+        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;
         const checkoutResponse = await fetch(`${baseUrl}/v1/checkouts`, {
           method: "POST",
           headers,
@@ -3610,28 +3675,65 @@ function useCustomer() {
     throw new Error("useCustomer must be used within a RecurProvider");
   }
   const { customer, subscription, entitlements, isLoading: isLoading2, error, refetch } = context;
-  const check = React.useCallback(
-    (options) => {
+  const resolveProduct = (target) => {
+    if (typeof target === "string") {
+      return target;
+    }
+    if ("product" in target) {
+      return target.product;
+    }
+    if ("feature" in target) {
+      throw new Error("Feature-based checks are not yet supported. Coming in Phase 2.");
+    }
+    if ("benefit" in target) {
+      throw new Error("Benefit-based checks are not yet supported. Coming in Phase 2.");
+    }
+    throw new Error("Invalid check target");
+  };
+  const checkSync = React.useCallback(
+    (target) => {
+      const product = resolveProduct(target);
       if (!customer) {
         return { allowed: false, reason: "no_customer" };
       }
       if (entitlements.length === 0) {
-        return { allowed: false, reason: "no_subscription" };
+        return { allowed: false, reason: "no_entitlement" };
       }
-      const entitlement = entitlements.find(
-        (e) => e.product === options.product || e.productId === options.product
+      const matchedEntitlement = entitlements.find(
+        (e) => e.product === product || e.productId === product
       );
-      if (!entitlement) {
-        return { allowed: false, reason: "wrong_product" };
+      if (!matchedEntitlement) {
+        return { allowed: false, reason: "not_found" };
       }
       let matchingSubscription;
-      if (subscription && (subscription.product.slug === options.product || subscription.product.id === options.product)) {
+      if (subscription && (subscription.product.slug === product || subscription.product.id === product)) {
         matchingSubscription = subscription;
       }
-      return { allowed: true, subscription: matchingSubscription };
+      return {
+        allowed: true,
+        entitlement: matchedEntitlement,
+        // Backward compatibility
+        subscription: matchingSubscription
+      };
     },
     [customer, entitlements, subscription]
   );
+  const checkLive = React.useCallback(
+    async (target) => {
+      await refetch();
+      return checkSync(target);
+    },
+    [refetch, checkSync]
+  );
+  const check = React.useCallback(
+    (target, options) => {
+      if (options?.live) {
+        return checkLive(target);
+      }
+      return checkSync(target);
+    },
+    [checkSync, checkLive]
+  );
   return {
     customer,
     subscription,

package/dist/index.d.cts

@@ -570,12 +570,27 @@ interface CustomerIdentifier {
     id?: string;
 }
 /**
- * Entitlement status derived from subscription status
+ * Entitlement status
+ *
+ * - active: Subscription is active
+ * - trialing: Subscription is in trial period
+ * - past_due: Subscription payment is past due but still has access
+ * - canceled: Subscription canceled but not yet expired
+ * - purchased: ONE_TIME product has been paid for
+ */
+type EntitlementStatus = 'active' | 'trialing' | 'past_due' | 'canceled' | 'purchased';
+/**
+ * Source of the entitlement
+ *
+ * - subscription: From an active subscription
+ * - order: From a paid ONE_TIME order
  */
-type EntitlementStatus = 'active' | 'trialing' | 'past_due' | 'canceled';
+type EntitlementSource = 'subscription' | 'order';
 /**
  * An entitlement represents a customer's access to a product
- * Computed from active subscriptions
+ *
+ * Computed from active subscriptions and paid ONE_TIME orders.
+ * Use the `source` field to determine if access comes from a subscription or purchase.
  */
 interface Entitlement {
     /**
@@ -593,13 +608,62 @@ interface Entitlement {
      */
     status: EntitlementStatus;
     /**
-     * Associated subscription ID
-     * @example 'sub_xyz789'
+     * Source of the entitlement (subscription or order)
+     */
+    source: EntitlementSource;
+    /**
+     * ID of the source (subscriptionId or orderId)
+     * @example 'sub_xyz789' or 'ord_abc123'
+     */
+    sourceId: string;
+    /**
+     * When access was granted (ISO 8601)
+     * @example '2024-01-15T10:30:00.000Z'
+     */
+    grantedAt: string;
+    /**
+     * When access expires (ISO 8601), null means permanent access
+     * For subscriptions: currentPeriodEnd
+     * For ONE_TIME purchases: null (permanent)
+     * @example '2024-02-15T10:30:00.000Z' or null
+     */
+    expiresAt: string | null;
+    /**
+     * @deprecated Use sourceId instead. Kept for backward compatibility.
+     * Associated subscription ID (only present for subscription entitlements)
      */
-    subscriptionId: string;
+    subscriptionId?: string;
 }
+/**
+ * Target for the check() method
+ *
+ * Can be a string (product slug) or an object with product/feature/benefit
+ *
+ * @example
+ * // String shorthand
+ * check("pro-plan")
+ *
+ * // Object form
+ * check({ product: "pro-plan" })
+ *
+ * // Future: Feature-based check (Phase 2)
+ * check({ feature: "ai-chat", required: 10 })
+ *
+ * // Future: Benefit check (Phase 2)
+ * check({ benefit: "priority-support" })
+ */
+type CheckTarget = string | {
+    product: string;
+} | {
+    feature: string;
+    required?: number;
+} | {
+    benefit: string;
+};
 /**
  * Options for the check() method
+ *
+ * @deprecated Use CheckTarget and CheckLiveOptions instead
  */
 interface CheckOptions {
     /**
@@ -608,10 +672,22 @@ interface CheckOptions {
      */
     product: string;
 }
+/**
+ * Options for check() second parameter
+ */
+interface CheckLiveOptions {
+    /**
+     * If true, fetches fresh data from the API instead of using cache
+     * Use this when you need real-time accuracy (e.g., after checkout)
+     *
+     * @default false
+     */
+    live?: boolean;
+}
 /**
  * Reason why access was denied
  */
-type CheckDeniedReason = 'no_customer' | 'no_subscription' | 'expired' | 'wrong_product';
+type CheckDeniedReason = 'no_customer' | 'no_entitlement' | 'not_found' | 'expired' | 'insufficient_balance';
 /**
  * Result of the check() method
  */
@@ -625,7 +701,23 @@ interface CheckResult {
      */
     reason?: CheckDeniedReason;
     /**
-     * Associated subscription (only present when allowed is true)
+     * The entitlement granting access (only present when allowed is true)
+     * Contains source info (subscription or order) and expiration details
+     */
+    entitlement?: Entitlement;
+    /**
+     * Current balance (for credit/usage-based entitlements)
+     * @example 42 (remaining credits)
+     */
+    balance?: number;
+    /**
+     * Whether the entitlement has unlimited access
+     * @example true (for unlimited plans)
+     */
+    unlimited?: boolean;
+    /**
+     * @deprecated Use entitlement instead. Kept for backward compatibility.
+     * Associated subscription (only present when allowed is true and source is subscription)
      */
     subscription?: EntitlementSubscription;
 }
@@ -693,13 +785,38 @@ interface UseCustomerResult {
     entitlements: Entitlement[];
     /**
      * Check if customer has access to a specific product
-     * Synchronous - reads from local cache
+     *
+     * Synchronous by default - reads from local cache (zero latency).
+     * Use `{ live: true }` option for real-time API check.
+     *
+     * @param target - Product slug string or check target object
+     * @param options - Optional settings like `{ live: true }`
+     * @returns CheckResult with allowed status and entitlement if granted
      *
      * @example
-     * const { allowed } = check({ product: 'pro-plan' });
-     * if (!allowed) return <UpgradePrompt />;
+     * // String shorthand (recommended)
+     * const { allowed } = check("pro-plan");
+     *
+     * // Object form
+     * const { allowed } = check({ product: "pro-plan" });
+     *
+     * // Real-time check (async)
+     * const { allowed } = await check("pro-plan", { live: true });
+     *
+     * // Access entitlement details
+     * const { allowed, entitlement } = check("pro-plan");
+     * if (allowed && entitlement?.expiresAt) {
+     *   console.log(`Access until ${entitlement.expiresAt}`);
+     * }
      */
-    check: (options: CheckOptions) => CheckResult;
+    check: {
+        (target: CheckTarget, options?: CheckLiveOptions & {
+            live?: false;
+        }): CheckResult;
+        (target: CheckTarget, options: CheckLiveOptions & {
+            live: true;
+        }): Promise<CheckResult>;
+    };
     /**
      * Manually refresh entitlements from the API
      * Call this after checkout to update permissions
@@ -730,6 +847,7 @@ declare class RecurPaymentForm extends HTMLElement {
     private customStyles;
     private _isInitializing;
     private _initializationAborted;
+    private _showTestCardHints;
     private _showCouponInput;
     private _couponCode;
     private _couponLoading;
@@ -747,6 +865,8 @@ declare class RecurPaymentForm extends HTMLElement {
     private renderLightDOM;
     private getCustomStyles;
     private updateCustomStyles;
+    private isTestMode;
+    private renderTestCardHints;
     private renderOrderSummary;
     private getIntervalText;
     private getDiscountDescription;
@@ -1135,6 +1255,8 @@ declare function useSubscribe(options?: UseSubscribeOptions): UseSubscribeResult
  * your own database or webhook integration. The hook fetches entitlements
  * from Recur on mount and provides synchronous access via the check() method.
  *
+ * Supports both SUBSCRIPTION and ONE_TIME product types.
+ *
  * Must be used within a RecurProvider with a customer identifier:
  * ```tsx
  * <RecurProvider
@@ -1153,7 +1275,8 @@ declare function useSubscribe(options?: UseSubscribeOptions): UseSubscribeResult
  *
  *   if (isLoading) return <Spinner />;
  *
- *   const { allowed } = check({ product: 'pro-plan' });
+ *   // String shorthand (recommended)
+ *   const { allowed } = check("pro-plan");
  *
  *   if (!allowed) {
  *     return <UpgradePrompt />;
@@ -1163,6 +1286,43 @@ declare function useSubscribe(options?: UseSubscribeOptions): UseSubscribeResult
  * }
  * ```
  *
+ * ## Check with Entitlement Details
+ * @example
+ * ```tsx
+ * function SubscriptionInfo() {
+ *   const { check } = useCustomer();
+ *
+ *   const { allowed, entitlement } = check("pro-plan");
+ *
+ *   if (!allowed) return <UpgradePrompt />;
+ *
+ *   return (
+ *     <div>
+ *       <p>Status: {entitlement?.status}</p>
+ *       <p>Source: {entitlement?.source}</p>
+ *       {entitlement?.expiresAt && (
+ *         <p>Expires: {new Date(entitlement.expiresAt).toLocaleDateString()}</p>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * ## Real-time Check (After Payment)
+ * @example
+ * ```tsx
+ * async function verifyAccess() {
+ *   const { check } = useCustomer();
+ *
+ *   // Force fresh check from API
+ *   const { allowed } = await check("pro-plan", { live: true });
+ *
+ *   if (allowed) {
+ *     console.log("Access confirmed!");
+ *   }
+ * }
+ * ```
+ *
  * ## Display Subscription Status
  * @example
  * ```tsx
@@ -1225,8 +1385,8 @@ declare function useSubscribe(options?: UseSubscribeOptions): UseSubscribeResult
  * @returns {UseCustomerResult} Object containing:
  *   - `customer` - Customer info (null if not found)
  *   - `subscription` - Most recent active subscription (null if none)
- *   - `entitlements` - Array of all active entitlements
- *   - `check(options)` - Synchronous permission check
+ *   - `entitlements` - Array of all active entitlements (from subscriptions and purchases)
+ *   - `check(target, options?)` - Permission check (sync or async with `{ live: true }`)
  *   - `refetch()` - Manual refresh (debounced)
  *   - `isLoading` - Whether data is being fetched
  *   - `error` - Error from last fetch attempt