recur-tw 0.6.1 → 0.7.1

package/dist/index.cjs

@@ -2232,6 +2232,271 @@ var init_checkout_button = __esm({
   }
 });
 
+// src/components/portal-button.ts
+var portal_button_exports = {};
+__export(portal_button_exports, {
+  RecurPortalButton: () => RecurPortalButton
+});
+var RecurPortalButton;
+var init_portal_button = __esm({
+  "src/components/portal-button.ts"() {
+    RecurPortalButton = class extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_isLoading", false);
+        __publicField(this, "handleClick", async (e) => {
+          e.preventDefault();
+          if (this._isLoading || this.hasAttribute("disabled")) {
+            return;
+          }
+          const portalUrl = this.getAttribute("portal-url");
+          const apiEndpoint = this.getAttribute("api-endpoint");
+          if (portalUrl) {
+            this.redirectToPortal(portalUrl);
+            return;
+          }
+          if (apiEndpoint) {
+            await this.fetchAndRedirect(apiEndpoint);
+            return;
+          }
+          this.dispatchError("Missing required attribute: either portal-url or api-endpoint must be provided");
+        });
+        this.attachShadow({ mode: "open" });
+      }
+      static get observedAttributes() {
+        return [
+          "portal-url",
+          "api-endpoint",
+          "customer-id",
+          "return-url",
+          "button-text",
+          "button-style",
+          "disabled",
+          "target"
+        ];
+      }
+      connectedCallback() {
+        this.render();
+        this.setupEventListeners();
+      }
+      disconnectedCallback() {
+        const button = this.shadowRoot?.querySelector("button");
+        if (button) {
+          button.removeEventListener("click", this.handleClick);
+        }
+      }
+      attributeChangedCallback(_name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+          this.render();
+        }
+      }
+      render() {
+        const buttonText = this.getAttribute("button-text") || this.textContent?.trim() || "\u7BA1\u7406\u8A02\u95B1";
+        const buttonStyle = this.getAttribute("button-style") || "primary";
+        const isDisabled = this.hasAttribute("disabled") || this._isLoading;
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+        }
+
+        button {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          font-size: 16px;
+          font-weight: 500;
+          padding: 12px 24px;
+          border-radius: 8px;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          min-width: 120px;
+          border: none;
+        }
+
+        button:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        /* Primary style (default) */
+        button.primary {
+          background: #18181b;
+          color: #ffffff;
+        }
+
+        button.primary:hover:not(:disabled) {
+          background: #27272a;
+        }
+
+        button.primary:active:not(:disabled) {
+          background: #3f3f46;
+        }
+
+        /* Outline style */
+        button.outline {
+          background: transparent;
+          color: #18181b;
+          border: 2px solid #18181b;
+        }
+
+        button.outline:hover:not(:disabled) {
+          background: #f4f4f5;
+        }
+
+        button.outline:active:not(:disabled) {
+          background: #e4e4e7;
+        }
+
+        /* Gradient style */
+        button.gradient {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: #ffffff;
+        }
+
+        button.gradient:hover:not(:disabled) {
+          opacity: 0.9;
+        }
+
+        button.gradient:active:not(:disabled) {
+          opacity: 0.8;
+        }
+
+        /* Link style */
+        button.link {
+          background: transparent;
+          color: #3b82f6;
+          padding: 4px 8px;
+          min-width: auto;
+          text-decoration: underline;
+        }
+
+        button.link:hover:not(:disabled) {
+          color: #2563eb;
+        }
+
+        button.link:active:not(:disabled) {
+          color: #1d4ed8;
+        }
+
+        /* Loading spinner */
+        .spinner {
+          width: 16px;
+          height: 16px;
+          border: 2px solid currentColor;
+          border-top-color: transparent;
+          border-radius: 50%;
+          animation: spin 0.6s linear infinite;
+        }
+
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+
+        /* Focus state */
+        button:focus-visible {
+          outline: 2px solid #3b82f6;
+          outline-offset: 2px;
+        }
+
+        /* Portal icon */
+        .portal-icon {
+          width: 18px;
+          height: 18px;
+        }
+      </style>
+
+      <button
+        class="${buttonStyle}"
+        ${isDisabled ? "disabled" : ""}
+        aria-busy="${this._isLoading}"
+      >
+        ${this._isLoading ? '<span class="spinner"></span>' : this.getPortalIcon()}
+        <span>${this._isLoading ? "\u8655\u7406\u4E2D..." : buttonText}</span>
+      </button>
+    `;
+      }
+      getPortalIcon() {
+        return `
+      <svg class="portal-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <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() {
+        const button = this.shadowRoot?.querySelector("button");
+        if (button) {
+          button.addEventListener("click", this.handleClick);
+        }
+      }
+      redirectToPortal(url) {
+        const target = this.getAttribute("target");
+        this.dispatchEvent(new CustomEvent("portal-redirect", {
+          detail: { url },
+          bubbles: true,
+          composed: true
+        }));
+        if (target === "_blank") {
+          window.open(url, "_blank", "noopener,noreferrer");
+        } else {
+          window.location.href = url;
+        }
+      }
+      async fetchAndRedirect(apiEndpoint) {
+        const customerId = this.getAttribute("customer-id");
+        const returnUrl = this.getAttribute("return-url");
+        this._isLoading = true;
+        this.render();
+        this.setupEventListeners();
+        try {
+          const requestBody = {};
+          if (customerId) requestBody.customerId = customerId;
+          if (returnUrl) requestBody.returnUrl = returnUrl;
+          const response = await fetch(apiEndpoint, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify(requestBody)
+          });
+          if (!response.ok) {
+            const error = await response.json().catch(() => ({}));
+            throw new Error(error.error?.message || error.message || `HTTP ${response.status}: Failed to create portal session`);
+          }
+          const data = await response.json();
+          const portalUrl = data.url || data.portalUrl;
+          if (!portalUrl) {
+            throw new Error("Portal URL not found in response");
+          }
+          this._isLoading = false;
+          this.render();
+          this.setupEventListeners();
+          this.redirectToPortal(portalUrl);
+        } catch (error) {
+          this._isLoading = false;
+          this.render();
+          this.setupEventListeners();
+          this.dispatchError(error.message || "Failed to create portal session");
+        }
+      }
+      dispatchError(message) {
+        console.error("[recur-portal]", message);
+        this.dispatchEvent(new CustomEvent("portal-error", {
+          detail: { message },
+          bubbles: true,
+          composed: true
+        }));
+      }
+    };
+    if (typeof window !== "undefined" && !customElements.get("recur-portal")) {
+      customElements.define("recur-portal", RecurPortalButton);
+    }
+  }
+});
+
 // src/components/index.ts
 async function registerComponents() {
   if (typeof window === "undefined") {
@@ -2246,7 +2511,8 @@ async function registerComponents() {
     Promise.resolve().then(() => (init_payment_form_skeleton(), payment_form_skeleton_exports)),
     Promise.resolve().then(() => (init_toast(), toast_exports)),
     Promise.resolve().then(() => (init_payment_form(), payment_form_exports)),
-    Promise.resolve().then(() => (init_checkout_button(), checkout_button_exports))
+    Promise.resolve().then(() => (init_checkout_button(), checkout_button_exports)),
+    Promise.resolve().then(() => (init_portal_button(), portal_button_exports))
   ]);
   const components = [
     "recur-loading-spinner",
@@ -2257,7 +2523,8 @@ async function registerComponents() {
     "recur-toast",
     "recur-toast-container",
     "recur-payment-form",
-    "recur-checkout"
+    "recur-checkout",
+    "recur-portal"
   ];
   const unregistered = components.filter((name) => !customElements.get(name));
   if (unregistered.length > 0) {

package/dist/index.d.cts

@@ -205,11 +205,24 @@ interface RecurConfig {
 }
 interface CheckoutOptions {
     /**
-     * Plan ID to subscribe to
+     * Product ID to purchase
+     * Either productId or productSlug must be provided
      */
-    planId: string;
+    productId?: string;
+    /**
+     * Product slug to purchase (alternative to productId)
+     * Either productId or productSlug must be provided
+     *
+     * @example 'premium-monthly', 'basic-yearly'
+     */
+    productSlug?: string;
     /**
-     * Customer information
+     * @deprecated Use productId instead
+     * Plan ID to subscribe to (kept for backward compatibility)
+     */
+    planId?: string;
+    /**
+     * Customer name
      */
     customerName?: string;
     /**
@@ -530,6 +543,61 @@ declare global {
     }
 }
 
+/**
+ * Recur Portal Button Web Component
+ *
+ * A simple, drop-in button for redirecting customers to the Customer Portal.
+ *
+ * Usage patterns:
+ *
+ * 1. Direct URL mode (recommended for server-rendered apps):
+ *    Use when you already have the portal URL from your server.
+ *    ```html
+ *    <recur-portal
+ *      portal-url="https://portal.recur.tw/s/ps_xxx">
+ *      管理訂閱
+ *    </recur-portal>
+ *    ```
+ *
+ * 2. API mode (for dynamic portal session creation):
+ *    Calls your backend API endpoint to create a portal session.
+ *    ```html
+ *    <recur-portal
+ *      api-endpoint="/api/create-portal-session"
+ *      customer-id="cus_xxx">
+ *      管理訂閱
+ *    </recur-portal>
+ *    ```
+ *
+ * Styling:
+ * - button-style: "primary" | "outline" | "gradient" | "link"
+ * - button-text: Override button text (default: slot content or "管理訂閱")
+ *
+ * Events:
+ * - portal-redirect: Fired before redirecting to portal
+ * - portal-error: Fired when an error occurs
+ */
+declare class RecurPortalButton extends HTMLElement {
+    private _isLoading;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(_name: string, oldValue: string, newValue: string): void;
+    private render;
+    private getPortalIcon;
+    private setupEventListeners;
+    private handleClick;
+    private redirectToPortal;
+    private fetchAndRedirect;
+    private dispatchError;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'recur-portal': RecurPortalButton;
+    }
+}
+
 interface RecurProviderProps {
     children: React.ReactNode;
     config?: RecurConfig;

package/dist/index.d.ts

@@ -205,11 +205,24 @@ interface RecurConfig {
 }
 interface CheckoutOptions {
     /**
-     * Plan ID to subscribe to
+     * Product ID to purchase
+     * Either productId or productSlug must be provided
      */
-    planId: string;
+    productId?: string;
+    /**
+     * Product slug to purchase (alternative to productId)
+     * Either productId or productSlug must be provided
+     *
+     * @example 'premium-monthly', 'basic-yearly'
+     */
+    productSlug?: string;
     /**
-     * Customer information
+     * @deprecated Use productId instead
+     * Plan ID to subscribe to (kept for backward compatibility)
+     */
+    planId?: string;
+    /**
+     * Customer name
      */
     customerName?: string;
     /**
@@ -530,6 +543,61 @@ declare global {
     }
 }
 
+/**
+ * Recur Portal Button Web Component
+ *
+ * A simple, drop-in button for redirecting customers to the Customer Portal.
+ *
+ * Usage patterns:
+ *
+ * 1. Direct URL mode (recommended for server-rendered apps):
+ *    Use when you already have the portal URL from your server.
+ *    ```html
+ *    <recur-portal
+ *      portal-url="https://portal.recur.tw/s/ps_xxx">
+ *      管理訂閱
+ *    </recur-portal>
+ *    ```
+ *
+ * 2. API mode (for dynamic portal session creation):
+ *    Calls your backend API endpoint to create a portal session.
+ *    ```html
+ *    <recur-portal
+ *      api-endpoint="/api/create-portal-session"
+ *      customer-id="cus_xxx">
+ *      管理訂閱
+ *    </recur-portal>
+ *    ```
+ *
+ * Styling:
+ * - button-style: "primary" | "outline" | "gradient" | "link"
+ * - button-text: Override button text (default: slot content or "管理訂閱")
+ *
+ * Events:
+ * - portal-redirect: Fired before redirecting to portal
+ * - portal-error: Fired when an error occurs
+ */
+declare class RecurPortalButton extends HTMLElement {
+    private _isLoading;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(_name: string, oldValue: string, newValue: string): void;
+    private render;
+    private getPortalIcon;
+    private setupEventListeners;
+    private handleClick;
+    private redirectToPortal;
+    private fetchAndRedirect;
+    private dispatchError;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'recur-portal': RecurPortalButton;
+    }
+}
+
 interface RecurProviderProps {
     children: React.ReactNode;
     config?: RecurConfig;