recur-tw 0.16.0 → 0.16.1

package/dist/index.cjs

@@ -2814,7 +2814,7 @@ function toCamelCase(obj) {
 
 // package.json
 var package_default = {
-  version: "0.15.0"};
+  version: "0.16.1"};
 var SDK_VERSION = package_default.version;
 var SDK_TYPE = "react";
 var RecurContext = React.createContext(null);
@@ -3646,17 +3646,77 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
     },
     [config]
   );
+  const createCheckoutSession = React.useCallback(
+    async (options) => {
+      const baseUrl = config.baseUrl || "https://api.recur.tw";
+      if (!options.productId && !options.productSlug) {
+        throw new Error("Either productId or productSlug is required");
+      }
+      if (!options.successUrl) {
+        throw new Error("successUrl is required for hosted checkout");
+      }
+      if (!options.cancelUrl) {
+        throw new Error("cancelUrl is required for hosted checkout");
+      }
+      if (!config.publishableKey) {
+        throw new Error("publishableKey is required");
+      }
+      const requestBody = {
+        successUrl: options.successUrl,
+        cancelUrl: options.cancelUrl
+      };
+      if (options.productId) requestBody.productId = options.productId;
+      if (options.productSlug) requestBody.productSlug = options.productSlug;
+      if (options.mode) requestBody.mode = options.mode;
+      if (options.customerEmail) requestBody.customerEmail = options.customerEmail;
+      if (options.customerName) requestBody.customerName = options.customerName;
+      if (options.externalCustomerId) requestBody.externalCustomerId = options.externalCustomerId;
+      const response = await fetch(`${baseUrl}/v1/checkout/sessions`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Recur-Publishable-Key": config.publishableKey,
+          "X-Recur-SDK-Type": SDK_TYPE,
+          "X-Recur-SDK-Version": SDK_VERSION,
+          "X-Recur-Source": typeof window !== "undefined" ? window.location.origin : "server"
+        },
+        body: JSON.stringify(requestBody)
+      });
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({}));
+        throw new Error(error.error?.message || error.error || "Failed to create checkout session");
+      }
+      const rawResult = await response.json();
+      const result = toCamelCase(rawResult);
+      return {
+        id: result.id,
+        url: result.url,
+        expiresAt: result.expiresAt,
+        clientSecret: result.clientSecret
+      };
+    },
+    [config]
+  );
+  const redirectToCheckout = React.useCallback(
+    async (options) => {
+      const session = await createCheckoutSession(options);
+      window.location.href = session.url;
+    },
+    [createCheckoutSession]
+  );
   const value = React.useMemo(
     () => ({
       config,
       checkout,
+      redirectToCheckout,
+      createCheckoutSession,
       fetchProducts,
       fetchPlans,
       isCheckingOut,
       updateConfig,
       getCheckoutStatus
     }),
-    [config, checkout, fetchProducts, fetchPlans, isCheckingOut, updateConfig, getCheckoutStatus]
+    [config, checkout, redirectToCheckout, createCheckoutSession, fetchProducts, fetchPlans, isCheckingOut, updateConfig, getCheckoutStatus]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(RecurContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(CustomerContext.Provider, { value: customerContextValue, children }) });
 }

package/dist/index.d.cts

@@ -529,15 +529,103 @@ interface FetchProductsOptions {
      */
     type?: 'SUBSCRIPTION' | 'ONE_TIME' | 'CREDITS' | 'DONATION';
 }
+/**
+ * Options for redirectToCheckout() and createCheckoutSession()
+ * Used with the Hosted Checkout flow (checkout.recur.tw)
+ */
+interface RedirectToCheckoutOptions {
+    /**
+     * Product ID to purchase
+     * Either productId or productSlug must be provided
+     */
+    productId?: string;
+    /**
+     * Product slug to purchase (alternative to productId)
+     * Either productId or productSlug must be provided
+     *
+     * @example 'premium-monthly', 'basic-yearly'
+     */
+    productSlug?: string;
+    /** Checkout mode: PAYMENT (one-time), SUBSCRIPTION (recurring), or SETUP (save card) */
+    mode?: 'PAYMENT' | 'SUBSCRIPTION' | 'SETUP';
+    /** URL to redirect after successful payment */
+    successUrl: string;
+    /** URL to redirect if user cancels */
+    cancelUrl: string;
+    /** Optional: Pre-fill customer email */
+    customerEmail?: string;
+    /** Optional: Pre-fill customer name */
+    customerName?: string;
+    /**
+     * External customer ID from your system
+     * Use this to link Recur subscriptions to your existing users
+     *
+     * @example 'user_123', 'cus_abc456'
+     */
+    externalCustomerId?: string;
+}
+/**
+ * Result from creating a checkout session
+ */
+interface CheckoutSessionResult {
+    /** Checkout session ID */
+    id: string;
+    /** URL to redirect customer to hosted checkout */
+    url: string;
+    /** Session expiry time (ISO 8601) */
+    expiresAt: string;
+    /** Stripe-like client secret for secure status polling */
+    clientSecret?: string;
+}
 interface RecurContextValue {
     /**
      * Current configuration
      */
     config: RecurConfig;
     /**
-     * Initiate checkout flow
+     * Initiate checkout flow (embedded/modal mode)
+     *
+     * Uses PAYUNi SDK to render payment form on your page.
+     * Requires a registered domain — does NOT work on localhost.
+     *
+     * For localhost development or simpler integration, use redirectToCheckout() instead.
      */
     checkout: (options: CheckoutOptions) => Promise<void>;
+    /**
+     * Redirect to Hosted Checkout page (recommended)
+     *
+     * Creates a checkout session and redirects the customer to checkout.recur.tw.
+     * This is the simplest integration — works on any domain including localhost.
+     *
+     * @example
+     * ```tsx
+     * const { redirectToCheckout } = useRecur();
+     * await redirectToCheckout({
+     *   productId: 'prod_xxx',
+     *   successUrl: `${window.location.origin}/success`,
+     *   cancelUrl: `${window.location.origin}/cancel`,
+     * });
+     * ```
+     */
+    redirectToCheckout: (options: RedirectToCheckoutOptions) => Promise<void>;
+    /**
+     * Create a checkout session without redirecting
+     *
+     * Useful when you want to control the redirect yourself,
+     * or open checkout in a new tab/window.
+     *
+     * @example
+     * ```tsx
+     * const { createCheckoutSession } = useRecur();
+     * const session = await createCheckoutSession({
+     *   productId: 'prod_xxx',
+     *   successUrl: '/success',
+     *   cancelUrl: '/cancel',
+     * });
+     * window.open(session.url, '_blank');
+     * ```
+     */
+    createCheckoutSession: (options: RedirectToCheckoutOptions) => Promise<CheckoutSessionResult>;
     /**
      * Fetch available products
      */
@@ -1672,4 +1760,4 @@ declare function PromoCodeInput({ promo, placeholder, applyText, clearText, disa
  */
 declare function useCustomer(): UseCustomerResult;
 
-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 };
+export { type ApiErrorCode, type ApplicableProduct, type CheckDeniedReason, type CheckOptions, type CheckResult, type CheckoutError, type CheckoutErrorDetails, type CheckoutOptions, type CheckoutResult, type CheckoutSessionResult, type CustomerIdentifier, type DuplicateSubscriptionDetails, type Entitlement, type EntitlementCustomer, type EntitlementStatus, type EntitlementSubscription, type PaymentFailedAction, type PaymentFailureCode, type PaymentFailureDetails, type Plan, type PlansResult, type Product, type ProductMetadata, type ProductsResult, type PromoCodeDiscount, PromoCodeInput, type PromoCodeInputProps, type PromoCodeStatus, type RecurConfig, type RecurContextValue, RecurProvider, type RecurProviderProps, type RedirectToCheckoutOptions, type SubscriptionResult, type UseCustomerResult, type UseProductsOptions as UsePlansOptions, type 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

@@ -529,15 +529,103 @@ interface FetchProductsOptions {
      */
     type?: 'SUBSCRIPTION' | 'ONE_TIME' | 'CREDITS' | 'DONATION';
 }
+/**
+ * Options for redirectToCheckout() and createCheckoutSession()
+ * Used with the Hosted Checkout flow (checkout.recur.tw)
+ */
+interface RedirectToCheckoutOptions {
+    /**
+     * Product ID to purchase
+     * Either productId or productSlug must be provided
+     */
+    productId?: string;
+    /**
+     * Product slug to purchase (alternative to productId)
+     * Either productId or productSlug must be provided
+     *
+     * @example 'premium-monthly', 'basic-yearly'
+     */
+    productSlug?: string;
+    /** Checkout mode: PAYMENT (one-time), SUBSCRIPTION (recurring), or SETUP (save card) */
+    mode?: 'PAYMENT' | 'SUBSCRIPTION' | 'SETUP';
+    /** URL to redirect after successful payment */
+    successUrl: string;
+    /** URL to redirect if user cancels */
+    cancelUrl: string;
+    /** Optional: Pre-fill customer email */
+    customerEmail?: string;
+    /** Optional: Pre-fill customer name */
+    customerName?: string;
+    /**
+     * External customer ID from your system
+     * Use this to link Recur subscriptions to your existing users
+     *
+     * @example 'user_123', 'cus_abc456'
+     */
+    externalCustomerId?: string;
+}
+/**
+ * Result from creating a checkout session
+ */
+interface CheckoutSessionResult {
+    /** Checkout session ID */
+    id: string;
+    /** URL to redirect customer to hosted checkout */
+    url: string;
+    /** Session expiry time (ISO 8601) */
+    expiresAt: string;
+    /** Stripe-like client secret for secure status polling */
+    clientSecret?: string;
+}
 interface RecurContextValue {
     /**
      * Current configuration
      */
     config: RecurConfig;
     /**
-     * Initiate checkout flow
+     * Initiate checkout flow (embedded/modal mode)
+     *
+     * Uses PAYUNi SDK to render payment form on your page.
+     * Requires a registered domain — does NOT work on localhost.
+     *
+     * For localhost development or simpler integration, use redirectToCheckout() instead.
      */
     checkout: (options: CheckoutOptions) => Promise<void>;
+    /**
+     * Redirect to Hosted Checkout page (recommended)
+     *
+     * Creates a checkout session and redirects the customer to checkout.recur.tw.
+     * This is the simplest integration — works on any domain including localhost.
+     *
+     * @example
+     * ```tsx
+     * const { redirectToCheckout } = useRecur();
+     * await redirectToCheckout({
+     *   productId: 'prod_xxx',
+     *   successUrl: `${window.location.origin}/success`,
+     *   cancelUrl: `${window.location.origin}/cancel`,
+     * });
+     * ```
+     */
+    redirectToCheckout: (options: RedirectToCheckoutOptions) => Promise<void>;
+    /**
+     * Create a checkout session without redirecting
+     *
+     * Useful when you want to control the redirect yourself,
+     * or open checkout in a new tab/window.
+     *
+     * @example
+     * ```tsx
+     * const { createCheckoutSession } = useRecur();
+     * const session = await createCheckoutSession({
+     *   productId: 'prod_xxx',
+     *   successUrl: '/success',
+     *   cancelUrl: '/cancel',
+     * });
+     * window.open(session.url, '_blank');
+     * ```
+     */
+    createCheckoutSession: (options: RedirectToCheckoutOptions) => Promise<CheckoutSessionResult>;
     /**
      * Fetch available products
      */
@@ -1672,4 +1760,4 @@ declare function PromoCodeInput({ promo, placeholder, applyText, clearText, disa
  */
 declare function useCustomer(): UseCustomerResult;
 
-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 };
+export { type ApiErrorCode, type ApplicableProduct, type CheckDeniedReason, type CheckOptions, type CheckResult, type CheckoutError, type CheckoutErrorDetails, type CheckoutOptions, type CheckoutResult, type CheckoutSessionResult, type CustomerIdentifier, type DuplicateSubscriptionDetails, type Entitlement, type EntitlementCustomer, type EntitlementStatus, type EntitlementSubscription, type PaymentFailedAction, type PaymentFailureCode, type PaymentFailureDetails, type Plan, type PlansResult, type Product, type ProductMetadata, type ProductsResult, type PromoCodeDiscount, PromoCodeInput, type PromoCodeInputProps, type PromoCodeStatus, type RecurConfig, type RecurContextValue, RecurProvider, type RecurProviderProps, type RedirectToCheckoutOptions, type SubscriptionResult, type UseCustomerResult, type UseProductsOptions as UsePlansOptions, type 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

@@ -2808,7 +2808,7 @@ function toCamelCase(obj) {
 
 // package.json
 var package_default = {
-  version: "0.15.0"};
+  version: "0.16.1"};
 var SDK_VERSION = package_default.version;
 var SDK_TYPE = "react";
 var RecurContext = createContext(null);
@@ -3640,17 +3640,77 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
     },
     [config]
   );
+  const createCheckoutSession = useCallback(
+    async (options) => {
+      const baseUrl = config.baseUrl || "https://api.recur.tw";
+      if (!options.productId && !options.productSlug) {
+        throw new Error("Either productId or productSlug is required");
+      }
+      if (!options.successUrl) {
+        throw new Error("successUrl is required for hosted checkout");
+      }
+      if (!options.cancelUrl) {
+        throw new Error("cancelUrl is required for hosted checkout");
+      }
+      if (!config.publishableKey) {
+        throw new Error("publishableKey is required");
+      }
+      const requestBody = {
+        successUrl: options.successUrl,
+        cancelUrl: options.cancelUrl
+      };
+      if (options.productId) requestBody.productId = options.productId;
+      if (options.productSlug) requestBody.productSlug = options.productSlug;
+      if (options.mode) requestBody.mode = options.mode;
+      if (options.customerEmail) requestBody.customerEmail = options.customerEmail;
+      if (options.customerName) requestBody.customerName = options.customerName;
+      if (options.externalCustomerId) requestBody.externalCustomerId = options.externalCustomerId;
+      const response = await fetch(`${baseUrl}/v1/checkout/sessions`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Recur-Publishable-Key": config.publishableKey,
+          "X-Recur-SDK-Type": SDK_TYPE,
+          "X-Recur-SDK-Version": SDK_VERSION,
+          "X-Recur-Source": typeof window !== "undefined" ? window.location.origin : "server"
+        },
+        body: JSON.stringify(requestBody)
+      });
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({}));
+        throw new Error(error.error?.message || error.error || "Failed to create checkout session");
+      }
+      const rawResult = await response.json();
+      const result = toCamelCase(rawResult);
+      return {
+        id: result.id,
+        url: result.url,
+        expiresAt: result.expiresAt,
+        clientSecret: result.clientSecret
+      };
+    },
+    [config]
+  );
+  const redirectToCheckout = useCallback(
+    async (options) => {
+      const session = await createCheckoutSession(options);
+      window.location.href = session.url;
+    },
+    [createCheckoutSession]
+  );
   const value = useMemo(
     () => ({
       config,
       checkout,
+      redirectToCheckout,
+      createCheckoutSession,
       fetchProducts,
       fetchPlans,
       isCheckingOut,
       updateConfig,
       getCheckoutStatus
     }),
-    [config, checkout, fetchProducts, fetchPlans, isCheckingOut, updateConfig, getCheckoutStatus]
+    [config, checkout, redirectToCheckout, createCheckoutSession, fetchProducts, fetchPlans, isCheckingOut, updateConfig, getCheckoutStatus]
   );
   return /* @__PURE__ */ jsx(RecurContext.Provider, { value, children: /* @__PURE__ */ jsx(CustomerContext.Provider, { value: customerContextValue, children }) });
 }

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.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=`
+    `}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.16.1",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>