recur-tw 0.13.0 → 0.13.2

package/dist/checkout.js

@@ -1,4 +1,4 @@
-"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})},_=(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 U=e=>_(f({},"__esModule",{value:!0}),e);var T={};R(T,{default:()=>I});var a={embedUrl:"https://embed.recur.tw",apiUrl:"https://api.recur.tw"},h=null,p=null;function m(){if(document.getElementById("recur-checkout-styles"))return;let e=document.createElement("style");e.id="recur-checkout-styles",e.textContent=`
+"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})},_=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of E(t))!C.call(e,o)&&o!==r&&f(e,o,{get:()=>t[o],enumerable:!(n=v(t,o))||n.enumerable});return e};var U=e=>_(f({},"__esModule",{value:!0}),e);var T={};R(T,{default:()=>I});var s={embedUrl:"https://embed.recur.tw",apiUrl:"https://api.recur.tw"},h=null,p=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;
@@ -37,6 +37,14 @@
       }
     }
 
+    .recur-checkout-dialog__content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      outline: none;
+    }
+
     .recur-checkout-dialog__header {
       display: flex;
       justify-content: flex-end;
@@ -122,5 +130,5 @@
       opacity: 0.7;
       pointer-events: none;
     }
-  `,document.head.appendChild(e)}function S(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 n=e.getAttribute("href");if(n){let s=new URL(n,window.location.origin).searchParams.get("key");if(s)return s}}catch{}let r=document.querySelector("script[data-recur-key]");if(r)return r.getAttribute("data-recur-key");let o=window.RecurConfig;return o?.publishableKey?o.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(`${a.apiUrl}/v1/checkouts`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":t,"X-Recur-Embed-Domain":a.embedUrl,"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")}let n=await o.json();return{id:n.checkout.id,publishableKey:t,clientSecret:n.checkout.client_secret}}function y(e,t){u(),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=()=>{u(),t?.(),d("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),h=r,p=i,r.showModal(),document.body.style.overflow="hidden",r.addEventListener("cancel",s=>{s.preventDefault(),u(),t?.(),d("recur:close",{})}),window.addEventListener("message",k)}function u(){h&&(h.close(),h.remove(),h=null),p=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":u(),d("recur:success",r);break;case"RECUR_PAYMENT_ERROR":d("recur:error",r);break;case"RECUR_PAYMENT_CANCEL":u(),d("recur:close",{});break;case"RECUR_RESIZE":p&&r?.height&&(p.style.height=`${Math.min(r.height+56,window.innerHeight*.9)}px`);break}}function d(e,t){window.dispatchEvent(new CustomEvent(e,{detail:t}))}async function A(e,t){e.preventDefault();let r=t.getAttribute("href");if(!r){console.error("[Recur] Missing href on recur-button");return}let o=S(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 s=t.textContent;t.textContent="...";try{let c=await b(i,n),l=new URL(`${a.embedUrl}/checkout`);l.searchParams.set("id",c.id),l.searchParams.set("key",c.publishableKey),l.searchParams.set("client_secret",c.clientSecret),i.theme&&l.searchParams.set("theme",i.theme),y(l.toString(),()=>{let x=i.successUrl})}catch(c){console.error("[Recur] Checkout error:",c),d("recur:error",{message:c instanceof Error?c.message:"Unknown error"})}finally{t.setAttribute("data-loading","false"),t.textContent=s}}function g(){document.querySelectorAll(".recur-button").forEach(t=>{t.hasAttribute("data-recur-initialized")||(t.setAttribute("data-recur-initialized","true"),t.addEventListener("click",r=>A(r,t)))})}function L(){let e=window.location.hostname;(e==="localhost"||e==="127.0.0.1"||e.includes(".local"))&&(a.embedUrl=`${window.location.protocol}//${e}:3002`,a.apiUrl=`${window.location.protocol}//${e}:3000/api`)}var w={config(e){Object.assign(a,e)},async popup(e){let t=await b(e,e.key),r=new URL(`${a.embedUrl}/checkout`);r.searchParams.set("id",t.id),r.searchParams.set("key",t.publishableKey),r.searchParams.set("client_secret",t.clientSecret),e.theme&&r.searchParams.set("theme",e.theme),y(r.toString())},close(){u()},init(){g()}};function M(){L(),m(),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",g):g(),new MutationObserver(t=>{for(let r of t)r.addedNodes.length>0&&g()}).observe(document.body,{childList:!0,subtree:!0})}window.Recur=w;M();var I=w;return U(T);})();
+  `,document.head.appendChild(e)}function A(e){try{let r=new URL(e,window.location.origin).pathname.split("/"),n=r.indexOf("buy");if(n===-1||n>=r.length-1)return null;let o=r[n+1];return o?o.startsWith("prod_")?{productId:o}:{productSlug:o}:null}catch{return null}}function S(e){let t=e.getAttribute("data-key");if(t)return t;try{let o=e.getAttribute("href");if(o){let c=new URL(o,window.location.origin).searchParams.get("key");if(c)return c}}catch{}let r=document.querySelector("script[data-recur-key]");if(r)return r.getAttribute("data-recur-key");let n=window.RecurConfig;return n?.publishableKey?n.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 n=await fetch(`${s.apiUrl}/v1/checkouts`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":t,"X-Recur-Embed-Domain":s.embedUrl,"X-Recur-SDK-Type":"checkout.js","X-Recur-Source":window.location.origin},body:JSON.stringify(r)});if(!n.ok){let i=await n.json().catch(()=>({}));throw new Error(i.error?.message||i.error||"Failed to create checkout")}let o=await n.json();return{id:o.checkout.id,publishableKey:t,clientSecret:o.checkout.client_secret}}function y(e,t){u(),m();let r=document.createElement("dialog");r.className="recur-checkout-dialog";let n=document.createElement("div");n.className="recur-checkout-dialog__content",n.setAttribute("tabindex","-1"),n.setAttribute("autofocus","");let o=document.createElement("div");o.className="recur-checkout-dialog__header";let i=document.createElement("button");i.className="recur-checkout-dialog__close",i.innerHTML="×",i.type="button",i.setAttribute("aria-label","Close"),i.onclick=()=>{u(),t?.(),d("recur:close",{})},o.appendChild(i);let c=document.createElement("iframe");c.className="recur-checkout-dialog__iframe",c.src=e,c.setAttribute("allow","payment"),c.setAttribute("title","Recur Checkout"),n.appendChild(o),n.appendChild(c),r.appendChild(n),document.body.appendChild(r),h=r,p=c,r.showModal(),document.body.style.overflow="hidden",r.addEventListener("cancel",a=>{a.preventDefault(),u(),t?.(),d("recur:close",{})}),window.addEventListener("message",k)}function u(){h&&(h.close(),h.remove(),h=null),p=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":u(),d("recur:success",r);break;case"RECUR_PAYMENT_ERROR":d("recur:error",r);break;case"RECUR_PAYMENT_CANCEL":u(),d("recur:close",{});break;case"RECUR_RESIZE":p&&r?.height&&(p.style.height=`${Math.min(r.height+56,window.innerHeight*.9)}px`);break}}function d(e,t){window.dispatchEvent(new CustomEvent(e,{detail:t}))}async function P(e,t){e.preventDefault();let r=t.getAttribute("href");if(!r){console.error("[Recur] Missing href on recur-button");return}let n=A(r);if(!n){console.error("[Recur] Invalid product URL:",r);return}let o=S(t);if(!o){console.error("[Recur] Missing publishable key. Add data-key attribute or set RecurConfig.publishableKey");return}let i={productId:n.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 c=t.textContent;t.textContent="...";try{let a=await b(i,o),l=new URL(`${s.embedUrl}/checkout`);l.searchParams.set("id",a.id),l.searchParams.set("key",a.publishableKey),l.searchParams.set("client_secret",a.clientSecret),i.theme&&l.searchParams.set("theme",i.theme),y(l.toString(),()=>{let x=i.successUrl})}catch(a){console.error("[Recur] Checkout error:",a),d("recur:error",{message:a instanceof Error?a.message:"Unknown error"})}finally{t.setAttribute("data-loading","false"),t.textContent=c}}function g(){document.querySelectorAll(".recur-button").forEach(t=>{t.hasAttribute("data-recur-initialized")||(t.setAttribute("data-recur-initialized","true"),t.addEventListener("click",r=>P(r,t)))})}function L(){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),r.searchParams.set("client_secret",t.clientSecret),e.theme&&r.searchParams.set("theme",e.theme),y(r.toString())},close(){u()},init(){g()}};function M(){L(),m(),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",g):g(),new MutationObserver(t=>{for(let r of t)r.addedNodes.length>0&&g()}).observe(document.body,{childList:!0,subtree:!0})}window.Recur=w;M();var I=w;return U(T);})();
 /* Recur Checkout - https://recur.tw */

package/dist/index.cjs

@@ -1052,6 +1052,124 @@ var init_payment_form_light = __esm({
   }
 });
 
+// src/utils/checkout-display.ts
+function formatZhe(basisPoints) {
+  const zhe = (1e4 - basisPoints) / 1e3;
+  if (Number.isInteger(zhe)) return `${zhe} \u6298`;
+  const zhe10 = zhe * 10;
+  if (Number.isInteger(zhe10)) return `${zhe10} \u6298`;
+  return `${(zhe * 10).toFixed(2)} \u6298`;
+}
+function getIntervalText(interval, count) {
+  if (!interval) return "";
+  const countText = count && count > 1 ? count.toString() : "";
+  switch (interval.toUpperCase()) {
+    case "MONTH":
+      return `${countText}\u6708`;
+    case "YEAR":
+      return `${countText}\u5E74`;
+    case "WEEK":
+      return `${countText}\u9031`;
+    case "DAY":
+      return `${countText}\u5929`;
+    default:
+      return "";
+  }
+}
+function formatPrice(amount) {
+  return `NT$ ${amount.toLocaleString("zh-TW")}`;
+}
+function getCheckoutDiscountDisplay(input) {
+  const {
+    discountType,
+    couponDiscountValue,
+    discountAmount,
+    duration,
+    durationMonths,
+    productPrice,
+    productInterval,
+    productIntervalCount,
+    bonusMonths,
+    bonusTrialDays
+  } = input;
+  const intervalText = getIntervalText(productInterval, productIntervalCount);
+  const originalPriceText = intervalText ? `${formatPrice(productPrice)}/${intervalText}` : formatPrice(productPrice);
+  const bonusSuffix = buildBonusSuffix(bonusMonths, bonusTrialDays);
+  if (discountAmount === 0 && (bonusMonths || bonusTrialDays)) {
+    return {
+      line1: buildPureBonusLine(bonusMonths, bonusTrialDays),
+      line2: null
+    };
+  }
+  if (discountAmount === 0) {
+    return { line1: "", line2: null };
+  }
+  const afterLine = `\u4E4B\u5F8C ${originalPriceText}`;
+  if (discountType === "FIRST_PERIOD_PRICE") {
+    const firstPeriodPrice = couponDiscountValue;
+    const priceText = firstPeriodPrice === 0 ? "\u514D\u8CBB" : `\u7279\u50F9 ${formatPrice(firstPeriodPrice)}`;
+    const line1 = bonusSuffix ? `\u9996\u671F${priceText}\uFF0C${bonusSuffix}` : `\u9996\u671F${priceText}`;
+    return { line1, line2: afterLine };
+  }
+  if (discountType === "FIXED_AMOUNT") {
+    return buildStandardDiscount({
+      discountText: `\u6298 ${formatPrice(couponDiscountValue)}`,
+      duration,
+      durationMonths,
+      bonusSuffix,
+      afterLine
+    });
+  }
+  if (discountType === "PERCENTAGE") {
+    return buildStandardDiscount({
+      discountText: `\u4EAB ${formatZhe(couponDiscountValue)}`,
+      duration,
+      durationMonths,
+      bonusSuffix,
+      afterLine
+    });
+  }
+  return { line1: "", line2: null };
+}
+function buildStandardDiscount(opts) {
+  const { discountText, duration, durationMonths, bonusSuffix, afterLine } = opts;
+  switch (duration) {
+    case "ONCE": {
+      const base = `\u9996\u671F${discountText}`;
+      const line1 = bonusSuffix ? `${base}\uFF0C${bonusSuffix}` : base;
+      return { line1, line2: afterLine };
+    }
+    case "REPEATING": {
+      const periods = durationMonths ?? 0;
+      const line1 = `\u524D ${periods} \u671F\u6BCF\u671F${discountText}`;
+      return { line1, line2: afterLine };
+    }
+    case "FOREVER": {
+      const line1 = `\u6BCF\u671F${discountText}`;
+      return { line1, line2: null };
+    }
+    default:
+      return { line1: "", line2: null };
+  }
+}
+function buildBonusSuffix(bonusMonths, bonusTrialDays) {
+  const parts = [];
+  if (bonusMonths) parts.push(`\u52A0\u9001 ${bonusMonths} \u500B\u6708`);
+  if (bonusTrialDays) parts.push(`\u5EF6\u9577 ${bonusTrialDays} \u5929\u8A66\u7528`);
+  if (parts.length === 0) return null;
+  return `\u4E26${parts.join("\u53CA")}`;
+}
+function buildPureBonusLine(bonusMonths, bonusTrialDays) {
+  const parts = [];
+  if (bonusMonths) parts.push(`\u52A0\u9001 ${bonusMonths} \u500B\u6708`);
+  if (bonusTrialDays) parts.push(`\u5EF6\u9577\u8A66\u7528 ${bonusTrialDays} \u5929`);
+  return parts.join("\u53CA");
+}
+var init_checkout_display = __esm({
+  "src/utils/checkout-display.ts"() {
+  }
+});
+
 // src/components/payment-form.ts
 var payment_form_exports = {};
 __export(payment_form_exports, {
@@ -1062,6 +1180,7 @@ var init_payment_form = __esm({
   "src/components/payment-form.ts"() {
     init_payment_form_shadow();
     init_payment_form_light();
+    init_checkout_display();
     icons = {
       lock: litHtml.html`
     <svg class="security-icon" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -1365,73 +1484,26 @@ var init_payment_form = __esm({
       </div>
     `;
       }
-      // Helper to get interval text in Chinese
-      getIntervalText(interval, count) {
-        if (!interval) return "";
-        const countText = count && count > 1 ? count.toString() : "";
-        switch (interval.toUpperCase()) {
-          case "MONTH":
-            return `${countText}\u6708`;
-          case "YEAR":
-            return `${countText}\u5E74`;
-          case "WEEK":
-            return `${countText}\u9031`;
-          case "DAY":
-            return `${countText}\u5929`;
-          default:
-            return "";
-        }
-      }
-      // Get discount description based on type and duration
-      getDiscountDescription() {
+      // Get unified discount display using shared function
+      getDiscountDisplay() {
         if (!this._appliedCoupon) return null;
-        const { discountType, duration, durationMonths, productPrice, productInterval, productIntervalCount } = this._appliedCoupon;
-        const intervalText = this.getIntervalText(productInterval, productIntervalCount);
-        const originalPriceText = productPrice && intervalText ? `NT$ ${productPrice.toLocaleString()}/${intervalText}` : productPrice ? `NT$ ${productPrice.toLocaleString()}` : "";
         const amount = parseInt(this.getAttribute("amount") || "0", 10);
-        const finalAmount = amount - this._appliedCoupon.discountAmount;
-        if (discountType === "FIRST_PERIOD_PRICE") {
-          if (originalPriceText) {
-            return `\u9996\u671F\u53EA\u9700 NT$ ${finalAmount.toLocaleString()}\uFF0C\u4E4B\u5F8C ${originalPriceText}`;
-          }
-          return `\u9996\u671F\u53EA\u9700 NT$ ${finalAmount.toLocaleString()}`;
-        }
-        if (duration) {
-          switch (duration) {
-            case "ONCE":
-              if (originalPriceText) {
-                return `\u9996\u671F\u6298\u6263\uFF0C\u4E4B\u5F8C ${originalPriceText}`;
-              }
-              return "\u50C5\u9650\u9996\u671F";
-            case "REPEATING":
-              if (durationMonths) {
-                return `\u524D ${durationMonths} \u671F\u4EAB\u512A\u60E0\uFF0C\u4E4B\u5F8C\u6062\u5FA9\u539F\u50F9`;
-              }
-              return null;
-            case "FOREVER":
-              return "\u7D42\u8EAB\u512A\u60E0";
-            default:
-              return null;
-          }
-        }
-        return null;
-      }
-      // Get bonus description
-      getBonusDescription() {
-        if (!this._appliedCoupon) return null;
-        const parts = [];
-        if (this._appliedCoupon.bonusTrialDays) {
-          parts.push(`\u5EF6\u9577\u8A66\u7528 ${this._appliedCoupon.bonusTrialDays} \u5929`);
-        }
-        if (this._appliedCoupon.bonusMonths) {
-          parts.push(`\u52A0\u9001 ${this._appliedCoupon.bonusMonths} \u500B\u6708`);
-        }
-        return parts.length > 0 ? parts.join("\u3001") : null;
+        return getCheckoutDiscountDisplay({
+          discountType: this._appliedCoupon.discountType,
+          couponDiscountValue: this._appliedCoupon.couponDiscountValue,
+          discountAmount: this._appliedCoupon.discountAmount,
+          duration: this._appliedCoupon.duration || "ONCE",
+          durationMonths: this._appliedCoupon.durationMonths,
+          productPrice: this._appliedCoupon.productPrice ?? amount,
+          productInterval: this._appliedCoupon.productInterval,
+          productIntervalCount: this._appliedCoupon.productIntervalCount,
+          bonusMonths: this._appliedCoupon.bonusMonths,
+          bonusTrialDays: this._appliedCoupon.bonusTrialDays
+        });
       }
       renderCoupon() {
         if (this._appliedCoupon) {
-          const discountDescription = this.getDiscountDescription();
-          const bonusDescription = this.getBonusDescription();
+          const display = this.getDiscountDisplay();
           return litHtml.html`
         <div class="recur-coupon__applied-wrapper">
           <div class="recur-coupon__applied">
@@ -1452,18 +1524,17 @@ var init_payment_form = __esm({
                 ${this._couponLoading ? icons.spinner : icons.close}
               </button>
             </div>
-            <span class="recur-coupon__applied-amount">
-              -NT$ ${this._appliedCoupon.discountAmount.toLocaleString()}
-            </span>
+            ${this._appliedCoupon.discountAmount > 0 ? litHtml.html`
+              <span class="recur-coupon__applied-amount">
+                -NT$ ${this._appliedCoupon.discountAmount.toLocaleString()}
+              </span>
+            ` : litHtml.nothing}
           </div>
-          ${discountDescription ? litHtml.html`
-            <p class="recur-coupon__description">${discountDescription}</p>
+          ${display?.line1 ? litHtml.html`
+            <p class="recur-coupon__description">${display.line1}</p>
           ` : litHtml.nothing}
-          ${bonusDescription ? litHtml.html`
-            <div class="recur-coupon__bonus">
-              <span>✨</span>
-              <span>${bonusDescription}</span>
-            </div>
+          ${display?.line2 ? litHtml.html`
+            <p class="recur-coupon__description">${display.line2}</p>
           ` : litHtml.nothing}
         </div>
       `;
@@ -1626,10 +1697,10 @@ var init_payment_form = __esm({
       getCouponAppliedHTML() {
         const coupon = this._appliedCoupon;
         const nameHTML = coupon.couponName ? `<span class="recur-coupon__applied-name">${coupon.couponName}</span><span class="recur-coupon__applied-code">(${coupon.code})</span>` : `<span class="recur-coupon__applied-name">${coupon.code}</span>`;
-        const discountDescription = this.getDiscountDescription();
-        const bonusDescription = this.getBonusDescription();
-        const descriptionHTML = discountDescription ? `<p class="recur-coupon__description">${discountDescription}</p>` : "";
-        const bonusHTML = bonusDescription ? `<div class="recur-coupon__bonus"><span>\u2728</span><span>${bonusDescription}</span></div>` : "";
+        const display = this.getDiscountDisplay();
+        const amountHTML = coupon.discountAmount > 0 ? `<span class="recur-coupon__applied-amount">-NT$ ${coupon.discountAmount.toLocaleString()}</span>` : "";
+        const line1HTML = display?.line1 ? `<p class="recur-coupon__description">${display.line1}</p>` : "";
+        const line2HTML = display?.line2 ? `<p class="recur-coupon__description">${display.line2}</p>` : "";
         return `
       <div class="recur-coupon__applied-wrapper">
         <div class="recur-coupon__applied">
@@ -1642,10 +1713,10 @@ var init_payment_form = __esm({
               ${this._couponLoading ? '<span class="recur-coupon__spinner"></span>' : '<svg class="recur-coupon__remove-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>'}
             </button>
           </div>
-          <span class="recur-coupon__applied-amount">-NT$ ${coupon.discountAmount.toLocaleString()}</span>
+          ${amountHTML}
         </div>
-        ${descriptionHTML}
-        ${bonusHTML}
+        ${line1HTML}
+        ${line2HTML}
       </div>
     `;
       }
@@ -1717,6 +1788,7 @@ var init_payment_form = __esm({
             couponName: data.discount.coupon_name,
             discountType: data.discount.discount_type,
             discountAmount: data.discount.discount_amount,
+            couponDiscountValue: data.discount.coupon_discount_value ?? data.discount.discount_amount,
             duration: data.discount.duration,
             durationMonths: data.discount.duration_months,
             bonusTrialDays: data.discount.bonus_trial_days,
@@ -2742,7 +2814,7 @@ function toCamelCase(obj) {
 
 // package.json
 var package_default = {
-  version: "0.13.0"};
+  version: "0.13.2"};
 var SDK_VERSION = package_default.version;
 var SDK_TYPE = "react";
 var RecurContext = React.createContext(null);
@@ -2961,6 +3033,8 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
           dialog.className = "recur-sdk__dialog";
           dialogContent = document.createElement("div");
           dialogContent.className = "recur-sdk__dialog-content";
+          dialogContent.setAttribute("tabindex", "-1");
+          dialogContent.setAttribute("autofocus", "");
           dialogContent.style.cssText = `
             max-width: 500px;
             width: 100%;
@@ -2971,6 +3045,7 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
             border-radius: 12px;
             background: white;
             box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+            outline: none;
           `;
           const closeButton = document.createElement("button");
           closeButton.className = "recur-sdk__close-button";

package/dist/index.d.cts

@@ -929,9 +929,7 @@ declare class RecurPaymentForm extends HTMLElement {
     private isTestMode;
     private renderTestCardHints;
     private renderOrderSummary;
-    private getIntervalText;
-    private getDiscountDescription;
-    private getBonusDescription;
+    private getDiscountDisplay;
     private renderCoupon;
     private showCouponInput;
     private cancelCouponInput;
@@ -957,6 +955,7 @@ declare class RecurPaymentForm extends HTMLElement {
         couponName: string;
         discountType: string;
         discountAmount: number;
+        couponDiscountValue: number;
         duration?: string;
         durationMonths?: number;
         bonusTrialDays?: number;

package/dist/index.d.ts

@@ -929,9 +929,7 @@ declare class RecurPaymentForm extends HTMLElement {
     private isTestMode;
     private renderTestCardHints;
     private renderOrderSummary;
-    private getIntervalText;
-    private getDiscountDescription;
-    private getBonusDescription;
+    private getDiscountDisplay;
     private renderCoupon;
     private showCouponInput;
     private cancelCouponInput;
@@ -957,6 +955,7 @@ declare class RecurPaymentForm extends HTMLElement {
         couponName: string;
         discountType: string;
         discountAmount: number;
+        couponDiscountValue: number;
         duration?: string;
         durationMonths?: number;
         bonusTrialDays?: number;