recur-tw 0.9.13 → 0.10.0

package/dist/checkout.js

@@ -0,0 +1,126 @@
+"use strict";var RecurCheckoutScript=(()=>{var f=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var R=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},U=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of E(t))!C.call(e,n)&&n!==r&&f(e,n,{get:()=>t[n],enumerable:!(o=v(t,n))||o.enumerable});return e};var _=e=>U(f({},"__esModule",{value:!0}),e);var T={};R(T,{default:()=>I});var s={embedUrl:"https://embed.recur.tw",apiUrl:"https://api.recur.tw"},d=null,g=null;function m(){if(document.getElementById("recur-checkout-styles"))return;let e=document.createElement("style");e.id="recur-checkout-styles",e.textContent=`
+    .recur-checkout-dialog {
+      border: none;
+      border-radius: 12px;
+      padding: 0;
+      width: 90%;
+      max-width: 480px;
+      max-height: 90vh;
+      overflow: hidden;
+      background: white;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      position: fixed;
+      inset: 0;
+      margin: auto;
+      height: fit-content;
+    }
+
+    .recur-checkout-dialog::backdrop {
+      background: rgba(0, 0, 0, 0.6);
+      backdrop-filter: blur(4px);
+    }
+
+    .recur-checkout-dialog[open] {
+      display: flex;
+      flex-direction: column;
+      animation: recur-dialog-open 0.2s ease-out;
+    }
+
+    @keyframes recur-dialog-open {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    .recur-checkout-dialog__header {
+      display: flex;
+      justify-content: flex-end;
+      padding: 12px 12px 0 12px;
+      background: white;
+    }
+
+    .recur-checkout-dialog__close {
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 50%;
+      cursor: pointer;
+      font-size: 18px;
+      color: #666;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.2s;
+    }
+
+    .recur-checkout-dialog__close:hover {
+      background: rgba(0, 0, 0, 0.1);
+    }
+
+    .recur-checkout-dialog__iframe {
+      width: 100%;
+      height: 600px;
+      max-height: calc(90vh - 56px);
+      border: none;
+      display: block;
+    }
+
+    .recur-checkout-dialog__loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 400px;
+      color: #666;
+    }
+
+    .recur-checkout-dialog__spinner {
+      width: 32px;
+      height: 32px;
+      border: 3px solid #e5e7eb;
+      border-top-color: #3b82f6;
+      border-radius: 50%;
+      animation: recur-spin 0.8s linear infinite;
+    }
+
+    @keyframes recur-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* Button styling (optional, can be overridden) */
+    .recur-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 12px 24px;
+      font-size: 16px;
+      font-weight: 600;
+      color: white;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      text-decoration: none;
+      transition: opacity 0.2s, transform 0.2s;
+    }
+
+    .recur-button:hover {
+      opacity: 0.9;
+      transform: translateY(-1px);
+    }
+
+    .recur-button:active {
+      transform: translateY(0);
+    }
+
+    .recur-button[data-loading="true"] {
+      opacity: 0.7;
+      pointer-events: none;
+    }
+  `,document.head.appendChild(e)}function A(e){try{let r=new URL(e,window.location.origin).pathname.split("/"),o=r.indexOf("buy");if(o===-1||o>=r.length-1)return null;let n=r[o+1];return n?n.startsWith("prod_")?{productId:n}:{productSlug:n}:null}catch{return null}}function P(e){let t=e.getAttribute("data-key");if(t)return t;try{let o=e.getAttribute("href");if(o){let i=new URL(o,window.location.origin).searchParams.get("key");if(i)return i}}catch{}let r=document.querySelector("script[data-recur-key]");return r?r.getAttribute("data-recur-key"):window.RecurConfig?.publishableKey?window.RecurConfig.publishableKey:null}async function b(e,t){let r={};e.productId&&(r.productId=e.productId),e.email&&(r.customerEmail=e.email),e.name&&(r.customerName=e.name);let o=await fetch(`${s.apiUrl}/v1/checkouts`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":t,"X-Recur-SDK-Type":"checkout.js","X-Recur-Source":window.location.origin},body:JSON.stringify(r)});if(!o.ok){let i=await o.json().catch(()=>({}));throw new Error(i.error?.message||i.error||"Failed to create checkout")}return{id:(await o.json()).checkout.id,publishableKey:t}}function y(e,t){c(),m();let r=document.createElement("dialog");r.className="recur-checkout-dialog";let o=document.createElement("div");o.className="recur-checkout-dialog__header";let n=document.createElement("button");n.className="recur-checkout-dialog__close",n.innerHTML="×",n.type="button",n.setAttribute("aria-label","Close"),n.onclick=()=>{c(),t?.(),a("recur:close",{})},o.appendChild(n);let i=document.createElement("iframe");i.className="recur-checkout-dialog__iframe",i.src=e,i.setAttribute("allow","payment"),i.setAttribute("title","Recur Checkout"),r.appendChild(o),r.appendChild(i),document.body.appendChild(r),d=r,g=i,r.showModal(),document.body.style.overflow="hidden",r.addEventListener("cancel",p=>{p.preventDefault(),c(),t?.(),a("recur:close",{})}),window.addEventListener("message",k)}function c(){d&&(d.close(),d.remove(),d=null),g=null,document.body.style.overflow="",window.removeEventListener("message",k)}function k(e){if(!e.origin.includes("recur.tw")&&!e.origin.includes("localhost"))return;let{type:t,data:r}=e.data||{};switch(t){case"RECUR_PAYMENT_SUCCESS":c(),a("recur:success",r);break;case"RECUR_PAYMENT_ERROR":a("recur:error",r);break;case"RECUR_PAYMENT_CANCEL":c(),a("recur:close",{});break;case"RECUR_RESIZE":g&&r?.height&&(g.style.height=`${Math.min(r.height+56,window.innerHeight*.9)}px`);break}}function a(e,t){window.dispatchEvent(new CustomEvent(e,{detail:t}))}async function L(e,t){e.preventDefault();let r=t.getAttribute("href");if(!r){console.error("[Recur] Missing href on recur-button");return}let o=A(r);if(!o){console.error("[Recur] Invalid product URL:",r);return}let n=P(t);if(!n){console.error("[Recur] Missing publishable key. Add data-key attribute or set RecurConfig.publishableKey");return}let i={productId:o.productId||"",email:t.getAttribute("data-email")||void 0,name:t.getAttribute("data-name")||void 0,successUrl:t.getAttribute("data-success-url")||void 0,theme:t.getAttribute("data-theme")||void 0};t.setAttribute("data-loading","true");let p=t.textContent;t.textContent="...";try{let u=await b(i,n),l=new URL(`${s.embedUrl}/checkout`);l.searchParams.set("id",u.id),l.searchParams.set("key",u.publishableKey),i.theme&&l.searchParams.set("theme",i.theme),y(l.toString(),()=>{let x=i.successUrl})}catch(u){console.error("[Recur] Checkout error:",u),a("recur:error",{message:u.message})}finally{t.setAttribute("data-loading","false"),t.textContent=p}}function h(){document.querySelectorAll(".recur-button").forEach(t=>{t.hasAttribute("data-recur-initialized")||(t.setAttribute("data-recur-initialized","true"),t.addEventListener("click",r=>L(r,t)))})}function S(){let e=window.location.hostname;(e==="localhost"||e==="127.0.0.1"||e.includes(".local"))&&(s.embedUrl=`${window.location.protocol}//${e}:3002`,s.apiUrl=`${window.location.protocol}//${e}:3000/api`)}var w={config(e){Object.assign(s,e)},async popup(e){let t=await b(e,e.key),r=new URL(`${s.embedUrl}/checkout`);r.searchParams.set("id",t.id),r.searchParams.set("key",t.publishableKey),e.theme&&r.searchParams.set("theme",e.theme),y(r.toString())},close(){c()},init(){h()}};function M(){S(),m(),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",h):h(),new MutationObserver(t=>{for(let r of t)r.addedNodes.length>0&&h()}).observe(document.body,{childList:!0,subtree:!0})}window.Recur=w;M();var I=w;return _(T);})();
+/* Recur Checkout - https://recur.tw */

package/dist/recur.umd.js

@@ -1944,7 +1944,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.9.13",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 examples -p 8080 -o"},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","./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.9.13",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/widget.js

@@ -0,0 +1,132 @@
+"use strict";var RecurWidgetScript=(()=>{var g=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var v=(e,t)=>{for(var o in t)g(e,o,{get:t[o],enumerable:!0})},C=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of x(t))!y.call(e,n)&&n!==o&&g(e,n,{get:()=>t[n],enumerable:!(i=w(t,n))||i.enumerable});return e};var E=e=>C(g({},"__esModule",{value:!0}),e);var L={};v(L,{default:()=>S});var d={text:"\u8A02\u95B1\u652F\u6301",color:"#667eea",textColor:"#ffffff",position:"right",xMargin:18,yMargin:18,embedUrl:"https://embed.recur.tw",apiUrl:"https://api.recur.tw"},r=null,a=null,l=null,u=null;function k(){let e=document.querySelectorAll("script[data-product]"),t=e[e.length-1];if(!t)return console.error("[Recur Widget] Missing data-product attribute on script tag"),null;let o=t.getAttribute("data-key"),i=t.getAttribute("data-product");return o?i?{key:o,product:i,text:t.getAttribute("data-text")||d.text,color:t.getAttribute("data-color")||d.color,textColor:t.getAttribute("data-text-color")||d.textColor,position:t.getAttribute("data-position")||d.position,xMargin:parseInt(t.getAttribute("data-x-margin")||String(d.xMargin),10),yMargin:parseInt(t.getAttribute("data-y-margin")||String(d.yMargin),10),embedUrl:t.getAttribute("data-embed-url")||d.embedUrl,apiUrl:t.getAttribute("data-api-url")||d.apiUrl}:(console.error("[Recur Widget] Missing data-product attribute on script tag"),null):(console.error("[Recur Widget] Missing data-key attribute on script tag"),null)}function M(){if(!r)return;let e=window.location.hostname;(e==="localhost"||e==="127.0.0.1"||e.includes(".local"))&&(r.embedUrl=`${window.location.protocol}//${e}:3002`,r.apiUrl=`${window.location.protocol}//${e}:3000/api`)}function _(){if(!r||document.getElementById("recur-widget-styles"))return;let e=document.createElement("style");e.id="recur-widget-styles",e.textContent=`
+    .recur-widget-button {
+      position: fixed;
+      bottom: ${r.yMargin}px;
+      ${r.position}: ${r.xMargin}px;
+      z-index: 9999;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 20px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 15px;
+      font-weight: 600;
+      color: ${r.textColor};
+      background: ${r.color};
+      border: none;
+      border-radius: 50px;
+      cursor: pointer;
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+      transition: transform 0.2s, box-shadow 0.2s;
+    }
+
+    .recur-widget-button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+    }
+
+    .recur-widget-button:active {
+      transform: translateY(0);
+    }
+
+    .recur-widget-button[data-loading="true"] {
+      opacity: 0.8;
+      pointer-events: none;
+    }
+
+    .recur-widget-button__icon {
+      width: 20px;
+      height: 20px;
+    }
+
+    .recur-widget-dialog {
+      border: none;
+      border-radius: 12px;
+      padding: 0;
+      width: 90%;
+      max-width: 480px;
+      max-height: 90vh;
+      overflow: hidden;
+      background: white;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      position: fixed;
+      inset: 0;
+      margin: auto;
+      height: fit-content;
+    }
+
+    .recur-widget-dialog::backdrop {
+      background: rgba(0, 0, 0, 0.6);
+      backdrop-filter: blur(4px);
+    }
+
+    .recur-widget-dialog[open] {
+      display: flex;
+      flex-direction: column;
+      animation: recur-widget-dialog-open 0.2s ease-out;
+    }
+
+    @keyframes recur-widget-dialog-open {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    .recur-widget-dialog__header {
+      display: flex;
+      justify-content: flex-end;
+      padding: 12px 12px 0 12px;
+      background: white;
+    }
+
+    .recur-widget-dialog__close {
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 50%;
+      cursor: pointer;
+      font-size: 18px;
+      color: #666;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.2s;
+    }
+
+    .recur-widget-dialog__close:hover {
+      background: rgba(0, 0, 0, 0.1);
+    }
+
+    .recur-widget-dialog__iframe {
+      width: 100%;
+      height: 600px;
+      max-height: calc(90vh - 56px);
+      border: none;
+      display: block;
+    }
+
+    /* Mobile adjustments */
+    @media (max-width: 480px) {
+      .recur-widget-button {
+        padding: 10px 16px;
+        font-size: 14px;
+      }
+
+      .recur-widget-dialog {
+        width: 95%;
+        max-height: 95vh;
+      }
+    }
+  `,document.head.appendChild(e)}function R(){if(!r||a)return;let e=document.createElement("button");e.className="recur-widget-button",e.setAttribute("aria-label",r.text),e.innerHTML=`
+    <svg class="recur-widget-button__icon" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+    </svg>
+    <span>${r.text}</span>
+  `,e.addEventListener("click",f),document.body.appendChild(e),a=e}async function A(){if(!r)throw new Error("Widget not configured");let e=await fetch(`${r.apiUrl}/v1/checkouts`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":r.key,"X-Recur-SDK-Type":"widget.js","X-Recur-Source":window.location.origin},body:JSON.stringify({productId:r.product})});if(!e.ok){let o=await e.json().catch(()=>({}));throw new Error(o.error?.message||o.error||"Failed to create checkout")}return{id:(await e.json()).checkout.id}}function U(e){if(!r)return;c();let t=document.createElement("dialog");t.className="recur-widget-dialog";let o=document.createElement("div");o.className="recur-widget-dialog__header";let i=document.createElement("button");i.className="recur-widget-dialog__close",i.innerHTML="&times;",i.type="button",i.setAttribute("aria-label","Close"),i.onclick=()=>{c(),s("recur:close",{})},o.appendChild(i);let n=document.createElement("iframe");n.className="recur-widget-dialog__iframe",n.src=e,n.setAttribute("allow","payment"),n.setAttribute("title","Recur Checkout"),t.appendChild(o),t.appendChild(n),document.body.appendChild(t),l=t,u=n,t.showModal(),document.body.style.overflow="hidden",t.addEventListener("cancel",b=>{b.preventDefault(),c(),s("recur:close",{})}),window.addEventListener("message",m)}function c(){l&&(l.close(),l.remove(),l=null),u=null,document.body.style.overflow="",window.removeEventListener("message",m)}function m(e){if(!e.origin.includes("recur.tw")&&!e.origin.includes("localhost"))return;let{type:t,data:o}=e.data||{};switch(t){case"RECUR_PAYMENT_SUCCESS":c(),s("recur:success",o);break;case"RECUR_PAYMENT_ERROR":s("recur:error",o);break;case"RECUR_PAYMENT_CANCEL":c(),s("recur:close",{});break;case"RECUR_RESIZE":u&&o?.height&&(u.style.height=`${Math.min(o.height+56,window.innerHeight*.9)}px`);break}}function s(e,t){window.dispatchEvent(new CustomEvent(e,{detail:t}))}async function f(){if(!(!r||!a)){a.setAttribute("data-loading","true");try{let e=await A(),t=new URL(`${r.embedUrl}/checkout`);t.searchParams.set("id",e.id),t.searchParams.set("key",r.key),U(t.toString())}catch(e){console.error("[Recur Widget] Error:",e),s("recur:error",{message:e.message})}finally{a.setAttribute("data-loading","false")}}}var h={open(){f()},close(){c()},show(){a&&(a.style.display="flex")},hide(){a&&(a.style.display="none")},destroy(){c(),a&&(a.remove(),a=null);let e=document.getElementById("recur-widget-styles");e&&e.remove()}};function p(){r=k(),r&&(M(),_(),R())}window.RecurWidget=h;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",p):p();var S=h;return E(L);})();
+/* Recur Widget - https://recur.tw */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "recur-tw",
-  "version": "0.9.13",
+  "version": "0.10.0",
   "description": "React & Vanilla JS SDK for embedding subscription checkout flows (Taiwan / PAYUNi)",
   "type": "module",
   "private": false,
@@ -29,7 +29,7 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "type-check": "tsc --noEmit",
-    "examples": "npx http-server examples -p 8080 -o"
+    "examples": "npx http-server . -p 8080 -o /examples/"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -46,6 +46,8 @@
       "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",