recur-tw 0.4.2 → 0.4.4

package/README.md

@@ -85,7 +85,6 @@ function SubscriptionPage() {
             planId: plan.id,
             customerEmail: 'user@example.com',
             customerName: 'John Doe',
-            customerPhone: '+886912345678',
           })}
           disabled={isCheckingOut}
         >
@@ -196,7 +195,6 @@ await checkout({
   planId: 'plan_xxx',
   customerEmail: 'user@example.com',
   customerName: 'John Doe',
-  customerPhone: '+886912345678',
   // mode: 'embedded' is default when containerElementId is configured
 });
 ```
@@ -398,12 +396,11 @@ interface CheckoutOptions {
   // Required: Plan ID to subscribe to
   planId: string;
 
-  // Customer information
-  customerEmail?: string;
+  // Customer information (email is required)
+  customerEmail: string;   // Required: primary customer identifier
   customerName?: string;
-  customerPhone?: string;
 
-  // External customer ID - link to your existing users
+  // External customer ID - link to your existing users (optional, immutable once set)
   externalCustomerId?: string;
 
   // Checkout mode
@@ -423,7 +420,12 @@ interface CheckoutOptions {
 
 ### Customer Identification
 
-The SDK supports multiple ways to identify customers across your system and Recur.
+The SDK uses email as the primary customer identifier, with optional external ID support.
+
+#### Required Fields
+
+- `customerEmail` - **Required**. Customer's email address (primary identifier)
+- `externalCustomerId` - Optional. Your system's user ID
 
 #### Using External Customer ID
 
@@ -433,15 +435,15 @@ The `externalCustomerId` parameter allows you to link Recur subscriptions to you
 // React
 await checkout({
   planId: 'plan_xxx',
-  customerEmail: 'user@example.com',
+  customerEmail: 'user@example.com',  // Required
   customerName: 'John Doe',
-  externalCustomerId: 'user_12345', // Your system's user ID
+  externalCustomerId: 'user_12345',   // Optional: Your system's user ID
 });
 
 // Vanilla JS
 await recur.checkout({
   planId: 'plan_xxx',
-  customerEmail: 'user@example.com',
+  customerEmail: 'user@example.com',  // Required
   externalCustomerId: 'cus_abc456',
 });
 
@@ -450,28 +452,31 @@ await recur.redirectToCheckout({
   productId: 'prod_xxx',
   successUrl: '/success',
   cancelUrl: '/cancel',
-  customerEmail: 'user@example.com',
+  customerEmail: 'user@example.com',  // Required
   externalCustomerId: 'user_12345',
 });
 ```
 
-#### Required Fields
-
-For customer identification, **at least one** of the following must be provided:
-- `customerEmail` - Customer's email address
-- `externalCustomerId` - Your system's user ID
+#### Customer Resolution Rules
 
-The SDK will throw an error if neither is provided.
+When processing a checkout:
 
-#### Customer Resolution Priority
+1. **externalCustomerId provided** - Looks up customer by external ID first
+   - If found, verifies email matches (throws error if mismatch)
+   - If not found, checks if email already exists
+2. **Email lookup** - If external ID not found or not provided
+   - If email exists and external ID was provided → Error (cannot add external ID to existing customer)
+   - If email exists without external ID → Returns existing customer
+3. **Create new** - Creates a new customer if neither found
 
-When processing a checkout, the system uses the following priority to identify customers:
+#### Important: External ID is Immutable
 
-1. **externalCustomerId** - If provided, looks up customer by external ID first
-2. **customerEmail** - Falls back to email-based lookup
-3. **Create new** - Creates a new customer if no match found
+The `externalCustomerId` can only be set when **creating** a customer. Once set:
+- It cannot be changed
+- It cannot be added to an existing customer
+- It cannot be transferred to another customer
 
-If an `externalCustomerId` is provided but the customer already exists by email, the external ID will be bound to that existing customer.
+This design ensures data consistency and prevents accidental customer merges.
 
 #### Retrieving Customer by External ID
 
@@ -481,13 +486,12 @@ Use the API to retrieve customers by their external ID:
 GET /api/v1/subscribers/external/{externalCustomerId}
 ```
 
-This allows you to query subscription status and details using your own user identifiers.
-
 #### Best Practices
 
+- **Always provide email**: Email is required for all checkout operations
+- **Set external ID early**: Include `externalCustomerId` in the initial checkout request when creating customers
 - **Use consistent IDs**: Use your database primary key or UUID as the external ID
-- **Set early**: Include `externalCustomerId` in the initial checkout request
-- **Provide both when possible**: Although only one is required, providing both email and external ID ensures maximum flexibility
+- **Plan ahead**: Decide whether to use external IDs before your first customer signup
 
 ---
 

package/dist/index.cjs

@@ -1461,7 +1461,7 @@ var init_payment_form = __esm({
         section.className = "customer-info-section";
         const customerName = this.getAttribute("customer-name");
         const customerEmail = this.getAttribute("customer-email");
-        if (customerName && customerEmail) {
+        if (customerEmail) {
           section.innerHTML = `
         <style>
           .recur-info-display {
@@ -1497,10 +1497,12 @@ var init_payment_form = __esm({
         </style>
 
         <div class="recur-info-display">
-          <div class="recur-info-row">
-            <span class="recur-info-label">\u5BA2\u6236\u59D3\u540D\uFF1A</span>
-            <span class="recur-info-value">${customerName}</span>
-          </div>
+          ${customerName ? `
+            <div class="recur-info-row">
+              <span class="recur-info-label">\u5BA2\u6236\u59D3\u540D\uFF1A</span>
+              <span class="recur-info-value">${customerName}</span>
+            </div>
+          ` : ""}
           <div class="recur-info-row">
             <span class="recur-info-label">\u96FB\u5B50\u90F5\u4EF6\uFF1A</span>
             <span class="recur-info-value">${customerEmail}</span>
@@ -1563,6 +1565,7 @@ var init_payment_form = __esm({
             id="${this.containerId}-name"
             class="recur-form-input"
             placeholder="\u738B\u5C0F\u660E"
+            value="${customerName || ""}"
             required
           />
         </div>
@@ -2338,8 +2341,8 @@ function RecurProvider({ children, config: initialConfig = {} }) {
         if (!options.customerName) {
           throw new Error("customerName is required");
         }
-        if (!options.customerEmail && !options.externalCustomerId) {
-          throw new Error("Either customerEmail or externalCustomerId is required for customer identification");
+        if (!options.customerEmail) {
+          throw new Error("customerEmail is required");
         }
         const baseUrl = config.baseUrl || "https://api.recur.tw";
         console.log("[Recur SDK] Base URL:", baseUrl);

package/dist/index.d.cts

@@ -212,10 +212,15 @@ interface CheckoutOptions {
      * Customer information
      */
     customerName?: string;
-    customerEmail?: string;
     /**
-     * External customer ID from your system
-     * Use this to link Recur subscriptions to your existing users
+     * Customer email address (required)
+     * Used as the primary identifier for the customer
+     */
+    customerEmail: string;
+    /**
+     * External customer ID from your system (optional)
+     * Use this to link Recur subscriptions to your existing users.
+     * Once set during customer creation, this cannot be changed.
      *
      * @example 'user_123', 'cus_abc456'
      */

package/dist/index.d.ts

@@ -212,10 +212,15 @@ interface CheckoutOptions {
      * Customer information
      */
     customerName?: string;
-    customerEmail?: string;
     /**
-     * External customer ID from your system
-     * Use this to link Recur subscriptions to your existing users
+     * Customer email address (required)
+     * Used as the primary identifier for the customer
+     */
+    customerEmail: string;
+    /**
+     * External customer ID from your system (optional)
+     * Use this to link Recur subscriptions to your existing users.
+     * Once set during customer creation, this cannot be changed.
      *
      * @example 'user_123', 'cus_abc456'
      */

package/dist/index.js

@@ -1455,7 +1455,7 @@ var init_payment_form = __esm({
         section.className = "customer-info-section";
         const customerName = this.getAttribute("customer-name");
         const customerEmail = this.getAttribute("customer-email");
-        if (customerName && customerEmail) {
+        if (customerEmail) {
           section.innerHTML = `
         <style>
           .recur-info-display {
@@ -1491,10 +1491,12 @@ var init_payment_form = __esm({
         </style>
 
         <div class="recur-info-display">
-          <div class="recur-info-row">
-            <span class="recur-info-label">\u5BA2\u6236\u59D3\u540D\uFF1A</span>
-            <span class="recur-info-value">${customerName}</span>
-          </div>
+          ${customerName ? `
+            <div class="recur-info-row">
+              <span class="recur-info-label">\u5BA2\u6236\u59D3\u540D\uFF1A</span>
+              <span class="recur-info-value">${customerName}</span>
+            </div>
+          ` : ""}
           <div class="recur-info-row">
             <span class="recur-info-label">\u96FB\u5B50\u90F5\u4EF6\uFF1A</span>
             <span class="recur-info-value">${customerEmail}</span>
@@ -1557,6 +1559,7 @@ var init_payment_form = __esm({
             id="${this.containerId}-name"
             class="recur-form-input"
             placeholder="\u738B\u5C0F\u660E"
+            value="${customerName || ""}"
             required
           />
         </div>
@@ -2332,8 +2335,8 @@ function RecurProvider({ children, config: initialConfig = {} }) {
         if (!options.customerName) {
           throw new Error("customerName is required");
         }
-        if (!options.customerEmail && !options.externalCustomerId) {
-          throw new Error("Either customerEmail or externalCustomerId is required for customer identification");
+        if (!options.customerEmail) {
+          throw new Error("customerEmail is required");
         }
         const baseUrl = config.baseUrl || "https://api.recur.tw";
         console.log("[Recur SDK] Base URL:", baseUrl);

package/dist/recur.umd.js

@@ -974,7 +974,7 @@
         <span class="order-summary-label">\u7E3D\u8A08</span>
         <span class="order-summary-total">NT$ ${Number(i).toLocaleString()}</span>
       </div>
-    `,t}createCustomerInfoSection(){let t=document.createElement("div");t.className="customer-info-section";let r=this.getAttribute("customer-name"),i=this.getAttribute("customer-email");return r&&i?t.innerHTML=`
+    `,t}createCustomerInfoSection(){let t=document.createElement("div");t.className="customer-info-section";let r=this.getAttribute("customer-name"),i=this.getAttribute("customer-email");return i?t.innerHTML=`
         <style>
           .recur-info-display {
             background: #f7fafc;
@@ -1009,10 +1009,12 @@
         </style>
 
         <div class="recur-info-display">
-          <div class="recur-info-row">
-            <span class="recur-info-label">\u5BA2\u6236\u59D3\u540D\uFF1A</span>
-            <span class="recur-info-value">${r}</span>
-          </div>
+          ${r?`
+            <div class="recur-info-row">
+              <span class="recur-info-label">\u5BA2\u6236\u59D3\u540D\uFF1A</span>
+              <span class="recur-info-value">${r}</span>
+            </div>
+          `:""}
           <div class="recur-info-row">
             <span class="recur-info-label">\u96FB\u5B50\u90F5\u4EF6\uFF1A</span>
             <span class="recur-info-value">${i}</span>
@@ -1073,6 +1075,7 @@
             id="${this.containerId}-name"
             class="recur-form-input"
             placeholder="\u738B\u5C0F\u660E"
+            value="${r||""}"
             required
           />
         </div>
@@ -1393,7 +1396,7 @@
       display: block;
       user-select: none;
       transition: height 0.35s ease, opacity 0.4s ease 0.1s;
-    `.replace(/\s+/g," ").trim(),this.iframe.allow="payment *",this.iframe.setAttribute("title","Secure payment input frame"),this.iframe.setAttribute("role","presentation"),this.iframe.setAttribute("scrolling","no"),this.iframe.setAttribute("frameBorder","0"),this.container.innerHTML="",this.container.appendChild(this.iframe),new Promise((r,i)=>{let s=setTimeout(()=>{i(new Error("Elements initialization timeout"))},3e4),n=()=>{clearTimeout(s),this.off("ready",n),r()},o=l=>{clearTimeout(s),this.off("error",o),i(new Error(l.message||"Elements initialization failed"))};this.on("ready",n),this.on("error",o)})}on(e,t){this.eventHandlers.has(e)||this.eventHandlers.set(e,new Set),this.eventHandlers.get(e).add(t)}off(e,t){let r=this.eventHandlers.get(e);r&&r.delete(t)}emit(e,t){let r=this.eventHandlers.get(e);r&&r.forEach(i=>i(t))}handleMessage(e){if(!this.isValidOrigin(e.origin))return;let{type:t,data:r}=e.data||{};switch(t){case"RECUR_ELEMENTS_READY":this.sessionId=r.sessionId,this.timestamp=r.timestamp,this.creditToken=r.creditToken,this.emit("ready",r);break;case"RECUR_CARD_VALID":this.emit("change",{valid:r.valid});break;case"RECUR_CARD_TOKENIZED":this.cardToken=r.cardToken,this.cardTimestamp=r.timestamp,this.emit("tokenized",r);break;case"RECUR_PAYMENT_ERROR":this.emit("error",r);break;case"RECUR_RESIZE":this.iframe&&r?.height&&(this.iframe.style.height=`${r.height}px`);break}}isValidOrigin(e){try{let t=new URL(this.embedUrl).origin;return e===t}catch{return!1}}async tokenize(){if(!this.iframe||!this.iframe.contentWindow)throw new Error("Elements not mounted");let e=new URL(this.embedUrl).origin;return this.iframe.contentWindow.postMessage({type:"RECUR_TOKENIZE"},e),new Promise((t,r)=>{let i=setTimeout(()=>{r(new Error("Tokenization timeout"))},6e4),s=o=>{clearTimeout(i),this.off("tokenized",s),t(o)},n=o=>{clearTimeout(i),this.off("error",n),r(new Error(o.message||"Tokenization failed"))};this.on("tokenized",s),this.on("error",n)})}async confirmPayment(e){if(!this.sessionId||!this.cardToken)throw new Error("Card not tokenized. Call tokenize() first.");let t=await fetch(`${this.baseUrl}/api/v1/elements/confirm`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":this.publishableKey},body:JSON.stringify({sessionId:this.sessionId,sdkToken:this.cardToken,timestamp:this.cardTimestamp,creditToken:this.creditToken,productId:e.productId,email:e.email,name:e.name,metadata:e.metadata})}),r=await t.json();return t.ok?r:{status:"failed",message:r.error||r.message||"Payment failed",canRetry:r.canRetry??!0}}getDefaultBaseUrl(){if(typeof window>"u")return"https://app.recur.tw";let e=window.location.hostname;return e==="localhost"||e.includes(".test")||e.includes(".local")||e==="127.0.0.1"?`${window.location.protocol}//${e}:3000`:"https://app.recur.tw"}getDefaultEmbedUrl(){if(typeof window>"u")return"https://embed.recur.tw";let e=window.location.hostname;return e==="localhost"||e.includes(".test")||e.includes(".local")||e==="127.0.0.1"?`${window.location.protocol}//${e}:3002`:"https://embed.recur.tw"}destroy(){this.iframe&&this.iframe.parentNode&&this.iframe.parentNode.removeChild(this.iframe),this.iframe=null,this.container=null,this.sessionId=null,this.timestamp=null,this.creditToken=null,this.cardToken=null,this.cardTimestamp=null,this.eventHandlers.clear(),window.removeEventListener("message",this.handleMessage.bind(this))}};function $(c){return new y(c)}var fe="https://vendor.payuni.com.tw/sdk/uni-payment.js",be="https://sandbox-vendor.payuni.com.tw/sdk/uni-payment.js",te=!1,D=!1,x=null;async function re(c=!1){return te&&window.UniPayment?Promise.resolve():(D&&x||(D=!0,x=new Promise((e,t)=>{let r=document.createElement("script");r.src=c?be:fe,r.async=!0,r.onload=()=>{te=!0,D=!1,e()},r.onerror=()=>{D=!1,x=null,t(new Error("Failed to load PAYUNi SDK"))},document.head.appendChild(r)})),x)}var w=class{constructor(e){a(this,"core");a(this,"currentModal",null);a(this,"currentIframe",null);a(this,"currentModalOverlay",null);this.core=new _(e)}async fetchPlans(){return await this.core.fetchPlans()}async createEmbeddedCheckout(e){let t=this.core.getConfig();await new z(t,e).render()}async redirectToCheckout(e){let t=this.core.getConfig(),r=()=>{if(typeof window<"u"){let l=window.location.hostname;if(l==="localhost"||l.includes(".test")||l.includes(".local")||l==="127.0.0.1")return`${window.location.protocol}//${window.location.host}/api`}return"https://api.recur.tw"},i=t.baseUrl||r(),s={productId:e.productId,successUrl:e.successUrl,cancelUrl:e.cancelUrl};e.mode&&(s.mode=e.mode),e.customerEmail&&(s.customerEmail=e.customerEmail),e.externalCustomerId&&(s.externalCustomerId=e.externalCustomerId);let n=await fetch(`${i}/v1/checkout/sessions`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":t.publishableKey},body:JSON.stringify(s)});if(!n.ok){let l=await n.json().catch(()=>({}));throw new Error(l.error?.message||"Failed to create checkout session")}let o=await n.json();window.location.href=o.url}async createCheckoutSession(e){let t=this.core.getConfig(),r=()=>{if(typeof window<"u"){let o=window.location.hostname;if(o==="localhost"||o.includes(".test")||o.includes(".local")||o==="127.0.0.1")return`${window.location.protocol}//${window.location.host}/api`}return"https://api.recur.tw"},i=t.baseUrl||r(),s={productId:e.productId,successUrl:e.successUrl,cancelUrl:e.cancelUrl};e.mode&&(s.mode=e.mode),e.customerEmail&&(s.customerEmail=e.customerEmail),e.externalCustomerId&&(s.externalCustomerId=e.externalCustomerId);let n=await fetch(`${i}/v1/checkout/sessions`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":t.publishableKey},body:JSON.stringify(s)});if(!n.ok){let o=await n.json().catch(()=>({}));throw new Error(o.error?.message||"Failed to create checkout session")}return n.json()}async checkout(e){let t=this.core.getConfig(),r=null;try{if(console.log("[Recur SDK] Starting checkout flow...",{planId:e.planId,mode:e.mode}),!e.planId)throw new Error("planId is required");if(!t.publishableKey)throw new Error("publishableKey is required");if(!e.customerName)throw new Error("customerName is required");if(!e.customerEmail&&!e.externalCustomerId)throw new Error("Either customerEmail or externalCustomerId is required for customer identification");let i=this.getBaseUrl();console.log("[Recur SDK] Base URL:",i);let s={"Content-Type":"application/json","X-Recur-Publishable-Key":t.publishableKey},n=e.mode||"modal",o=null;if(n==="modal"){let u=this.createModalWithSkeleton(e.onClose);r=u.overlay,o=u.container}else if(n==="iframe"){if(o=this.getEmbeddedContainer(e.container),!o)throw new Error("Container is required for iframe mode");o.innerHTML="";let u=document.createElement("recur-payment-form-skeleton");o.appendChild(u)}console.log("[Recur SDK] Step 1: Creating checkout session...");let l=await fetch(`${i}/v1/checkouts`,{method:"POST",headers:s,body:JSON.stringify({productId:e.planId,customerName:e.customerName,customerEmail:e.customerEmail,externalCustomerId:e.externalCustomerId})});if(!l.ok){let u=await l.json().catch(()=>({}));console.error("[Recur SDK] Failed to create checkout:",u);let A=u.details||u.error||"Failed to create checkout";throw new Error(A)}let d=await l.json();if(console.log("[Recur SDK] Checkout created successfully:",d),e.onSuccess?.(d),n==="redirect"){let u=`https://checkout.recur.tw/${d.checkout.id}`;console.log("[Recur SDK] Redirecting to hosted checkout:",u),window.location.href=u;return}if(console.log("[Recur SDK] Step 2: Extracting SDK token..."),!d.sdkToken)throw new Error("SDK token missing from checkout response");console.log("[Recur SDK] Step 3: Loading PAYUNi SDK...");let v=!0;if(await re(v),console.log("[Recur SDK] PAYUNi SDK loaded successfully"),!window.UniPayment)throw new Error("PAYUNi SDK failed to load");if(console.log("[Recur SDK] Step 4: Rendering payment form..."),!o)throw new Error("Payment container not available");o.innerHTML="";let m=document.createElement("recur-payment-form");if(m.setAttribute("container-id",o.id||"recur-payment-container"),e.customerName&&m.setAttribute("customer-name",e.customerName),e.customerEmail&&m.setAttribute("customer-email",e.customerEmail),d.plan?.name&&m.setAttribute("plan-name",d.plan.name),d.checkout?.amount&&m.setAttribute("amount",d.checkout.amount.toString()),d.plan?.billingPeriod&&m.setAttribute("billing-period",d.plan.billingPeriod),m.setAttribute("custom-styles",`
+    `.replace(/\s+/g," ").trim(),this.iframe.allow="payment *",this.iframe.setAttribute("title","Secure payment input frame"),this.iframe.setAttribute("role","presentation"),this.iframe.setAttribute("scrolling","no"),this.iframe.setAttribute("frameBorder","0"),this.container.innerHTML="",this.container.appendChild(this.iframe),new Promise((r,i)=>{let s=setTimeout(()=>{i(new Error("Elements initialization timeout"))},3e4),n=()=>{clearTimeout(s),this.off("ready",n),r()},o=l=>{clearTimeout(s),this.off("error",o),i(new Error(l.message||"Elements initialization failed"))};this.on("ready",n),this.on("error",o)})}on(e,t){this.eventHandlers.has(e)||this.eventHandlers.set(e,new Set),this.eventHandlers.get(e).add(t)}off(e,t){let r=this.eventHandlers.get(e);r&&r.delete(t)}emit(e,t){let r=this.eventHandlers.get(e);r&&r.forEach(i=>i(t))}handleMessage(e){if(!this.isValidOrigin(e.origin))return;let{type:t,data:r}=e.data||{};switch(t){case"RECUR_ELEMENTS_READY":this.sessionId=r.sessionId,this.timestamp=r.timestamp,this.creditToken=r.creditToken,this.emit("ready",r);break;case"RECUR_CARD_VALID":this.emit("change",{valid:r.valid});break;case"RECUR_CARD_TOKENIZED":this.cardToken=r.cardToken,this.cardTimestamp=r.timestamp,this.emit("tokenized",r);break;case"RECUR_PAYMENT_ERROR":this.emit("error",r);break;case"RECUR_RESIZE":this.iframe&&r?.height&&(this.iframe.style.height=`${r.height}px`);break}}isValidOrigin(e){try{let t=new URL(this.embedUrl).origin;return e===t}catch{return!1}}async tokenize(){if(!this.iframe||!this.iframe.contentWindow)throw new Error("Elements not mounted");let e=new URL(this.embedUrl).origin;return this.iframe.contentWindow.postMessage({type:"RECUR_TOKENIZE"},e),new Promise((t,r)=>{let i=setTimeout(()=>{r(new Error("Tokenization timeout"))},6e4),s=o=>{clearTimeout(i),this.off("tokenized",s),t(o)},n=o=>{clearTimeout(i),this.off("error",n),r(new Error(o.message||"Tokenization failed"))};this.on("tokenized",s),this.on("error",n)})}async confirmPayment(e){if(!this.sessionId||!this.cardToken)throw new Error("Card not tokenized. Call tokenize() first.");let t=await fetch(`${this.baseUrl}/api/v1/elements/confirm`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":this.publishableKey},body:JSON.stringify({sessionId:this.sessionId,sdkToken:this.cardToken,timestamp:this.cardTimestamp,creditToken:this.creditToken,productId:e.productId,email:e.email,name:e.name,metadata:e.metadata})}),r=await t.json();return t.ok?r:{status:"failed",message:r.error||r.message||"Payment failed",canRetry:r.canRetry??!0}}getDefaultBaseUrl(){if(typeof window>"u")return"https://app.recur.tw";let e=window.location.hostname;return e==="localhost"||e.includes(".test")||e.includes(".local")||e==="127.0.0.1"?`${window.location.protocol}//${e}:3000`:"https://app.recur.tw"}getDefaultEmbedUrl(){if(typeof window>"u")return"https://embed.recur.tw";let e=window.location.hostname;return e==="localhost"||e.includes(".test")||e.includes(".local")||e==="127.0.0.1"?`${window.location.protocol}//${e}:3002`:"https://embed.recur.tw"}destroy(){this.iframe&&this.iframe.parentNode&&this.iframe.parentNode.removeChild(this.iframe),this.iframe=null,this.container=null,this.sessionId=null,this.timestamp=null,this.creditToken=null,this.cardToken=null,this.cardTimestamp=null,this.eventHandlers.clear(),window.removeEventListener("message",this.handleMessage.bind(this))}};function $(c){return new y(c)}var fe="https://vendor.payuni.com.tw/sdk/uni-payment.js",be="https://sandbox-vendor.payuni.com.tw/sdk/uni-payment.js",te=!1,D=!1,x=null;async function re(c=!1){return te&&window.UniPayment?Promise.resolve():(D&&x||(D=!0,x=new Promise((e,t)=>{let r=document.createElement("script");r.src=c?be:fe,r.async=!0,r.onload=()=>{te=!0,D=!1,e()},r.onerror=()=>{D=!1,x=null,t(new Error("Failed to load PAYUNi SDK"))},document.head.appendChild(r)})),x)}var w=class{constructor(e){a(this,"core");a(this,"currentModal",null);a(this,"currentIframe",null);a(this,"currentModalOverlay",null);this.core=new _(e)}async fetchPlans(){return await this.core.fetchPlans()}async createEmbeddedCheckout(e){let t=this.core.getConfig();await new z(t,e).render()}async redirectToCheckout(e){let t=this.core.getConfig(),r=()=>{if(typeof window<"u"){let l=window.location.hostname;if(l==="localhost"||l.includes(".test")||l.includes(".local")||l==="127.0.0.1")return`${window.location.protocol}//${window.location.host}/api`}return"https://api.recur.tw"},i=t.baseUrl||r(),s={productId:e.productId,successUrl:e.successUrl,cancelUrl:e.cancelUrl};e.mode&&(s.mode=e.mode),e.customerEmail&&(s.customerEmail=e.customerEmail),e.externalCustomerId&&(s.externalCustomerId=e.externalCustomerId);let n=await fetch(`${i}/v1/checkout/sessions`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":t.publishableKey},body:JSON.stringify(s)});if(!n.ok){let l=await n.json().catch(()=>({}));throw new Error(l.error?.message||"Failed to create checkout session")}let o=await n.json();window.location.href=o.url}async createCheckoutSession(e){let t=this.core.getConfig(),r=()=>{if(typeof window<"u"){let o=window.location.hostname;if(o==="localhost"||o.includes(".test")||o.includes(".local")||o==="127.0.0.1")return`${window.location.protocol}//${window.location.host}/api`}return"https://api.recur.tw"},i=t.baseUrl||r(),s={productId:e.productId,successUrl:e.successUrl,cancelUrl:e.cancelUrl};e.mode&&(s.mode=e.mode),e.customerEmail&&(s.customerEmail=e.customerEmail),e.externalCustomerId&&(s.externalCustomerId=e.externalCustomerId);let n=await fetch(`${i}/v1/checkout/sessions`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":t.publishableKey},body:JSON.stringify(s)});if(!n.ok){let o=await n.json().catch(()=>({}));throw new Error(o.error?.message||"Failed to create checkout session")}return n.json()}async checkout(e){let t=this.core.getConfig(),r=null;try{if(console.log("[Recur SDK] Starting checkout flow...",{planId:e.planId,mode:e.mode}),!e.planId)throw new Error("planId is required");if(!t.publishableKey)throw new Error("publishableKey is required");if(!e.customerName)throw new Error("customerName is required");if(!e.customerEmail)throw new Error("customerEmail is required");let i=this.getBaseUrl();console.log("[Recur SDK] Base URL:",i);let s={"Content-Type":"application/json","X-Recur-Publishable-Key":t.publishableKey},n=e.mode||"modal",o=null;if(n==="modal"){let u=this.createModalWithSkeleton(e.onClose);r=u.overlay,o=u.container}else if(n==="iframe"){if(o=this.getEmbeddedContainer(e.container),!o)throw new Error("Container is required for iframe mode");o.innerHTML="";let u=document.createElement("recur-payment-form-skeleton");o.appendChild(u)}console.log("[Recur SDK] Step 1: Creating checkout session...");let l=await fetch(`${i}/v1/checkouts`,{method:"POST",headers:s,body:JSON.stringify({productId:e.planId,customerName:e.customerName,customerEmail:e.customerEmail,externalCustomerId:e.externalCustomerId})});if(!l.ok){let u=await l.json().catch(()=>({}));console.error("[Recur SDK] Failed to create checkout:",u);let A=u.details||u.error||"Failed to create checkout";throw new Error(A)}let d=await l.json();if(console.log("[Recur SDK] Checkout created successfully:",d),e.onSuccess?.(d),n==="redirect"){let u=`https://checkout.recur.tw/${d.checkout.id}`;console.log("[Recur SDK] Redirecting to hosted checkout:",u),window.location.href=u;return}if(console.log("[Recur SDK] Step 2: Extracting SDK token..."),!d.sdkToken)throw new Error("SDK token missing from checkout response");console.log("[Recur SDK] Step 3: Loading PAYUNi SDK...");let v=!0;if(await re(v),console.log("[Recur SDK] PAYUNi SDK loaded successfully"),!window.UniPayment)throw new Error("PAYUNi SDK failed to load");if(console.log("[Recur SDK] Step 4: Rendering payment form..."),!o)throw new Error("Payment container not available");o.innerHTML="";let m=document.createElement("recur-payment-form");if(m.setAttribute("container-id",o.id||"recur-payment-container"),e.customerName&&m.setAttribute("customer-name",e.customerName),e.customerEmail&&m.setAttribute("customer-email",e.customerEmail),d.plan?.name&&m.setAttribute("plan-name",d.plan.name),d.checkout?.amount&&m.setAttribute("amount",d.checkout.amount.toString()),d.plan?.billingPeriod&&m.setAttribute("billing-period",d.plan.billingPeriod),m.setAttribute("custom-styles",`
         .form-input-focus {
           border-color: var(--ring, hsl(215 16% 47%)) !important;
           outline: 0 !important;

package/package.json

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