recur-tw 0.10.7 → 0.10.8

package/dist/index.cjs

@@ -247,7 +247,7 @@ var init_error_display = __esm({
   "src/components/base/error-display.ts"() {
     RecurErrorDisplay = class extends HTMLElement {
       static get observedAttributes() {
-        return ["error", "dismissible"];
+        return ["error", "error-title", "dismissible"];
       }
       constructor() {
         super();
@@ -264,6 +264,9 @@ var init_error_display = __esm({
       get error() {
         return this.getAttribute("error") || "";
       }
+      get errorTitle() {
+        return this.getAttribute("error-title") || "";
+      }
       get isDismissible() {
         return this.getAttribute("dismissible") === "true";
       }
@@ -308,6 +311,14 @@ var init_error_display = __esm({
           flex: 1;
         }
 
+        .recur-sdk__error-title {
+          margin: 0 0 4px 0;
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--recur-error-text, #991b1b);
+          line-height: 1.4;
+        }
+
         .recur-sdk__error-message {
           margin: 0;
           font-size: 14px;
@@ -359,6 +370,7 @@ var init_error_display = __esm({
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
         <div class="recur-sdk__error-content">
+          ${this.errorTitle ? `<p class="recur-sdk__error-title">${this.errorTitle}</p>` : ""}
           <p class="recur-sdk__error-message">${this.error}</p>
         </div>
         ${this.isDismissible ? `
@@ -1968,7 +1980,13 @@ var init_payment_form = __esm({
           this.setButtonLoading(false);
         }
       }
-      showError(message) {
+      /**
+       * Show error message in the form
+       * @param options - Either a string message or an object with title and message
+       */
+      showError(options) {
+        const message = typeof options === "string" ? options : options.message;
+        const title = typeof options === "object" ? options.title : void 0;
         let errorContainer = this.querySelector(".recur-sdk__error-container");
         if (!errorContainer) {
           errorContainer = document.createElement("div");
@@ -1978,6 +1996,9 @@ var init_payment_form = __esm({
         }
         const errorDisplay = document.createElement("recur-error-display");
         errorDisplay.setAttribute("error", message);
+        if (title) {
+          errorDisplay.setAttribute("error-title", title);
+        }
         errorDisplay.setAttribute("dismissible", "true");
         errorContainer.innerHTML = "";
         errorContainer.appendChild(errorDisplay);
@@ -2653,7 +2674,7 @@ function toCamelCase(obj) {
 
 // package.json
 var package_default = {
-  version: "0.10.6"};
+  version: "0.10.8"};
 var SDK_VERSION = package_default.version;
 var SDK_TYPE = "react";
 var RecurContext = React.createContext(null);
@@ -3051,6 +3072,46 @@ function RecurProvider({ children, config: initialConfig = {} }) {
             const rawPaymentResult = await paymentResponse.json();
             const paymentResult = toCamelCase(rawPaymentResult);
             console.log("[Recur SDK] Payment executed:", paymentResult);
+            if (paymentResult.success === false && paymentResult.failure) {
+              console.log("[Recur SDK] Payment failed:", paymentResult.failure);
+              const failureError = {
+                code: "PAYMENT_FAILED",
+                message: paymentResult.failure.message || "\u4ED8\u6B3E\u5931\u6557",
+                details: {
+                  failure_code: paymentResult.failure.code,
+                  failure_message: paymentResult.failure.message,
+                  can_retry: paymentResult.failure.canRetry
+                }
+              };
+              let action;
+              if (options.onPaymentFailed) {
+                action = options.onPaymentFailed(failureError);
+              }
+              if (!action) {
+                action = paymentResult.failure.canRetry ? { action: "retry" } : { action: "retry" };
+              }
+              if (action.action === "close") {
+                options.onError?.(failureError);
+                paymentForm.resetButton?.();
+                closeDialog();
+                setIsCheckingOut(false);
+                return;
+              } else if (action.action === "custom") {
+                paymentForm.showError?.({
+                  title: action.customTitle || "\u4ED8\u6B3E\u5931\u6557",
+                  message: action.customMessage || failureError.message
+                });
+                paymentForm.resetButton?.();
+                return;
+              } else {
+                paymentForm.showError?.({
+                  title: "\u4ED8\u6B3E\u5931\u6557",
+                  message: failureError.details?.failure_message || failureError.message
+                });
+                paymentForm.resetButton?.();
+                return;
+              }
+            }
             if (paymentResult.requires3D && paymentResult.redirectUrl) {
               console.log("[Recur SDK] 3D verification required");
               const isMobileOrWebView = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || // Detect common WebView user agents
@@ -3401,7 +3462,7 @@ function useProducts(options = {}) {
   };
 }
 function useSubscribe(options = {}) {
-  const { onSuccess, onError, onPaymentComplete, onPaymentCancel } = options;
+  const { onSuccess, onError, onPaymentComplete, onPaymentCancel, onPaymentFailed } = options;
   const { checkout, isCheckingOut } = useRecur();
   const [error, setError] = React.useState(null);
   const mutate = React.useCallback(
@@ -3420,6 +3481,9 @@ function useSubscribe(options = {}) {
             setError(err);
             onError?.(err);
           },
+          onPaymentFailed: (err) => {
+            return onPaymentFailed?.(err);
+          },
           onPaymentCancel: () => {
             onPaymentCancel?.();
           }
@@ -3433,7 +3497,7 @@ function useSubscribe(options = {}) {
         onError?.(checkoutError);
       }
     },
-    [checkout, onSuccess, onError, onPaymentComplete, onPaymentCancel]
+    [checkout, onSuccess, onError, onPaymentComplete, onPaymentCancel, onPaymentFailed]
   );
   const reset = React.useCallback(() => {
     setError(null);

package/dist/index.d.cts

@@ -55,6 +55,7 @@ declare class RecurErrorDisplay extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     private get error();
+    private get errorTitle();
     private get isDismissible();
     private handleDismiss;
     private render;
@@ -275,6 +276,30 @@ interface CheckoutOptions {
      * Callback when checkout fails
      */
     onError?: (error: CheckoutError) => void;
+    /**
+     * Callback when payment fails (after user submits payment)
+     *
+     * This allows you to customize behavior based on the specific failure reason.
+     * Return an action object to override default behavior, or return nothing/undefined
+     * to use the SDK's default handling.
+     *
+     * @example
+     * ```typescript
+     * onPaymentFailed: (error) => {
+     *   // Custom handling for insufficient funds
+     *   if (error.details?.failure_code === 'INSUFFICIENT_FUNDS') {
+     *     return {
+     *       action: 'custom',
+     *       customTitle: '餘額不足',
+     *       customMessage: '請使用其他付款方式或聯繫客服'
+     *     };
+     *   }
+     *   // Use default behavior for other errors
+     *   return undefined;
+     * }
+     * ```
+     */
+    onPaymentFailed?: (error: CheckoutError) => PaymentFailedAction | void | undefined;
     /**
      * Callback when payment is completed
      * (only works in popup mode)
@@ -323,6 +348,31 @@ interface CheckoutResult {
      */
     sdkTokenExpiresAt: string;
 }
+/**
+ * Payment failure codes from payment provider
+ * These indicate the specific reason a payment was declined
+ */
+type PaymentFailureCode = 'PAYUNI_DECLINED' | 'UNAPPROVED' | 'INSUFFICIENT_FUNDS' | 'CARD_DECLINED' | 'EXPIRED_CARD' | 'NETWORK_ERROR' | 'TIMEOUT' | 'INVALID_CARD' | 'UNKNOWN';
+/**
+ * Extended error details for payment failures
+ */
+interface PaymentFailureDetails {
+    /**
+     * Specific failure code from payment provider
+     * Use this to show appropriate error messages or take specific actions
+     */
+    failure_code?: PaymentFailureCode | string;
+    /**
+     * Raw failure message from payment provider
+     */
+    failure_message?: string;
+    /**
+     * Whether the user can retry with the same payment method
+     * - true: Temporary error (network, timeout) - retry may succeed
+     * - false: Permanent error (card declined, expired) - different payment method needed
+     */
+    can_retry?: boolean;
+}
 interface CheckoutError {
     /**
      * Error code
@@ -335,7 +385,27 @@ interface CheckoutError {
     /**
      * Additional error details
      */
-    details?: Record<string, unknown>;
+    details?: Record<string, unknown> & PaymentFailureDetails;
+}
+/**
+ * Action to take after payment failure
+ */
+interface PaymentFailedAction {
+    /**
+     * What action to take
+     * - 'retry': Keep dialog open, allow user to retry (default for can_retry=true)
+     * - 'close': Close dialog, trigger onError callback
+     * - 'custom': Show custom message in dialog
+     */
+    action: 'retry' | 'close' | 'custom';
+    /**
+     * Custom message to display (only used when action is 'custom')
+     */
+    customMessage?: string;
+    /**
+     * Custom title to display (only used when action is 'custom')
+     */
+    customTitle?: string;
 }
 interface SubscriptionResult {
     id: string;
@@ -556,7 +626,14 @@ declare class RecurPaymentForm extends HTMLElement {
     private setButtonLoading;
     resetButton(): void;
     setVerifying(verifying: boolean): void;
-    private showError;
+    /**
+     * Show error message in the form
+     * @param options - Either a string message or an object with title and message
+     */
+    showError(options: string | {
+        title?: string;
+        message: string;
+    }): void;
     private clearError;
     private updateComplete;
     getFormData(): {
@@ -794,6 +871,14 @@ interface UseSubscribeOptions {
      * Callback when an error occurs
      */
     onError?: (error: CheckoutError) => void;
+    /**
+     * Callback when payment fails (after user submits payment)
+     *
+     * This allows you to customize behavior based on the specific failure reason.
+     * Return an action object to override default behavior, or return nothing/undefined
+     * to use the SDK's default handling.
+     */
+    onPaymentFailed?: (error: CheckoutError) => PaymentFailedAction | void | undefined;
     /**
      * Callback when payment is cancelled
      */
@@ -803,11 +888,11 @@ interface UseSubscribeResult {
     /**
      * Function to initiate subscription checkout
      */
-    mutate: (options: Omit<CheckoutOptions, 'onSuccess' | 'onError' | 'onPaymentComplete' | 'onPaymentCancel'>) => Promise<void>;
+    mutate: (options: Omit<CheckoutOptions, 'onSuccess' | 'onError' | 'onPaymentComplete' | 'onPaymentCancel' | 'onPaymentFailed'>) => Promise<void>;
     /**
      * Alias for mutate (for better DX)
      */
-    subscribe: (options: Omit<CheckoutOptions, 'onSuccess' | 'onError' | 'onPaymentComplete' | 'onPaymentCancel'>) => Promise<void>;
+    subscribe: (options: Omit<CheckoutOptions, 'onSuccess' | 'onError' | 'onPaymentComplete' | 'onPaymentCancel' | 'onPaymentFailed'>) => Promise<void>;
     /**
      * Whether subscription is in progress
      */

package/dist/index.d.ts

@@ -55,6 +55,7 @@ declare class RecurErrorDisplay extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     private get error();
+    private get errorTitle();
     private get isDismissible();
     private handleDismiss;
     private render;
@@ -275,6 +276,30 @@ interface CheckoutOptions {
      * Callback when checkout fails
      */
     onError?: (error: CheckoutError) => void;
+    /**
+     * Callback when payment fails (after user submits payment)
+     *
+     * This allows you to customize behavior based on the specific failure reason.
+     * Return an action object to override default behavior, or return nothing/undefined
+     * to use the SDK's default handling.
+     *
+     * @example
+     * ```typescript
+     * onPaymentFailed: (error) => {
+     *   // Custom handling for insufficient funds
+     *   if (error.details?.failure_code === 'INSUFFICIENT_FUNDS') {
+     *     return {
+     *       action: 'custom',
+     *       customTitle: '餘額不足',
+     *       customMessage: '請使用其他付款方式或聯繫客服'
+     *     };
+     *   }
+     *   // Use default behavior for other errors
+     *   return undefined;
+     * }
+     * ```
+     */
+    onPaymentFailed?: (error: CheckoutError) => PaymentFailedAction | void | undefined;
     /**
      * Callback when payment is completed
      * (only works in popup mode)
@@ -323,6 +348,31 @@ interface CheckoutResult {
      */
     sdkTokenExpiresAt: string;
 }
+/**
+ * Payment failure codes from payment provider
+ * These indicate the specific reason a payment was declined
+ */
+type PaymentFailureCode = 'PAYUNI_DECLINED' | 'UNAPPROVED' | 'INSUFFICIENT_FUNDS' | 'CARD_DECLINED' | 'EXPIRED_CARD' | 'NETWORK_ERROR' | 'TIMEOUT' | 'INVALID_CARD' | 'UNKNOWN';
+/**
+ * Extended error details for payment failures
+ */
+interface PaymentFailureDetails {
+    /**
+     * Specific failure code from payment provider
+     * Use this to show appropriate error messages or take specific actions
+     */
+    failure_code?: PaymentFailureCode | string;
+    /**
+     * Raw failure message from payment provider
+     */
+    failure_message?: string;
+    /**
+     * Whether the user can retry with the same payment method
+     * - true: Temporary error (network, timeout) - retry may succeed
+     * - false: Permanent error (card declined, expired) - different payment method needed
+     */
+    can_retry?: boolean;
+}
 interface CheckoutError {
     /**
      * Error code
@@ -335,7 +385,27 @@ interface CheckoutError {
     /**
      * Additional error details
      */
-    details?: Record<string, unknown>;
+    details?: Record<string, unknown> & PaymentFailureDetails;
+}
+/**
+ * Action to take after payment failure
+ */
+interface PaymentFailedAction {
+    /**
+     * What action to take
+     * - 'retry': Keep dialog open, allow user to retry (default for can_retry=true)
+     * - 'close': Close dialog, trigger onError callback
+     * - 'custom': Show custom message in dialog
+     */
+    action: 'retry' | 'close' | 'custom';
+    /**
+     * Custom message to display (only used when action is 'custom')
+     */
+    customMessage?: string;
+    /**
+     * Custom title to display (only used when action is 'custom')
+     */
+    customTitle?: string;
 }
 interface SubscriptionResult {
     id: string;
@@ -556,7 +626,14 @@ declare class RecurPaymentForm extends HTMLElement {
     private setButtonLoading;
     resetButton(): void;
     setVerifying(verifying: boolean): void;
-    private showError;
+    /**
+     * Show error message in the form
+     * @param options - Either a string message or an object with title and message
+     */
+    showError(options: string | {
+        title?: string;
+        message: string;
+    }): void;
     private clearError;
     private updateComplete;
     getFormData(): {
@@ -794,6 +871,14 @@ interface UseSubscribeOptions {
      * Callback when an error occurs
      */
     onError?: (error: CheckoutError) => void;
+    /**
+     * Callback when payment fails (after user submits payment)
+     *
+     * This allows you to customize behavior based on the specific failure reason.
+     * Return an action object to override default behavior, or return nothing/undefined
+     * to use the SDK's default handling.
+     */
+    onPaymentFailed?: (error: CheckoutError) => PaymentFailedAction | void | undefined;
     /**
      * Callback when payment is cancelled
      */
@@ -803,11 +888,11 @@ interface UseSubscribeResult {
     /**
      * Function to initiate subscription checkout
      */
-    mutate: (options: Omit<CheckoutOptions, 'onSuccess' | 'onError' | 'onPaymentComplete' | 'onPaymentCancel'>) => Promise<void>;
+    mutate: (options: Omit<CheckoutOptions, 'onSuccess' | 'onError' | 'onPaymentComplete' | 'onPaymentCancel' | 'onPaymentFailed'>) => Promise<void>;
     /**
      * Alias for mutate (for better DX)
      */
-    subscribe: (options: Omit<CheckoutOptions, 'onSuccess' | 'onError' | 'onPaymentComplete' | 'onPaymentCancel'>) => Promise<void>;
+    subscribe: (options: Omit<CheckoutOptions, 'onSuccess' | 'onError' | 'onPaymentComplete' | 'onPaymentCancel' | 'onPaymentFailed'>) => Promise<void>;
     /**
      * Whether subscription is in progress
      */

package/dist/index.js

@@ -241,7 +241,7 @@ var init_error_display = __esm({
   "src/components/base/error-display.ts"() {
     RecurErrorDisplay = class extends HTMLElement {
       static get observedAttributes() {
-        return ["error", "dismissible"];
+        return ["error", "error-title", "dismissible"];
       }
       constructor() {
         super();
@@ -258,6 +258,9 @@ var init_error_display = __esm({
       get error() {
         return this.getAttribute("error") || "";
       }
+      get errorTitle() {
+        return this.getAttribute("error-title") || "";
+      }
       get isDismissible() {
         return this.getAttribute("dismissible") === "true";
       }
@@ -302,6 +305,14 @@ var init_error_display = __esm({
           flex: 1;
         }
 
+        .recur-sdk__error-title {
+          margin: 0 0 4px 0;
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--recur-error-text, #991b1b);
+          line-height: 1.4;
+        }
+
         .recur-sdk__error-message {
           margin: 0;
           font-size: 14px;
@@ -353,6 +364,7 @@ var init_error_display = __esm({
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
         <div class="recur-sdk__error-content">
+          ${this.errorTitle ? `<p class="recur-sdk__error-title">${this.errorTitle}</p>` : ""}
           <p class="recur-sdk__error-message">${this.error}</p>
         </div>
         ${this.isDismissible ? `
@@ -1962,7 +1974,13 @@ var init_payment_form = __esm({
           this.setButtonLoading(false);
         }
       }
-      showError(message) {
+      /**
+       * Show error message in the form
+       * @param options - Either a string message or an object with title and message
+       */
+      showError(options) {
+        const message = typeof options === "string" ? options : options.message;
+        const title = typeof options === "object" ? options.title : void 0;
         let errorContainer = this.querySelector(".recur-sdk__error-container");
         if (!errorContainer) {
           errorContainer = document.createElement("div");
@@ -1972,6 +1990,9 @@ var init_payment_form = __esm({
         }
         const errorDisplay = document.createElement("recur-error-display");
         errorDisplay.setAttribute("error", message);
+        if (title) {
+          errorDisplay.setAttribute("error-title", title);
+        }
         errorDisplay.setAttribute("dismissible", "true");
         errorContainer.innerHTML = "";
         errorContainer.appendChild(errorDisplay);
@@ -2647,7 +2668,7 @@ function toCamelCase(obj) {
 
 // package.json
 var package_default = {
-  version: "0.10.6"};
+  version: "0.10.8"};
 var SDK_VERSION = package_default.version;
 var SDK_TYPE = "react";
 var RecurContext = createContext(null);
@@ -3045,6 +3066,46 @@ function RecurProvider({ children, config: initialConfig = {} }) {
             const rawPaymentResult = await paymentResponse.json();
             const paymentResult = toCamelCase(rawPaymentResult);
             console.log("[Recur SDK] Payment executed:", paymentResult);
+            if (paymentResult.success === false && paymentResult.failure) {
+              console.log("[Recur SDK] Payment failed:", paymentResult.failure);
+              const failureError = {
+                code: "PAYMENT_FAILED",
+                message: paymentResult.failure.message || "\u4ED8\u6B3E\u5931\u6557",
+                details: {
+                  failure_code: paymentResult.failure.code,
+                  failure_message: paymentResult.failure.message,
+                  can_retry: paymentResult.failure.canRetry
+                }
+              };
+              let action;
+              if (options.onPaymentFailed) {
+                action = options.onPaymentFailed(failureError);
+              }
+              if (!action) {
+                action = paymentResult.failure.canRetry ? { action: "retry" } : { action: "retry" };
+              }
+              if (action.action === "close") {
+                options.onError?.(failureError);
+                paymentForm.resetButton?.();
+                closeDialog();
+                setIsCheckingOut(false);
+                return;
+              } else if (action.action === "custom") {
+                paymentForm.showError?.({
+                  title: action.customTitle || "\u4ED8\u6B3E\u5931\u6557",
+                  message: action.customMessage || failureError.message
+                });
+                paymentForm.resetButton?.();
+                return;
+              } else {
+                paymentForm.showError?.({
+                  title: "\u4ED8\u6B3E\u5931\u6557",
+                  message: failureError.details?.failure_message || failureError.message
+                });
+                paymentForm.resetButton?.();
+                return;
+              }
+            }
             if (paymentResult.requires3D && paymentResult.redirectUrl) {
               console.log("[Recur SDK] 3D verification required");
               const isMobileOrWebView = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || // Detect common WebView user agents
@@ -3395,7 +3456,7 @@ function useProducts(options = {}) {
   };
 }
 function useSubscribe(options = {}) {
-  const { onSuccess, onError, onPaymentComplete, onPaymentCancel } = options;
+  const { onSuccess, onError, onPaymentComplete, onPaymentCancel, onPaymentFailed } = options;
   const { checkout, isCheckingOut } = useRecur();
   const [error, setError] = useState(null);
   const mutate = useCallback(
@@ -3414,6 +3475,9 @@ function useSubscribe(options = {}) {
             setError(err);
             onError?.(err);
           },
+          onPaymentFailed: (err) => {
+            return onPaymentFailed?.(err);
+          },
           onPaymentCancel: () => {
             onPaymentCancel?.();
           }
@@ -3427,7 +3491,7 @@ function useSubscribe(options = {}) {
         onError?.(checkoutError);
       }
     },
-    [checkout, onSuccess, onError, onPaymentComplete, onPaymentCancel]
+    [checkout, onSuccess, onError, onPaymentComplete, onPaymentCancel, onPaymentFailed]
   );
   const reset = useCallback(() => {
     setError(null);

package/dist/recur.umd.js

@@ -121,7 +121,7 @@
         <p class="recur-sdk__success-message">${this.successMessage}</p>
         <slot></slot>
       </div>
-    `}};typeof window<"u"&&!customElements.get("recur-success-message")&&customElements.define("recur-success-message",oe)});var Le={};C(Le,{RecurErrorDisplay:()=>ie});var ie,Ue=k(()=>{"use strict";ie=class extends HTMLElement{static get observedAttributes(){return["error","dismissible"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(e,t,r){t!==r&&this.render()}get error(){return this.getAttribute("error")||""}get isDismissible(){return this.getAttribute("dismissible")==="true"}handleDismiss(){this.dispatchEvent(new CustomEvent("dismiss",{bubbles:!0,composed:!0})),this.remove()}render(){if(!this.error){this.shadowRoot.innerHTML="";return}this.shadowRoot.innerHTML=`
+    `}};typeof window<"u"&&!customElements.get("recur-success-message")&&customElements.define("recur-success-message",oe)});var Le={};C(Le,{RecurErrorDisplay:()=>ie});var ie,Ue=k(()=>{"use strict";ie=class extends HTMLElement{static get observedAttributes(){return["error","error-title","dismissible"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(e,t,r){t!==r&&this.render()}get error(){return this.getAttribute("error")||""}get errorTitle(){return this.getAttribute("error-title")||""}get isDismissible(){return this.getAttribute("dismissible")==="true"}handleDismiss(){this.dispatchEvent(new CustomEvent("dismiss",{bubbles:!0,composed:!0})),this.remove()}render(){if(!this.error){this.shadowRoot.innerHTML="";return}this.shadowRoot.innerHTML=`
       <style>
         :host {
           display: block;
@@ -150,6 +150,14 @@
           flex: 1;
         }
 
+        .recur-sdk__error-title {
+          margin: 0 0 4px 0;
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--recur-error-text, #991b1b);
+          line-height: 1.4;
+        }
+
         .recur-sdk__error-message {
           margin: 0;
           font-size: 14px;
@@ -201,6 +209,7 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
         <div class="recur-sdk__error-content">
+          ${this.errorTitle?`<p class="recur-sdk__error-title">${this.errorTitle}</p>`:""}
           <p class="recur-sdk__error-message">${this.error}</p>
         </div>
         ${this.isDismissible?`
@@ -1722,7 +1731,7 @@
       `):(r.classList.remove("loading"),r.disabled=!1,r.innerHTML='<span id="'+this.containerId+'-submit-text">\u78BA\u8A8D\u4ED8\u6B3E</span>'))}resetButton(){this.setButtonLoading(!1)}setVerifying(t){let r=document.getElementById(`${this.containerId}-submit-btn`);r&&(t?(r.classList.add("loading"),r.disabled=!0,r.innerHTML=`
         <span class="recur-loading-spinner"></span>
         <span>3D \u9A57\u8B49\u4E2D...</span>
-      `):this.setButtonLoading(!1))}showError(t){let r=this.querySelector(".recur-sdk__error-container");r||(r=document.createElement("div"),r.className="recur-sdk__error-container",r.style.cssText="margin-bottom: 16px;",this.insertBefore(r,this.firstChild));let o=document.createElement("recur-error-display");o.setAttribute("error",t),o.setAttribute("dismissible","true"),r.innerHTML="",r.appendChild(o),o.scrollIntoView({behavior:"smooth",block:"center"})}clearError(){let t=this.querySelector(".recur-sdk__error-container");t&&(t.innerHTML="")}updateComplete(){return new Promise(t=>{if(this.isConnected)setTimeout(t,0);else{let r=new MutationObserver(()=>{this.isConnected&&(r.disconnect(),setTimeout(t,0))});r.observe(document.body,{childList:!0,subtree:!0})}})}getFormData(){return{email:document.getElementById(`${this.containerId}-email`)?.value,name:document.getElementById(`${this.containerId}-name`)?.value}}setFormData(t){if(t.email){let r=document.getElementById(`${this.containerId}-email`);r&&(r.value=t.email)}if(t.name){let r=document.getElementById(`${this.containerId}-name`);r&&(r.value=t.name)}}};customElements.get("recur-payment-form")||customElements.define("recur-payment-form",le)});var at={};C(at,{RecurCheckoutButton:()=>de});var de,ct=k(()=>{"use strict";de=class extends HTMLElement{constructor(){super();l(this,"_isLoading",!1);l(this,"handleClick",async t=>{if(t.preventDefault(),this._isLoading||this.hasAttribute("disabled"))return;let r=this.getAttribute("publishable-key"),o=this.getAttribute("product-id"),i=this.getAttribute("success-url"),s=this.getAttribute("cancel-url");if(!r){this.dispatchError("Missing required attribute: publishable-key");return}if(!o){this.dispatchError("Missing required attribute: product-id");return}if(!i){this.dispatchError("Missing required attribute: success-url");return}if(!s){this.dispatchError("Missing required attribute: cancel-url");return}this._isLoading=!0,this.render(),this.setupEventListeners();try{let a=await this.createCheckoutSession({publishableKey:r,productId:o,successUrl:this.resolveUrl(i),cancelUrl:this.resolveUrl(s),customerEmail:this.getAttribute("customer-email")||void 0,mode:this.getAttribute("mode")});this.dispatchEvent(new CustomEvent("checkout-started",{detail:{sessionId:a.id,url:a.url},bubbles:!0,composed:!0})),window.location.href=a.url}catch(a){this._isLoading=!1,this.render(),this.setupEventListeners(),this.dispatchError(a.message||"Failed to create checkout session")}});this.attachShadow({mode:"open"})}static get observedAttributes(){return["publishable-key","product-id","success-url","cancel-url","customer-email","mode","button-text","button-style","disabled"]}connectedCallback(){this.render(),this.setupEventListeners()}disconnectedCallback(){let t=this.shadowRoot?.querySelector("button");t&&t.removeEventListener("click",this.handleClick)}attributeChangedCallback(t,r,o){r!==o&&this.render()}render(){let t=this.getAttribute("button-text")||this.textContent?.trim()||"\u8A02\u95B1",r=this.getAttribute("button-style")||"primary",o=this.hasAttribute("disabled")||this._isLoading;this.shadowRoot.innerHTML=`
+      `):this.setButtonLoading(!1))}showError(t){let r=typeof t=="string"?t:t.message,o=typeof t=="object"?t.title:void 0,i=this.querySelector(".recur-sdk__error-container");i||(i=document.createElement("div"),i.className="recur-sdk__error-container",i.style.cssText="margin-bottom: 16px;",this.insertBefore(i,this.firstChild));let s=document.createElement("recur-error-display");s.setAttribute("error",r),o&&s.setAttribute("error-title",o),s.setAttribute("dismissible","true"),i.innerHTML="",i.appendChild(s),s.scrollIntoView({behavior:"smooth",block:"center"})}clearError(){let t=this.querySelector(".recur-sdk__error-container");t&&(t.innerHTML="")}updateComplete(){return new Promise(t=>{if(this.isConnected)setTimeout(t,0);else{let r=new MutationObserver(()=>{this.isConnected&&(r.disconnect(),setTimeout(t,0))});r.observe(document.body,{childList:!0,subtree:!0})}})}getFormData(){return{email:document.getElementById(`${this.containerId}-email`)?.value,name:document.getElementById(`${this.containerId}-name`)?.value}}setFormData(t){if(t.email){let r=document.getElementById(`${this.containerId}-email`);r&&(r.value=t.email)}if(t.name){let r=document.getElementById(`${this.containerId}-name`);r&&(r.value=t.name)}}};customElements.get("recur-payment-form")||customElements.define("recur-payment-form",le)});var at={};C(at,{RecurCheckoutButton:()=>de});var de,ct=k(()=>{"use strict";de=class extends HTMLElement{constructor(){super();l(this,"_isLoading",!1);l(this,"handleClick",async t=>{if(t.preventDefault(),this._isLoading||this.hasAttribute("disabled"))return;let r=this.getAttribute("publishable-key"),o=this.getAttribute("product-id"),i=this.getAttribute("success-url"),s=this.getAttribute("cancel-url");if(!r){this.dispatchError("Missing required attribute: publishable-key");return}if(!o){this.dispatchError("Missing required attribute: product-id");return}if(!i){this.dispatchError("Missing required attribute: success-url");return}if(!s){this.dispatchError("Missing required attribute: cancel-url");return}this._isLoading=!0,this.render(),this.setupEventListeners();try{let a=await this.createCheckoutSession({publishableKey:r,productId:o,successUrl:this.resolveUrl(i),cancelUrl:this.resolveUrl(s),customerEmail:this.getAttribute("customer-email")||void 0,mode:this.getAttribute("mode")});this.dispatchEvent(new CustomEvent("checkout-started",{detail:{sessionId:a.id,url:a.url},bubbles:!0,composed:!0})),window.location.href=a.url}catch(a){this._isLoading=!1,this.render(),this.setupEventListeners(),this.dispatchError(a.message||"Failed to create checkout session")}});this.attachShadow({mode:"open"})}static get observedAttributes(){return["publishable-key","product-id","success-url","cancel-url","customer-email","mode","button-text","button-style","disabled"]}connectedCallback(){this.render(),this.setupEventListeners()}disconnectedCallback(){let t=this.shadowRoot?.querySelector("button");t&&t.removeEventListener("click",this.handleClick)}attributeChangedCallback(t,r,o){r!==o&&this.render()}render(){let t=this.getAttribute("button-text")||this.textContent?.trim()||"\u8A02\u95B1",r=this.getAttribute("button-style")||"primary",o=this.hasAttribute("disabled")||this._isLoading;this.shadowRoot.innerHTML=`
       <style>
         :host {
           display: inline-block;
@@ -1948,7 +1957,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 s=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)});if(!s.ok){let d=await s.json().catch(()=>({}));throw new Error(d.error?.message||d.message||`HTTP ${s.status}: Failed to create portal session`)}let a=await s.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.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",ue)});var zt={};C(zt,{RecurCheckout:()=>Z,RecurElements:()=>N,createElements:()=>Se,default:()=>Nt,init:()=>mt});async function Dt(){if(typeof window>"u"){console.warn("[Recur SDK] Cannot register Web Components: window is not defined");return}await Promise.all([Promise.resolve().then(()=>(De(),Re)),Promise.resolve().then(()=>(Me(),Pe)),Promise.resolve().then(()=>(Ue(),Le)),Promise.resolve().then(()=>(Be(),He)),Promise.resolve().then(()=>(Ze(),Ge)),Promise.resolve().then(()=>(et(),Qe)),Promise.resolve().then(()=>(nt(),st)),Promise.resolve().then(()=>(ct(),at)),Promise.resolve().then(()=>(dt(),lt))]);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"&&Dt();function Pt(n){return n.replace(/_([a-z])/g,(e,t)=>t.toUpperCase())}function w(n){if(n==null)return n;if(Array.isArray(n))return n.map(e=>w(e));if(n instanceof Date)return n;if(typeof n=="object"){let e={};for(let[t,r]of Object.entries(n)){let o=Pt(t);e[o]=w(r)}return e}return n}var ut={name:"recur-tw",version:"0.10.6",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 Lt=ut.version,Ut="vanilla",pe=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":Ut,"X-Recur-SDK-Version":Lt,"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 s={customerName:t,customerEmail:r};o&&(s.productId=o),i&&(s.productSlug=i);let a=await fetch(`${this.config.baseUrl}/v1/subscriptions`,{method:"POST",headers:this.getHeaders(),body:JSON.stringify(s)});if(!a.ok){let d=await a.json().catch(()=>({}));throw{code:d.error||"CHECKOUT_FAILED",message:d.message||"Failed to initiate checkout",details:d}}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 he=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=this.config.publishableKey.startsWith("pk_test_")?"S":"P"}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 s=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)});if(!s.ok){let d=await s.json().catch(()=>({}));throw new Error(d.error?.message||d.message||`HTTP ${s.status}: Failed to create portal session`)}let a=await s.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.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",ue)});var zt={};C(zt,{RecurCheckout:()=>Z,RecurElements:()=>N,createElements:()=>Se,default:()=>Nt,init:()=>mt});async function Dt(){if(typeof window>"u"){console.warn("[Recur SDK] Cannot register Web Components: window is not defined");return}await Promise.all([Promise.resolve().then(()=>(De(),Re)),Promise.resolve().then(()=>(Me(),Pe)),Promise.resolve().then(()=>(Ue(),Le)),Promise.resolve().then(()=>(Be(),He)),Promise.resolve().then(()=>(Ze(),Ge)),Promise.resolve().then(()=>(et(),Qe)),Promise.resolve().then(()=>(nt(),st)),Promise.resolve().then(()=>(ct(),at)),Promise.resolve().then(()=>(dt(),lt))]);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"&&Dt();function Pt(n){return n.replace(/_([a-z])/g,(e,t)=>t.toUpperCase())}function w(n){if(n==null)return n;if(Array.isArray(n))return n.map(e=>w(e));if(n instanceof Date)return n;if(typeof n=="object"){let e={};for(let[t,r]of Object.entries(n)){let o=Pt(t);e[o]=w(r)}return e}return n}var ut={name:"recur-tw",version:"0.10.8",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 Lt=ut.version,Ut="vanilla",pe=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":Ut,"X-Recur-SDK-Version":Lt,"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 s={customerName:t,customerEmail:r};o&&(s.productId=o),i&&(s.productSlug=i);let a=await fetch(`${this.config.baseUrl}/v1/subscriptions`,{method:"POST",headers:this.getHeaders(),body:JSON.stringify(s)});if(!a.ok){let d=await a.json().catch(()=>({}));throw{code:d.error||"CHECKOUT_FAILED",message:d.message||"Failed to initiate checkout",details:d}}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 he=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=this.config.publishableKey.startsWith("pk_test_")?"S":"P"}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

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

package/dist/server.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "recur-tw",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "description": "React & Vanilla JS SDK for embedding subscription checkout flows (Taiwan / PAYUNi)",
   "type": "module",
   "private": false,