recur-tw 0.13.3 → 0.15.0

package/dist/index.cjs

@@ -2814,7 +2814,7 @@ function toCamelCase(obj) {
 
 // package.json
 var package_default = {
-  version: "0.13.3"};
+  version: "0.15.0"};
 var SDK_VERSION = package_default.version;
 var SDK_TYPE = "react";
 var RecurContext = React.createContext(null);
@@ -3611,7 +3611,7 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
   const fetchPlans = React.useCallback(
     async () => {
       const result = await fetchProducts({ type: "SUBSCRIPTION" });
-      return { plans: result.products };
+      return { plans: result.data };
     },
     [fetchProducts]
   );
@@ -3679,8 +3679,8 @@ function useProducts(options = {}) {
     setError(null);
     try {
       const result = await fetchProducts({ type });
-      setData(result.products);
-      onSuccess?.(result.products);
+      setData(result.data);
+      onSuccess?.(result.data);
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Failed to fetch products");
       setError(error2);
@@ -3748,6 +3748,272 @@ function useSubscribe(options = {}) {
     reset
   };
 }
+var DEFAULT_BASE_URL = "https://api.recur.tw";
+var SDK_TYPE2 = "react";
+var SDK_VERSION2 = package_default.version;
+function usePromoCode(options = {}) {
+  const context = React.useContext(RecurContext);
+  const publishableKey = options.publishableKey || context?.config?.publishableKey;
+  const baseUrl = options.baseUrl || context?.config?.baseUrl || DEFAULT_BASE_URL;
+  if (!publishableKey) {
+    throw new Error(
+      'usePromoCode requires a publishableKey. Either wrap your app in <RecurProvider> or pass publishableKey directly: usePromoCode({ publishableKey: "pk_..." })'
+    );
+  }
+  const [status, setStatus] = React.useState("idle");
+  const [code, setCode] = React.useState(null);
+  const [discount, setDiscount] = React.useState(null);
+  const [appliesToAllProducts, setAppliesToAllProducts] = React.useState(false);
+  const [applicableProducts, setApplicableProducts] = React.useState([]);
+  const [error, setError] = React.useState(null);
+  const abortControllerRef = React.useRef(null);
+  const apply = React.useCallback(
+    async (inputCode) => {
+      const trimmed = inputCode.trim();
+      if (!trimmed) {
+        return;
+      }
+      abortControllerRef.current?.abort();
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+      setStatus("validating");
+      setError(null);
+      setDiscount(null);
+      setCode(null);
+      setAppliesToAllProducts(false);
+      setApplicableProducts([]);
+      try {
+        const body = { code: trimmed };
+        if (options.customerId) {
+          body.external_id = options.customerId;
+        }
+        if (options.recurCustomerId) {
+          body.customer_id = options.recurCustomerId;
+        }
+        const response = await fetch(`${baseUrl}/v1/promotion-codes/validate`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-Recur-Publishable-Key": publishableKey,
+            "X-Recur-SDK-Type": SDK_TYPE2,
+            "X-Recur-SDK-Version": SDK_VERSION2,
+            "X-Recur-Source": typeof window !== "undefined" ? window.location.origin : "server"
+          },
+          body: JSON.stringify(body),
+          signal: controller.signal
+        });
+        if (controller.signal.aborted) return;
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          const message = errorData?.error?.message || "\u9A57\u8B49\u5931\u6557\uFF0C\u8ACB\u7A0D\u5F8C\u518D\u8A66";
+          setStatus("invalid");
+          setError(message);
+          return;
+        }
+        const raw = await response.json();
+        const result = toCamelCase(raw);
+        if (controller.signal.aborted) return;
+        if (result.valid) {
+          setStatus("valid");
+          setCode(trimmed.toUpperCase());
+          setDiscount(result.discount || null);
+          setAppliesToAllProducts(result.appliesToAllProducts ?? false);
+          setApplicableProducts(result.applicableProducts ?? []);
+        } else {
+          const errorStatus = result.errorCode === "PROMO_CODE_ALREADY_USED" ? "already_used" : "invalid";
+          setStatus(errorStatus);
+          setError(result.errorMessage || "\u6B64\u512A\u60E0\u78BC\u7121\u6548");
+        }
+      } catch (err) {
+        if (err instanceof DOMException && err.name === "AbortError") return;
+        setStatus("invalid");
+        setError("\u7DB2\u8DEF\u932F\u8AA4\uFF0C\u8ACB\u7A0D\u5F8C\u518D\u8A66");
+      }
+    },
+    [publishableKey, baseUrl, options.customerId, options.recurCustomerId]
+  );
+  const clear = React.useCallback(() => {
+    abortControllerRef.current?.abort();
+    setStatus("idle");
+    setCode(null);
+    setDiscount(null);
+    setAppliesToAllProducts(false);
+    setApplicableProducts([]);
+    setError(null);
+  }, []);
+  return {
+    apply,
+    clear,
+    status,
+    isLoading: status === "validating",
+    isValid: status === "valid",
+    code,
+    discount,
+    appliesToAllProducts,
+    applicableProducts,
+    error
+  };
+}
+var defaultStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    fontSize: "14px"
+  },
+  row: {
+    display: "flex",
+    gap: "8px",
+    alignItems: "center"
+  },
+  input: {
+    flex: 1,
+    padding: "8px 12px",
+    border: "1px solid #d1d5db",
+    borderRadius: "6px",
+    fontSize: "14px",
+    fontFamily: "inherit",
+    outline: "none",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  },
+  button: {
+    padding: "8px 16px",
+    border: "1px solid #d1d5db",
+    borderRadius: "6px",
+    fontSize: "14px",
+    fontFamily: "inherit",
+    cursor: "pointer",
+    backgroundColor: "#fff",
+    whiteSpace: "nowrap"
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  messageSuccess: {
+    color: "#16a34a",
+    fontSize: "13px",
+    margin: 0
+  },
+  messageError: {
+    color: "#dc2626",
+    fontSize: "13px",
+    margin: 0
+  }
+};
+function PromoCodeInput({
+  promo,
+  placeholder = "\u512A\u60E0\u78BC",
+  applyText = "\u5957\u7528",
+  clearText = "\u79FB\u9664",
+  disabled = false,
+  className,
+  style: containerStyle,
+  inputClassName,
+  inputStyle,
+  buttonClassName,
+  buttonStyle,
+  messageClassName,
+  messageStyle,
+  unstyled = false
+}) {
+  const [inputValue, setInputValue] = React.useState("");
+  const handleApply = React.useCallback(() => {
+    if (inputValue.trim()) {
+      promo.apply(inputValue.trim());
+    }
+  }, [inputValue, promo]);
+  const handleClear = React.useCallback(() => {
+    setInputValue("");
+    promo.clear();
+  }, [promo]);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleApply();
+      }
+    },
+    [handleApply]
+  );
+  const isApplied = promo.isValid;
+  const isDisabled = disabled || promo.isLoading;
+  const s = unstyled ? null : defaultStyles;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className,
+      style: s ? { ...s.container, ...containerStyle } : containerStyle,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: s?.row, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: isApplied ? promo.code || "" : inputValue,
+              onChange: (e) => setInputValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled: isDisabled || isApplied,
+              className: inputClassName,
+              style: s ? { ...s.input, ...inputStyle } : inputStyle,
+              "aria-label": placeholder
+            }
+          ),
+          isApplied ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              disabled,
+              className: buttonClassName,
+              style: s ? { ...s.button, ...buttonStyle } : buttonStyle,
+              children: clearText
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleApply,
+              disabled: isDisabled || !inputValue.trim(),
+              className: buttonClassName,
+              style: s ? {
+                ...s.button,
+                ...isDisabled || !inputValue.trim() ? s.buttonDisabled : {},
+                ...buttonStyle
+              } : buttonStyle,
+              children: promo.isLoading ? "\u9A57\u8B49\u4E2D..." : applyText
+            }
+          )
+        ] }),
+        promo.isValid && promo.discount && /* @__PURE__ */ jsxRuntime.jsxs(
+          "p",
+          {
+            className: messageClassName,
+            style: s ? { ...s.messageSuccess, ...messageStyle } : messageStyle,
+            role: "status",
+            children: [
+              promo.discount.label,
+              promo.discount.bonusTrialDays && promo.discount.bonusTrialDays > 0 ? ` + ${promo.discount.bonusTrialDays} \u5929\u514D\u8CBB\u8A66\u7528` : "",
+              promo.discount.bonusMonths && promo.discount.bonusMonths > 0 ? ` + \u8D08\u9001 ${promo.discount.bonusMonths} \u500B\u6708` : ""
+            ]
+          }
+        ),
+        promo.error && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: messageClassName,
+            style: s ? { ...s.messageError, ...messageStyle } : messageStyle,
+            role: "alert",
+            children: promo.error
+          }
+        )
+      ]
+    }
+  );
+}
 function useCustomer() {
   const context = React.useContext(CustomerContext);
   if (!context) {
@@ -3824,9 +4090,11 @@ function useCustomer() {
   };
 }
 
+exports.PromoCodeInput = PromoCodeInput;
 exports.RecurProvider = RecurProvider;
 exports.useCustomer = useCustomer;
 exports.usePlans = useProducts;
 exports.useProducts = useProducts;
+exports.usePromoCode = usePromoCode;
 exports.useRecur = useRecur;
 exports.useSubscribe = useSubscribe;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React, { CSSProperties } from 'react';
 
 /**
  * Recur Loading Spinner Web Component
@@ -517,7 +517,7 @@ interface Product {
     displayOrder: number;
 }
 interface ProductsResult {
-    products: Product[];
+    data: Product[];
 }
 type Plan = Product;
 interface PlansResult {
@@ -1313,6 +1313,218 @@ interface UseSubscribeResult {
  */
 declare function useSubscribe(options?: UseSubscribeOptions): UseSubscribeResult;
 
+interface UsePromoCodeOptions {
+    /**
+     * Customer identifier from your system (external ID).
+     * Required for publishable key validation — the API rejects requests without it.
+     */
+    customerId?: string;
+    /**
+     * Recur internal customer ID (alternative to customerId).
+     * Use this if you already have the Recur customer ID.
+     */
+    recurCustomerId?: string;
+    /**
+     * Publishable API key. If omitted, falls back to RecurProvider context.
+     * This allows standalone usage without wrapping in RecurProvider.
+     *
+     * @example 'pk_test_abc123...'
+     */
+    publishableKey?: string;
+    /**
+     * Base URL for API calls. Defaults to 'https://api.recur.tw'.
+     */
+    baseUrl?: string;
+}
+type PromoCodeStatus = 'idle' | 'validating' | 'valid' | 'invalid' | 'already_used';
+interface PromoCodeDiscount {
+    /** Discount type */
+    type: 'PERCENTAGE' | 'FIXED_AMOUNT' | 'FIRST_PERIOD_PRICE';
+    /** Raw discount value (basis points for %, TWD for fixed) */
+    amount: number;
+    /** Final amount after discount (0 if no amount was provided) */
+    discountedAmount: number;
+    /** Human-readable label (e.g., "20% off", "NT$100 off") */
+    label: string;
+    /** Bonus trial days */
+    bonusTrialDays?: number;
+    /** Bonus months */
+    bonusMonths?: number;
+}
+interface ApplicableProduct {
+    id: string;
+    name: string;
+    price: number;
+    priceAfterDiscount: number;
+    interval?: string | null;
+    intervalCount?: number | null;
+}
+interface UsePromoCodeReturn {
+    /**
+     * Validate and apply a promo code.
+     * Call this on button click or input blur.
+     */
+    apply: (code: string) => Promise<void>;
+    /**
+     * Clear the current promo code state.
+     */
+    clear: () => void;
+    /** Current status */
+    status: PromoCodeStatus;
+    /** Whether a validation request is in progress */
+    isLoading: boolean;
+    /** Whether the current code is valid */
+    isValid: boolean;
+    /**
+     * The validated promo code string.
+     * Pass this directly to subscribe() — null if no valid code.
+     */
+    code: string | null;
+    /** Discount details (when valid) */
+    discount: PromoCodeDiscount | null;
+    /** Whether the discount applies to all products */
+    appliesToAllProducts: boolean;
+    /** Applicable products with discounted prices (when restricted to specific products) */
+    applicableProducts: ApplicableProduct[];
+    /** Error message (when invalid) */
+    error: string | null;
+}
+/**
+ * usePromoCode Hook
+ *
+ * Validate promotion codes and get discount information.
+ * Works with or without RecurProvider.
+ *
+ * @example With RecurProvider (publishableKey from context)
+ * ```tsx
+ * <RecurProvider config={{ publishableKey: 'pk_test_xxx' }}>
+ *   <PricingPage />
+ * </RecurProvider>
+ *
+ * function PricingPage() {
+ *   const promo = usePromoCode({ customerId: 'user_123' })
+ *
+ *   return (
+ *     <div>
+ *       <input onBlur={(e) => promo.apply(e.target.value)} />
+ *       {promo.isValid && <span>{promo.discount.label}</span>}
+ *       {promo.error && <span>{promo.error}</span>}
+ *     </div>
+ *   )
+ * }
+ * ```
+ *
+ * @example Standalone (no RecurProvider needed)
+ * ```tsx
+ * function PricingPage() {
+ *   const promo = usePromoCode({
+ *     publishableKey: 'pk_test_xxx',
+ *     customerId: 'user_123',
+ *   })
+ *   // ... same usage
+ * }
+ * ```
+ */
+declare function usePromoCode(options?: UsePromoCodeOptions): UsePromoCodeReturn;
+
+interface PromoCodeInputProps {
+    /**
+     * Return value from usePromoCode().
+     * The component reads state and calls apply/clear from this object.
+     */
+    promo: UsePromoCodeReturn;
+    /**
+     * Input placeholder text
+     * @default "優惠碼"
+     */
+    placeholder?: string;
+    /**
+     * Apply button text
+     * @default "套用"
+     */
+    applyText?: string;
+    /**
+     * Clear button text (shown when a code is applied)
+     * @default "移除"
+     */
+    clearText?: string;
+    /**
+     * Disable the input and button
+     */
+    disabled?: boolean;
+    /**
+     * CSS class for the outer container
+     */
+    className?: string;
+    /**
+     * Inline styles for the outer container
+     */
+    style?: CSSProperties;
+    /**
+     * CSS class for the input element
+     */
+    inputClassName?: string;
+    /**
+     * Inline styles for the input element
+     */
+    inputStyle?: CSSProperties;
+    /**
+     * CSS class for the apply/clear button
+     */
+    buttonClassName?: string;
+    /**
+     * Inline styles for the apply/clear button
+     */
+    buttonStyle?: CSSProperties;
+    /**
+     * CSS class for the status message (success/error)
+     */
+    messageClassName?: string;
+    /**
+     * Inline styles for the status message
+     */
+    messageStyle?: CSSProperties;
+    /**
+     * When true, renders without any default inline styles.
+     * Use this when you want full control via className and style props.
+     * @default false
+     */
+    unstyled?: boolean;
+}
+/**
+ * PromoCodeInput
+ *
+ * A drop-in promo code input component that works with usePromoCode().
+ *
+ * @example Minimal usage
+ * ```tsx
+ * const promo = usePromoCode({ customerId: 'user_123' });
+ * <PromoCodeInput promo={promo} />
+ * ```
+ *
+ * @example Custom styling with className (Tailwind)
+ * ```tsx
+ * <PromoCodeInput
+ *   promo={promo}
+ *   unstyled
+ *   className="flex flex-col gap-1"
+ *   inputClassName="border rounded px-3 py-2 uppercase"
+ *   buttonClassName="bg-blue-500 text-white px-4 py-2 rounded"
+ *   messageClassName="text-sm"
+ * />
+ * ```
+ *
+ * @example Custom styling with style props
+ * ```tsx
+ * <PromoCodeInput
+ *   promo={promo}
+ *   inputStyle={{ border: '2px solid #3b82f6', borderRadius: 8 }}
+ *   buttonStyle={{ backgroundColor: '#3b82f6', color: 'white' }}
+ * />
+ * ```
+ */
+declare function PromoCodeInput({ promo, placeholder, applyText, clearText, disabled, className, style: containerStyle, inputClassName, inputStyle, buttonClassName, buttonStyle, messageClassName, messageStyle, unstyled, }: PromoCodeInputProps): react_jsx_runtime.JSX.Element;
+
 /**
  * useCustomer Hook
  *
@@ -1460,4 +1672,4 @@ declare function useSubscribe(options?: UseSubscribeOptions): UseSubscribeResult
  */
 declare function useCustomer(): UseCustomerResult;
 
-export { type ApiErrorCode, type CheckDeniedReason, type CheckOptions, type CheckResult, type CheckoutError, type CheckoutErrorDetails, type CheckoutOptions, type CheckoutResult, 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 RecurConfig, type RecurContextValue, RecurProvider, type RecurProviderProps, type SubscriptionResult, type UseCustomerResult, type UseProductsOptions as UsePlansOptions, type UseProductsResult as UsePlansResult, type UseProductsOptions, type UseProductsResult, type UseSubscribeOptions, type UseSubscribeResult, useCustomer, useProducts as usePlans, useProducts, useRecur, useSubscribe };
+export { type ApiErrorCode, type ApplicableProduct, type CheckDeniedReason, type CheckOptions, type CheckResult, type CheckoutError, type CheckoutErrorDetails, type CheckoutOptions, type CheckoutResult, 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 SubscriptionResult, type UseCustomerResult, type UseProductsOptions as UsePlansOptions, type UseProductsResult as UsePlansResult, type UseProductsOptions, type UseProductsResult, type UsePromoCodeOptions, type UsePromoCodeReturn, type UseSubscribeOptions, type UseSubscribeResult, useCustomer, useProducts as usePlans, useProducts, usePromoCode, useRecur, useSubscribe };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React, { CSSProperties } from 'react';
 
 /**
  * Recur Loading Spinner Web Component
@@ -517,7 +517,7 @@ interface Product {
     displayOrder: number;
 }
 interface ProductsResult {
-    products: Product[];
+    data: Product[];
 }
 type Plan = Product;
 interface PlansResult {
@@ -1313,6 +1313,218 @@ interface UseSubscribeResult {
  */
 declare function useSubscribe(options?: UseSubscribeOptions): UseSubscribeResult;
 
+interface UsePromoCodeOptions {
+    /**
+     * Customer identifier from your system (external ID).
+     * Required for publishable key validation — the API rejects requests without it.
+     */
+    customerId?: string;
+    /**
+     * Recur internal customer ID (alternative to customerId).
+     * Use this if you already have the Recur customer ID.
+     */
+    recurCustomerId?: string;
+    /**
+     * Publishable API key. If omitted, falls back to RecurProvider context.
+     * This allows standalone usage without wrapping in RecurProvider.
+     *
+     * @example 'pk_test_abc123...'
+     */
+    publishableKey?: string;
+    /**
+     * Base URL for API calls. Defaults to 'https://api.recur.tw'.
+     */
+    baseUrl?: string;
+}
+type PromoCodeStatus = 'idle' | 'validating' | 'valid' | 'invalid' | 'already_used';
+interface PromoCodeDiscount {
+    /** Discount type */
+    type: 'PERCENTAGE' | 'FIXED_AMOUNT' | 'FIRST_PERIOD_PRICE';
+    /** Raw discount value (basis points for %, TWD for fixed) */
+    amount: number;
+    /** Final amount after discount (0 if no amount was provided) */
+    discountedAmount: number;
+    /** Human-readable label (e.g., "20% off", "NT$100 off") */
+    label: string;
+    /** Bonus trial days */
+    bonusTrialDays?: number;
+    /** Bonus months */
+    bonusMonths?: number;
+}
+interface ApplicableProduct {
+    id: string;
+    name: string;
+    price: number;
+    priceAfterDiscount: number;
+    interval?: string | null;
+    intervalCount?: number | null;
+}
+interface UsePromoCodeReturn {
+    /**
+     * Validate and apply a promo code.
+     * Call this on button click or input blur.
+     */
+    apply: (code: string) => Promise<void>;
+    /**
+     * Clear the current promo code state.
+     */
+    clear: () => void;
+    /** Current status */
+    status: PromoCodeStatus;
+    /** Whether a validation request is in progress */
+    isLoading: boolean;
+    /** Whether the current code is valid */
+    isValid: boolean;
+    /**
+     * The validated promo code string.
+     * Pass this directly to subscribe() — null if no valid code.
+     */
+    code: string | null;
+    /** Discount details (when valid) */
+    discount: PromoCodeDiscount | null;
+    /** Whether the discount applies to all products */
+    appliesToAllProducts: boolean;
+    /** Applicable products with discounted prices (when restricted to specific products) */
+    applicableProducts: ApplicableProduct[];
+    /** Error message (when invalid) */
+    error: string | null;
+}
+/**
+ * usePromoCode Hook
+ *
+ * Validate promotion codes and get discount information.
+ * Works with or without RecurProvider.
+ *
+ * @example With RecurProvider (publishableKey from context)
+ * ```tsx
+ * <RecurProvider config={{ publishableKey: 'pk_test_xxx' }}>
+ *   <PricingPage />
+ * </RecurProvider>
+ *
+ * function PricingPage() {
+ *   const promo = usePromoCode({ customerId: 'user_123' })
+ *
+ *   return (
+ *     <div>
+ *       <input onBlur={(e) => promo.apply(e.target.value)} />
+ *       {promo.isValid && <span>{promo.discount.label}</span>}
+ *       {promo.error && <span>{promo.error}</span>}
+ *     </div>
+ *   )
+ * }
+ * ```
+ *
+ * @example Standalone (no RecurProvider needed)
+ * ```tsx
+ * function PricingPage() {
+ *   const promo = usePromoCode({
+ *     publishableKey: 'pk_test_xxx',
+ *     customerId: 'user_123',
+ *   })
+ *   // ... same usage
+ * }
+ * ```
+ */
+declare function usePromoCode(options?: UsePromoCodeOptions): UsePromoCodeReturn;
+
+interface PromoCodeInputProps {
+    /**
+     * Return value from usePromoCode().
+     * The component reads state and calls apply/clear from this object.
+     */
+    promo: UsePromoCodeReturn;
+    /**
+     * Input placeholder text
+     * @default "優惠碼"
+     */
+    placeholder?: string;
+    /**
+     * Apply button text
+     * @default "套用"
+     */
+    applyText?: string;
+    /**
+     * Clear button text (shown when a code is applied)
+     * @default "移除"
+     */
+    clearText?: string;
+    /**
+     * Disable the input and button
+     */
+    disabled?: boolean;
+    /**
+     * CSS class for the outer container
+     */
+    className?: string;
+    /**
+     * Inline styles for the outer container
+     */
+    style?: CSSProperties;
+    /**
+     * CSS class for the input element
+     */
+    inputClassName?: string;
+    /**
+     * Inline styles for the input element
+     */
+    inputStyle?: CSSProperties;
+    /**
+     * CSS class for the apply/clear button
+     */
+    buttonClassName?: string;
+    /**
+     * Inline styles for the apply/clear button
+     */
+    buttonStyle?: CSSProperties;
+    /**
+     * CSS class for the status message (success/error)
+     */
+    messageClassName?: string;
+    /**
+     * Inline styles for the status message
+     */
+    messageStyle?: CSSProperties;
+    /**
+     * When true, renders without any default inline styles.
+     * Use this when you want full control via className and style props.
+     * @default false
+     */
+    unstyled?: boolean;
+}
+/**
+ * PromoCodeInput
+ *
+ * A drop-in promo code input component that works with usePromoCode().
+ *
+ * @example Minimal usage
+ * ```tsx
+ * const promo = usePromoCode({ customerId: 'user_123' });
+ * <PromoCodeInput promo={promo} />
+ * ```
+ *
+ * @example Custom styling with className (Tailwind)
+ * ```tsx
+ * <PromoCodeInput
+ *   promo={promo}
+ *   unstyled
+ *   className="flex flex-col gap-1"
+ *   inputClassName="border rounded px-3 py-2 uppercase"
+ *   buttonClassName="bg-blue-500 text-white px-4 py-2 rounded"
+ *   messageClassName="text-sm"
+ * />
+ * ```
+ *
+ * @example Custom styling with style props
+ * ```tsx
+ * <PromoCodeInput
+ *   promo={promo}
+ *   inputStyle={{ border: '2px solid #3b82f6', borderRadius: 8 }}
+ *   buttonStyle={{ backgroundColor: '#3b82f6', color: 'white' }}
+ * />
+ * ```
+ */
+declare function PromoCodeInput({ promo, placeholder, applyText, clearText, disabled, className, style: containerStyle, inputClassName, inputStyle, buttonClassName, buttonStyle, messageClassName, messageStyle, unstyled, }: PromoCodeInputProps): react_jsx_runtime.JSX.Element;
+
 /**
  * useCustomer Hook
  *
@@ -1460,4 +1672,4 @@ declare function useSubscribe(options?: UseSubscribeOptions): UseSubscribeResult
  */
 declare function useCustomer(): UseCustomerResult;
 
-export { type ApiErrorCode, type CheckDeniedReason, type CheckOptions, type CheckResult, type CheckoutError, type CheckoutErrorDetails, type CheckoutOptions, type CheckoutResult, 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 RecurConfig, type RecurContextValue, RecurProvider, type RecurProviderProps, type SubscriptionResult, type UseCustomerResult, type UseProductsOptions as UsePlansOptions, type UseProductsResult as UsePlansResult, type UseProductsOptions, type UseProductsResult, type UseSubscribeOptions, type UseSubscribeResult, useCustomer, useProducts as usePlans, useProducts, useRecur, useSubscribe };
+export { type ApiErrorCode, type ApplicableProduct, type CheckDeniedReason, type CheckOptions, type CheckResult, type CheckoutError, type CheckoutErrorDetails, type CheckoutOptions, type CheckoutResult, 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 SubscriptionResult, type UseCustomerResult, type UseProductsOptions as UsePlansOptions, type UseProductsResult as UsePlansResult, type UseProductsOptions, type UseProductsResult, type UsePromoCodeOptions, type UsePromoCodeReturn, type UseSubscribeOptions, type UseSubscribeResult, useCustomer, useProducts as usePlans, useProducts, usePromoCode, useRecur, useSubscribe };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { html, render, nothing } from 'lit-html';
-import React, { createContext, useState, useCallback, useMemo, useContext, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import React, { createContext, useState, useCallback, useMemo, useContext, useEffect, useRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -2808,7 +2808,7 @@ function toCamelCase(obj) {
 
 // package.json
 var package_default = {
-  version: "0.13.3"};
+  version: "0.15.0"};
 var SDK_VERSION = package_default.version;
 var SDK_TYPE = "react";
 var RecurContext = createContext(null);
@@ -3605,7 +3605,7 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
   const fetchPlans = useCallback(
     async () => {
       const result = await fetchProducts({ type: "SUBSCRIPTION" });
-      return { plans: result.products };
+      return { plans: result.data };
     },
     [fetchProducts]
   );
@@ -3673,8 +3673,8 @@ function useProducts(options = {}) {
     setError(null);
     try {
       const result = await fetchProducts({ type });
-      setData(result.products);
-      onSuccess?.(result.products);
+      setData(result.data);
+      onSuccess?.(result.data);
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Failed to fetch products");
       setError(error2);
@@ -3742,6 +3742,272 @@ function useSubscribe(options = {}) {
     reset
   };
 }
+var DEFAULT_BASE_URL = "https://api.recur.tw";
+var SDK_TYPE2 = "react";
+var SDK_VERSION2 = package_default.version;
+function usePromoCode(options = {}) {
+  const context = useContext(RecurContext);
+  const publishableKey = options.publishableKey || context?.config?.publishableKey;
+  const baseUrl = options.baseUrl || context?.config?.baseUrl || DEFAULT_BASE_URL;
+  if (!publishableKey) {
+    throw new Error(
+      'usePromoCode requires a publishableKey. Either wrap your app in <RecurProvider> or pass publishableKey directly: usePromoCode({ publishableKey: "pk_..." })'
+    );
+  }
+  const [status, setStatus] = useState("idle");
+  const [code, setCode] = useState(null);
+  const [discount, setDiscount] = useState(null);
+  const [appliesToAllProducts, setAppliesToAllProducts] = useState(false);
+  const [applicableProducts, setApplicableProducts] = useState([]);
+  const [error, setError] = useState(null);
+  const abortControllerRef = useRef(null);
+  const apply = useCallback(
+    async (inputCode) => {
+      const trimmed = inputCode.trim();
+      if (!trimmed) {
+        return;
+      }
+      abortControllerRef.current?.abort();
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+      setStatus("validating");
+      setError(null);
+      setDiscount(null);
+      setCode(null);
+      setAppliesToAllProducts(false);
+      setApplicableProducts([]);
+      try {
+        const body = { code: trimmed };
+        if (options.customerId) {
+          body.external_id = options.customerId;
+        }
+        if (options.recurCustomerId) {
+          body.customer_id = options.recurCustomerId;
+        }
+        const response = await fetch(`${baseUrl}/v1/promotion-codes/validate`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-Recur-Publishable-Key": publishableKey,
+            "X-Recur-SDK-Type": SDK_TYPE2,
+            "X-Recur-SDK-Version": SDK_VERSION2,
+            "X-Recur-Source": typeof window !== "undefined" ? window.location.origin : "server"
+          },
+          body: JSON.stringify(body),
+          signal: controller.signal
+        });
+        if (controller.signal.aborted) return;
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          const message = errorData?.error?.message || "\u9A57\u8B49\u5931\u6557\uFF0C\u8ACB\u7A0D\u5F8C\u518D\u8A66";
+          setStatus("invalid");
+          setError(message);
+          return;
+        }
+        const raw = await response.json();
+        const result = toCamelCase(raw);
+        if (controller.signal.aborted) return;
+        if (result.valid) {
+          setStatus("valid");
+          setCode(trimmed.toUpperCase());
+          setDiscount(result.discount || null);
+          setAppliesToAllProducts(result.appliesToAllProducts ?? false);
+          setApplicableProducts(result.applicableProducts ?? []);
+        } else {
+          const errorStatus = result.errorCode === "PROMO_CODE_ALREADY_USED" ? "already_used" : "invalid";
+          setStatus(errorStatus);
+          setError(result.errorMessage || "\u6B64\u512A\u60E0\u78BC\u7121\u6548");
+        }
+      } catch (err) {
+        if (err instanceof DOMException && err.name === "AbortError") return;
+        setStatus("invalid");
+        setError("\u7DB2\u8DEF\u932F\u8AA4\uFF0C\u8ACB\u7A0D\u5F8C\u518D\u8A66");
+      }
+    },
+    [publishableKey, baseUrl, options.customerId, options.recurCustomerId]
+  );
+  const clear = useCallback(() => {
+    abortControllerRef.current?.abort();
+    setStatus("idle");
+    setCode(null);
+    setDiscount(null);
+    setAppliesToAllProducts(false);
+    setApplicableProducts([]);
+    setError(null);
+  }, []);
+  return {
+    apply,
+    clear,
+    status,
+    isLoading: status === "validating",
+    isValid: status === "valid",
+    code,
+    discount,
+    appliesToAllProducts,
+    applicableProducts,
+    error
+  };
+}
+var defaultStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    fontSize: "14px"
+  },
+  row: {
+    display: "flex",
+    gap: "8px",
+    alignItems: "center"
+  },
+  input: {
+    flex: 1,
+    padding: "8px 12px",
+    border: "1px solid #d1d5db",
+    borderRadius: "6px",
+    fontSize: "14px",
+    fontFamily: "inherit",
+    outline: "none",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  },
+  button: {
+    padding: "8px 16px",
+    border: "1px solid #d1d5db",
+    borderRadius: "6px",
+    fontSize: "14px",
+    fontFamily: "inherit",
+    cursor: "pointer",
+    backgroundColor: "#fff",
+    whiteSpace: "nowrap"
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  messageSuccess: {
+    color: "#16a34a",
+    fontSize: "13px",
+    margin: 0
+  },
+  messageError: {
+    color: "#dc2626",
+    fontSize: "13px",
+    margin: 0
+  }
+};
+function PromoCodeInput({
+  promo,
+  placeholder = "\u512A\u60E0\u78BC",
+  applyText = "\u5957\u7528",
+  clearText = "\u79FB\u9664",
+  disabled = false,
+  className,
+  style: containerStyle,
+  inputClassName,
+  inputStyle,
+  buttonClassName,
+  buttonStyle,
+  messageClassName,
+  messageStyle,
+  unstyled = false
+}) {
+  const [inputValue, setInputValue] = useState("");
+  const handleApply = useCallback(() => {
+    if (inputValue.trim()) {
+      promo.apply(inputValue.trim());
+    }
+  }, [inputValue, promo]);
+  const handleClear = useCallback(() => {
+    setInputValue("");
+    promo.clear();
+  }, [promo]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleApply();
+      }
+    },
+    [handleApply]
+  );
+  const isApplied = promo.isValid;
+  const isDisabled = disabled || promo.isLoading;
+  const s = unstyled ? null : defaultStyles;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: s ? { ...s.container, ...containerStyle } : containerStyle,
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: s?.row, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: isApplied ? promo.code || "" : inputValue,
+              onChange: (e) => setInputValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled: isDisabled || isApplied,
+              className: inputClassName,
+              style: s ? { ...s.input, ...inputStyle } : inputStyle,
+              "aria-label": placeholder
+            }
+          ),
+          isApplied ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              disabled,
+              className: buttonClassName,
+              style: s ? { ...s.button, ...buttonStyle } : buttonStyle,
+              children: clearText
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleApply,
+              disabled: isDisabled || !inputValue.trim(),
+              className: buttonClassName,
+              style: s ? {
+                ...s.button,
+                ...isDisabled || !inputValue.trim() ? s.buttonDisabled : {},
+                ...buttonStyle
+              } : buttonStyle,
+              children: promo.isLoading ? "\u9A57\u8B49\u4E2D..." : applyText
+            }
+          )
+        ] }),
+        promo.isValid && promo.discount && /* @__PURE__ */ jsxs(
+          "p",
+          {
+            className: messageClassName,
+            style: s ? { ...s.messageSuccess, ...messageStyle } : messageStyle,
+            role: "status",
+            children: [
+              promo.discount.label,
+              promo.discount.bonusTrialDays && promo.discount.bonusTrialDays > 0 ? ` + ${promo.discount.bonusTrialDays} \u5929\u514D\u8CBB\u8A66\u7528` : "",
+              promo.discount.bonusMonths && promo.discount.bonusMonths > 0 ? ` + \u8D08\u9001 ${promo.discount.bonusMonths} \u500B\u6708` : ""
+            ]
+          }
+        ),
+        promo.error && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: messageClassName,
+            style: s ? { ...s.messageError, ...messageStyle } : messageStyle,
+            role: "alert",
+            children: promo.error
+          }
+        )
+      ]
+    }
+  );
+}
 function useCustomer() {
   const context = useContext(CustomerContext);
   if (!context) {
@@ -3818,4 +4084,4 @@ function useCustomer() {
   };
 }
 
-export { RecurProvider, useCustomer, useProducts as usePlans, useProducts, useRecur, useSubscribe };
+export { PromoCodeInput, RecurProvider, useCustomer, useProducts as usePlans, useProducts, usePromoCode, useRecur, useSubscribe };

package/dist/recur.umd.js

@@ -2101,7 +2101,7 @@
         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/>
         <circle cx="12" cy="7" r="4"/>
       </svg>
-    `}setupEventListeners(){let t=this.shadowRoot?.querySelector("button");t&&t.addEventListener("click",this.handleClick)}redirectToPortal(t){let r=this.getAttribute("target");this.dispatchEvent(new CustomEvent("portal-redirect",{detail:{url:t},bubbles:!0,composed:!0})),r==="_blank"?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}async fetchAndRedirect(t){let r=this.getAttribute("customer-id"),o=this.getAttribute("return-url");this._isLoading=!0,this.render(),this.setupEventListeners();try{let i={};r&&(i.customerId=r),o&&(i.returnUrl=o);let n=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)});if(!n.ok){let u=await n.json().catch(()=>({}));throw new Error(u.error?.message||u.message||`HTTP ${n.status}: Failed to create portal session`)}let a=await n.json(),c=a.url||a.portalUrl;if(!c)throw new Error("Portal URL not found in response");this._isLoading=!1,this.render(),this.setupEventListeners(),this.redirectToPortal(c)}catch(i){this._isLoading=!1,this.render(),this.setupEventListeners(),this.dispatchError(i instanceof Error?i.message:"Failed to create portal session")}}dispatchError(t){console.error("[recur-portal]",t),this.dispatchEvent(new CustomEvent("portal-error",{detail:{message:t},bubbles:!0,composed:!0}))}};typeof window<"u"&&!customElements.get("recur-portal")&&customElements.define("recur-portal",pe)});var Qt={};S(Qt,{RecurCheckout:()=>O,RecurElements:()=>z,create:()=>kt,createElements:()=>$e,default:()=>Zt,init:()=>vt});async function jt(){if(typeof window>"u"){console.warn("[Recur SDK] Cannot register Web Components: window is not defined");return}await Promise.all([Promise.resolve().then(()=>(Le(),Me)),Promise.resolve().then(()=>(He(),Ue)),Promise.resolve().then(()=>(Be(),Ne)),Promise.resolve().then(()=>(Oe(),ze)),Promise.resolve().then(()=>(tt(),et)),Promise.resolve().then(()=>(ot(),rt)),Promise.resolve().then(()=>(pt(),dt)),Promise.resolve().then(()=>(ht(),mt)),Promise.resolve().then(()=>(ft(),gt))]);let e=["recur-loading-spinner","recur-success-message","recur-error-display","recur-skeleton-loader","recur-payment-form-skeleton","recur-toast","recur-toast-container","recur-payment-form","recur-checkout","recur-portal"].filter(t=>!customElements.get(t));e.length>0&&console.warn("[Recur SDK] The following components are not registered:",e)}typeof window<"u"&&jt();function Ft(s){return s.replace(/_([a-z])/g,(e,t)=>t.toUpperCase())}function w(s){if(s==null)return s;if(Array.isArray(s))return s.map(e=>w(e));if(s instanceof Date)return s;if(typeof s=="object"){let e={};for(let[t,r]of Object.entries(s)){let o=Ft(t);e[o]=w(r)}return e}return s}var me={name:"recur-tw",version:"0.13.3",description:"React & Vanilla JS SDK for embedding subscription checkout flows (Taiwan / PAYUNi)",type:"module",private:!1,author:"Recur",license:"Elastic-2.0",keywords:["react","vanilla-js","subscription","checkout","payment","payuni","recurring-billing","taiwan","\u7E41\u9AD4\u4E2D\u6587","sdk","embedded-checkout"],homepage:"https://recur.tw/",bugs:{email:"support@recur.tw"},scripts:{build:"tsup",dev:"tsup --watch",lint:"eslint .","lint:fix":"eslint . --fix","type-check":"tsc --noEmit",examples:"npx http-server . -p 8080 -o /examples/"},main:"./dist/index.js",module:"./dist/index.js",types:"./dist/index.d.ts",exports:{".":{types:"./dist/index.d.ts",import:"./dist/index.js",require:"./dist/index.cjs"},"./server":{types:"./dist/server.d.ts",import:"./dist/server.js",require:"./dist/server.cjs"},"./vanilla":"./dist/recur.umd.js","./checkout":"./dist/checkout.js","./widget":"./dist/widget.js","./package.json":"./package.json"},unpkg:"./dist/recur.umd.js",jsdelivr:"./dist/recur.umd.js",files:["dist","README.md","AGENTS.md","LICENSE"],sideEffects:["src/components/**/*.ts","src/components/**/*.js"],peerDependencies:{react:">=18.0.0","react-dom":">=18.0.0"},peerDependenciesMeta:{react:{optional:!0},"react-dom":{optional:!0}},devDependencies:{"@eslint/js":"^9.39.1","@types/node":"^20.19.9","@types/react":"^19.1.9","@types/react-dom":"^19.1.7","@workspace/typescript-config":"workspace:*",autoprefixer:"^10.4.22",eslint:"^9","eslint-plugin-react":"^7.37.5","eslint-plugin-react-hooks":"^7.0.1",postcss:"^8.5.6",react:"^19.2.1","react-dom":"^19.2.1",tailwindcss:"^4.1.11",tsup:"^8.3.5",typescript:"^5.9.2","typescript-eslint":"^8.47.0"},dependencies:{"lit-html":"^3.3.1"}};var qt=me.version,Yt="vanilla",he=class{constructor(e){l(this,"config");if(!e.publishableKey)throw new Error("publishableKey is required");this.config={baseUrl:"https://api.recur.tw",...e}}getHeaders(){return{"Content-Type":"application/json","X-Recur-Publishable-Key":this.config.publishableKey,"X-Recur-SDK-Type":Yt,"X-Recur-SDK-Version":qt,"X-Recur-Source":typeof window<"u"?window.location.origin:"server"}}async createSubscription(e){let{customerName:t,customerEmail:r}=e,o=e.productId||e.planId,i=e.productSlug;if(!o&&!i)throw new Error("Either productId or productSlug is required");let n={customerName:t,customerEmail:r};o&&(n.productId=o),i&&(n.productSlug=i);let a=await fetch(`${this.config.baseUrl}/v1/subscriptions`,{method:"POST",headers:this.getHeaders(),body:JSON.stringify(n)});if(!a.ok){let u=await a.json().catch(()=>({}));throw{code:u.error||"CHECKOUT_FAILED",message:u.message||"Failed to initiate checkout",details:u}}let c=await a.json();return w(c)}async fetchProducts(e){let t=new URL(`${this.config.baseUrl}/v1/products`);e?.type&&t.searchParams.set("type",e.type);let r=await fetch(t.toString(),{method:"GET",headers:this.getHeaders()});if(!r.ok){let i=await r.json().catch(()=>({}));throw{code:i.error||"FETCH_PRODUCTS_FAILED",message:i.message||"Failed to fetch products",details:i}}let o=await r.json();return w(o)}async fetchPlans(){return{plans:(await this.fetchProducts({type:"SUBSCRIPTION"})).products}}getConfig(){return{...this.config}}};var ge=class{constructor(e,t){l(this,"config");l(this,"options");l(this,"container");l(this,"checkoutId",null);l(this,"sdkToken",null);l(this,"sdkTimestamp",null);l(this,"creditToken",null);l(this,"sdkEnv","S");l(this,"payuniSDK",null);l(this,"isFormValid",!1);if(this.config=e,this.options=t,typeof t.container=="string"){let r=document.querySelector(t.container);if(!r)throw new Error(`Container not found: ${t.container}`);this.container=r}else this.container=t.container}async render(){try{await this.initCheckout(),this.renderHTML(),await this.loadPayUniSDK(),await this.initPayUniSDK(),this.setupFormSubmit()}catch(e){this.handleError(e)}}getBaseUrl(){if(this.config.baseUrl)return this.config.baseUrl;if(typeof window<"u"){let e=window.location.hostname;if(e==="localhost"||e.includes(".test")||e.includes(".local")||e==="127.0.0.1")return`${window.location.protocol}//${window.location.host}/api`}return"https://api.recur.tw"}async initCheckout(){let e=this.getBaseUrl(),t=await fetch(`${e}/v1/checkouts`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":this.config.publishableKey},body:JSON.stringify({productId:this.options.productId||this.options.planId,customerEmail:this.options.customerEmail,customerName:this.options.customerName})});if(!t.ok){let i=await t.json().catch(()=>({}));throw new Error(i.error||"Failed to initialize checkout")}let r=await t.json(),o=w(r);this.checkoutId=o.checkout.id,this.sdkToken=o.sdkToken,this.sdkTimestamp=o.sdkTimestamp||null,this.creditToken=o.creditToken||null,this.sdkEnv=o.livemode?"P":"S"}renderHTML(){this.container.innerHTML=`
+    `}setupEventListeners(){let t=this.shadowRoot?.querySelector("button");t&&t.addEventListener("click",this.handleClick)}redirectToPortal(t){let r=this.getAttribute("target");this.dispatchEvent(new CustomEvent("portal-redirect",{detail:{url:t},bubbles:!0,composed:!0})),r==="_blank"?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}async fetchAndRedirect(t){let r=this.getAttribute("customer-id"),o=this.getAttribute("return-url");this._isLoading=!0,this.render(),this.setupEventListeners();try{let i={};r&&(i.customerId=r),o&&(i.returnUrl=o);let n=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)});if(!n.ok){let u=await n.json().catch(()=>({}));throw new Error(u.error?.message||u.message||`HTTP ${n.status}: Failed to create portal session`)}let a=await n.json(),c=a.url||a.portalUrl;if(!c)throw new Error("Portal URL not found in response");this._isLoading=!1,this.render(),this.setupEventListeners(),this.redirectToPortal(c)}catch(i){this._isLoading=!1,this.render(),this.setupEventListeners(),this.dispatchError(i instanceof Error?i.message:"Failed to create portal session")}}dispatchError(t){console.error("[recur-portal]",t),this.dispatchEvent(new CustomEvent("portal-error",{detail:{message:t},bubbles:!0,composed:!0}))}};typeof window<"u"&&!customElements.get("recur-portal")&&customElements.define("recur-portal",pe)});var Qt={};S(Qt,{RecurCheckout:()=>O,RecurElements:()=>z,create:()=>kt,createElements:()=>$e,default:()=>Zt,init:()=>vt});async function jt(){if(typeof window>"u"){console.warn("[Recur SDK] Cannot register Web Components: window is not defined");return}await Promise.all([Promise.resolve().then(()=>(Le(),Me)),Promise.resolve().then(()=>(He(),Ue)),Promise.resolve().then(()=>(Be(),Ne)),Promise.resolve().then(()=>(Oe(),ze)),Promise.resolve().then(()=>(tt(),et)),Promise.resolve().then(()=>(ot(),rt)),Promise.resolve().then(()=>(pt(),dt)),Promise.resolve().then(()=>(ht(),mt)),Promise.resolve().then(()=>(ft(),gt))]);let e=["recur-loading-spinner","recur-success-message","recur-error-display","recur-skeleton-loader","recur-payment-form-skeleton","recur-toast","recur-toast-container","recur-payment-form","recur-checkout","recur-portal"].filter(t=>!customElements.get(t));e.length>0&&console.warn("[Recur SDK] The following components are not registered:",e)}typeof window<"u"&&jt();function Ft(s){return s.replace(/_([a-z])/g,(e,t)=>t.toUpperCase())}function w(s){if(s==null)return s;if(Array.isArray(s))return s.map(e=>w(e));if(s instanceof Date)return s;if(typeof s=="object"){let e={};for(let[t,r]of Object.entries(s)){let o=Ft(t);e[o]=w(r)}return e}return s}var me={name:"recur-tw",version:"0.15.0",description:"React & Vanilla JS SDK for embedding subscription checkout flows (Taiwan / PAYUNi)",type:"module",private:!1,author:"Recur",license:"Elastic-2.0",keywords:["react","vanilla-js","subscription","checkout","payment","payuni","recurring-billing","taiwan","\u7E41\u9AD4\u4E2D\u6587","sdk","embedded-checkout"],homepage:"https://recur.tw/",bugs:{email:"support@recur.tw"},scripts:{build:"tsup",dev:"tsup --watch",test:"vitest run","test:watch":"vitest",lint:"eslint .","lint:fix":"eslint . --fix","type-check":"tsc --noEmit",examples:"npx http-server . -p 8080 -o /examples/"},main:"./dist/index.js",module:"./dist/index.js",types:"./dist/index.d.ts",exports:{".":{types:"./dist/index.d.ts",import:"./dist/index.js",require:"./dist/index.cjs"},"./server":{types:"./dist/server.d.ts",import:"./dist/server.js",require:"./dist/server.cjs"},"./vanilla":"./dist/recur.umd.js","./checkout":"./dist/checkout.js","./widget":"./dist/widget.js","./package.json":"./package.json"},unpkg:"./dist/recur.umd.js",jsdelivr:"./dist/recur.umd.js",files:["dist","README.md","AGENTS.md","LICENSE"],sideEffects:["src/components/**/*.ts","src/components/**/*.js"],peerDependencies:{react:">=18.0.0","react-dom":">=18.0.0"},peerDependenciesMeta:{react:{optional:!0},"react-dom":{optional:!0}},devDependencies:{"@eslint/js":"^9.39.1","@testing-library/dom":"^10.4.1","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.0","@types/node":"^20.19.9","@types/react":"^19.1.9","@types/react-dom":"^19.1.7","@workspace/typescript-config":"workspace:*",autoprefixer:"^10.4.22",eslint:"^9","eslint-plugin-react":"^7.37.5","eslint-plugin-react-hooks":"^7.0.1",jsdom:"^27.2.0",postcss:"^8.5.6",react:"^19.2.1","react-dom":"^19.2.1",tailwindcss:"^4.1.11",tsup:"^8.3.5",typescript:"^5.9.2","typescript-eslint":"^8.47.0",vitest:"^4.1.0"},dependencies:{"lit-html":"^3.3.1"}};var qt=me.version,Yt="vanilla",he=class{constructor(e){l(this,"config");if(!e.publishableKey)throw new Error("publishableKey is required");this.config={baseUrl:"https://api.recur.tw",...e}}getHeaders(){return{"Content-Type":"application/json","X-Recur-Publishable-Key":this.config.publishableKey,"X-Recur-SDK-Type":Yt,"X-Recur-SDK-Version":qt,"X-Recur-Source":typeof window<"u"?window.location.origin:"server"}}async createSubscription(e){let{customerName:t,customerEmail:r}=e,o=e.productId||e.planId,i=e.productSlug;if(!o&&!i)throw new Error("Either productId or productSlug is required");let n={customerName:t,customerEmail:r};o&&(n.productId=o),i&&(n.productSlug=i);let a=await fetch(`${this.config.baseUrl}/v1/subscriptions`,{method:"POST",headers:this.getHeaders(),body:JSON.stringify(n)});if(!a.ok){let u=await a.json().catch(()=>({}));throw{code:u.error||"CHECKOUT_FAILED",message:u.message||"Failed to initiate checkout",details:u}}let c=await a.json();return w(c)}async fetchProducts(e){let t=new URL(`${this.config.baseUrl}/v1/products`);e?.type&&t.searchParams.set("type",e.type);let r=await fetch(t.toString(),{method:"GET",headers:this.getHeaders()});if(!r.ok){let i=await r.json().catch(()=>({}));throw{code:i.error||"FETCH_PRODUCTS_FAILED",message:i.message||"Failed to fetch products",details:i}}let o=await r.json();return w(o)}async fetchPlans(){return{plans:(await this.fetchProducts({type:"SUBSCRIPTION"})).data}}getConfig(){return{...this.config}}};var ge=class{constructor(e,t){l(this,"config");l(this,"options");l(this,"container");l(this,"checkoutId",null);l(this,"sdkToken",null);l(this,"sdkTimestamp",null);l(this,"creditToken",null);l(this,"sdkEnv","S");l(this,"payuniSDK",null);l(this,"isFormValid",!1);if(this.config=e,this.options=t,typeof t.container=="string"){let r=document.querySelector(t.container);if(!r)throw new Error(`Container not found: ${t.container}`);this.container=r}else this.container=t.container}async render(){try{await this.initCheckout(),this.renderHTML(),await this.loadPayUniSDK(),await this.initPayUniSDK(),this.setupFormSubmit()}catch(e){this.handleError(e)}}getBaseUrl(){if(this.config.baseUrl)return this.config.baseUrl;if(typeof window<"u"){let e=window.location.hostname;if(e==="localhost"||e.includes(".test")||e.includes(".local")||e==="127.0.0.1")return`${window.location.protocol}//${window.location.host}/api`}return"https://api.recur.tw"}async initCheckout(){let e=this.getBaseUrl(),t=await fetch(`${e}/v1/checkouts`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":this.config.publishableKey},body:JSON.stringify({productId:this.options.productId||this.options.planId,customerEmail:this.options.customerEmail,customerName:this.options.customerName})});if(!t.ok){let i=await t.json().catch(()=>({}));throw new Error(i.error||"Failed to initialize checkout")}let r=await t.json(),o=w(r);this.checkoutId=o.checkout.id,this.sdkToken=o.sdkToken,this.sdkTimestamp=o.sdkTimestamp||null,this.creditToken=o.creditToken||null,this.sdkEnv=o.livemode?"P":"S"}renderHTML(){this.container.innerHTML=`
       <div class="recur-embedded-checkout" style="max-width: 400px; margin: 0 auto; padding: 20px; font-family: system-ui, -apple-system, sans-serif;">
         <div class="recur-checkout-header" style="margin-bottom: 24px;">
           <h2 style="margin: 0 0 8px 0; font-size: 20px; font-weight: 600; color: #111;">Subscribe</h2>

package/dist/server.cjs

@@ -24,7 +24,7 @@ var RecurAPIError = class extends Error {
 
 // package.json
 var package_default = {
-  version: "0.13.3"};
+  version: "0.15.0"};
 
 // src/server/resources/portal.ts
 var SDK_VERSION = package_default.version;

package/dist/server.js

@@ -22,7 +22,7 @@ var RecurAPIError = class extends Error {
 
 // package.json
 var package_default = {
-  version: "0.13.3"};
+  version: "0.15.0"};
 
 // src/server/resources/portal.ts
 var SDK_VERSION = package_default.version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "recur-tw",
-  "version": "0.13.3",
+  "version": "0.15.0",
   "description": "React & Vanilla JS SDK for embedding subscription checkout flows (Taiwan / PAYUNi)",
   "type": "module",
   "private": false,
@@ -26,6 +26,8 @@
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "type-check": "tsc --noEmit",
@@ -76,6 +78,9 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
     "@types/node": "^20.19.9",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
@@ -84,13 +89,15 @@
     "eslint": "^9",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
+    "jsdom": "^27.2.0",
     "postcss": "^8.5.6",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "tailwindcss": "^4.1.11",
     "tsup": "^8.3.5",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.47.0"
+    "typescript-eslint": "^8.47.0",
+    "vitest": "^4.1.0"
   },
   "dependencies": {
     "lit-html": "^3.3.1"