recur-tw 0.11.0 → 0.13.0

package/dist/checkout.js

@@ -1,4 +1,4 @@
-"use strict";var RecurCheckoutScript=(()=>{var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var R=(e,t)=>{for(var r in t)m(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&&m(e,n,{get:()=>t[n],enumerable:!(o=v(t,n))||o.enumerable});return e};var U=e=>_(m({},"__esModule",{value:!0}),e);var T={};R(T,{default:()=>I});var c={embedUrl:"https://embed.recur.tw",apiUrl:"https://api.recur.tw"},l=null,g=null;function f(){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,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=`
     .recur-checkout-dialog {
       border: none;
       border-radius: 12px;
@@ -122,5 +122,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 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(`${c.apiUrl}/v1/checkouts`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":t,"X-Recur-Embed-Domain":c.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){s(),f();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=()=>{s(),t?.(),u("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),l=r,g=i,r.showModal(),document.body.style.overflow="hidden",r.addEventListener("cancel",p=>{p.preventDefault(),s(),t?.(),u("recur:close",{})}),window.addEventListener("message",k)}function s(){l&&(l.close(),l.remove(),l=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":s(),u("recur:success",r);break;case"RECUR_PAYMENT_ERROR":u("recur:error",r);break;case"RECUR_PAYMENT_CANCEL":s(),u("recur:close",{});break;case"RECUR_RESIZE":g&&r?.height&&(g.style.height=`${Math.min(r.height+56,window.innerHeight*.9)}px`);break}}function u(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 p=t.textContent;t.textContent="...";try{let a=await b(i,n),d=new URL(`${c.embedUrl}/checkout`);d.searchParams.set("id",a.id),d.searchParams.set("key",a.publishableKey),d.searchParams.set("client_secret",a.clientSecret),i.theme&&d.searchParams.set("theme",i.theme),y(d.toString(),()=>{let x=i.successUrl})}catch(a){console.error("[Recur] Checkout error:",a),u("recur:error",{message:a.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=>A(r,t)))})}function L(){let e=window.location.hostname;(e==="localhost"||e==="127.0.0.1"||e.includes(".local"))&&(c.embedUrl=`${window.location.protocol}//${e}:3002`,c.apiUrl=`${window.location.protocol}//${e}:3000/api`)}var w={config(e){Object.assign(c,e)},async popup(e){let t=await b(e,e.key),r=new URL(`${c.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(){s()},init(){h()}};function M(){L(),f(),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 U(T);})();
+  `,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);})();
 /* Recur Checkout - https://recur.tw */

package/dist/index.cjs

@@ -1048,7 +1048,7 @@ var init_payment_form_shadow = __esm({
 var payment_form_light_default;
 var init_payment_form_light = __esm({
   "src/components/styles/payment-form-light.css"() {
-    payment_form_light_default = "/**\n * Payment Form - Light DOM Styles\n * These styles are applied to slotted content in the Light DOM\n * Using BEM naming convention with 'recur-' prefix for isolation\n */\n\n/* ============================================\n * Order Summary Styles\n * ============================================ */\n.recur-order-summary {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  padding: 16px;\n}\n\n.recur-order-summary__row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.recur-order-summary__row--total {\n  margin-bottom: 0;\n  padding-top: 12px;\n  border-top: 1px solid #e2e8f0;\n}\n\n.recur-order-summary__label {\n  font-size: 14px;\n  color: #4a5568;\n}\n\n.recur-order-summary__value {\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 500;\n  color: #2d3748;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n\n.recur-order-summary__total {\n  font-size: 18px;\n  line-height: 26px;\n  font-weight: 700;\n  color: #1a202c;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n\n/* ============================================\n * Coupon Section Styles\n * ============================================ */\n.recur-coupon {\n  padding: 12px 0;\n  border-top: 1px solid #e2e8f0;\n  margin-top: 12px;\n  min-height: 36px;\n  display: flex;\n  align-items: center;\n}\n\n.recur-coupon__trigger {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  height: 36px;\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 14px;\n  line-height: 1;\n  color: #718096;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.recur-coupon__trigger:hover {\n  color: #4a5568;\n}\n\n.recur-coupon__trigger-icon {\n  width: 16px;\n  height: 16px;\n}\n\n.recur-coupon__input-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n}\n\n.recur-coupon__input-wrapper {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n}\n\n.recur-coupon__input {\n  width: 100%;\n  height: 36px;\n  padding: 0 32px 0 12px;\n  font-size: 14px;\n  text-transform: uppercase;\n  background-color: #ffffff;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  outline: none;\n  transition: border-color 0.2s, box-shadow 0.2s;\n}\n\n.recur-coupon__input::placeholder {\n  text-transform: none;\n}\n\n.recur-coupon__input:hover:not(:focus) {\n  border-color: #9ca3af;\n}\n\n.recur-coupon__input:focus {\n  border-color: var(--ring, hsl(215 16% 47%));\n  outline: 0;\n  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring, hsl(215 16% 47%)) 50%, transparent);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n.recur-coupon__clear {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: none;\n  border: none;\n  padding: 4px;\n  cursor: pointer;\n  color: #9ca3af;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.2s;\n}\n\n.recur-coupon__clear:hover {\n  color: #6b7280;\n}\n\n.recur-coupon__clear-icon {\n  width: 16px;\n  height: 16px;\n}\n\n.recur-coupon__btn {\n  height: 36px;\n  padding: 0 12px;\n  font-size: 14px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background-color 0.2s, opacity 0.2s;\n  white-space: nowrap;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.recur-coupon__btn--apply {\n  background: #18181b;\n  color: white;\n  border: none;\n  min-width: 52px;\n}\n\n.recur-coupon__btn--apply .recur-coupon__spinner {\n  width: 14px;\n  height: 14px;\n}\n\n.recur-coupon__btn--apply:hover:not(:disabled) {\n  background: #27272a;\n}\n\n.recur-coupon__btn--apply:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.recur-coupon__error {\n  width: 100%;\n  margin-top: 8px;\n  font-size: 13px;\n  color: #dc2626;\n}\n\n.recur-coupon__applied-wrapper {\n  width: 100%;\n}\n\n.recur-coupon__description {\n  font-size: 12px;\n  color: #6b7280;\n  margin: 4px 0 0 22px;\n}\n\n.recur-coupon__bonus {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #dcfce7;\n  border-radius: 6px;\n  padding: 8px 12px;\n  margin-top: 8px;\n  font-size: 12px;\n  color: #15803d;\n}\n\n.recur-coupon__applied {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n}\n\n.recur-coupon__applied-info {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  flex: 1;\n}\n\n.recur-coupon__applied-icon {\n  width: 16px;\n  height: 16px;\n  color: #dc2626;\n  flex-shrink: 0;\n}\n\n.recur-coupon__applied-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #dc2626;\n  white-space: nowrap;\n}\n\n.recur-coupon__applied-code {\n  font-size: 14px;\n  color: #9ca3af;\n  white-space: nowrap;\n  margin-right: 2px;\n}\n\n.recur-coupon__applied-amount {\n  font-size: 14px;\n  font-weight: 500;\n  color: #dc2626;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n  flex-shrink: 0;\n  margin-left: auto;\n}\n\n.recur-coupon__remove {\n  background: none;\n  border: none;\n  padding: 4px;\n  cursor: pointer;\n  color: #9ca3af;\n  border-radius: 4px;\n  transition: color 0.2s, background-color 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.recur-coupon__remove:hover {\n  color: #6b7280;\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.recur-coupon__remove-icon {\n  width: 14px;\n  height: 14px;\n}\n\n.recur-coupon__spinner {\n  width: 14px;\n  height: 14px;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: recur-spin 0.6s linear infinite;\n}\n\n/* Discount Row */\n.recur-order-summary__row--discount {\n  color: #16a34a;\n}\n\n.recur-order-summary__row--discount .recur-order-summary__value {\n  color: #16a34a;\n  font-weight: 500;\n}\n\n/* ============================================\n * Customer Info Styles\n * ============================================ */\n.recur-info-display {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  padding: 12px;\n  margin-bottom: 8px;\n}\n\n.recur-info-row {\n  margin-bottom: 12px;\n}\n\n.recur-info-row:last-child {\n  margin-bottom: 0;\n}\n\n.recur-info-label {\n  display: block;\n  font-size: 12px;\n  line-height: 16px;\n  color: #718096;\n  margin-bottom: 2px;\n}\n\n.recur-info-value {\n  display: block;\n  font-size: 14px;\n  line-height: 20px;\n  min-height: 20px;\n  color: #2d3748;\n  font-weight: 500;\n  word-break: break-all;\n}\n\n.recur-form-group {\n  margin-bottom: 16px;\n}\n\n.recur-form-label {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  color: #2d3748;\n  margin-bottom: 6px;\n}\n\n.recur-form-input {\n  width: 100%;\n  height: 36px;\n  padding: 0 12px;\n  font-size: 14px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  transition: border-color 0.2s;\n  box-sizing: border-box;\n}\n\n.recur-form-input:focus {\n  border-color: var(--ring, hsl(215 16% 47%));\n  outline: 0;\n  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring, hsl(215 16% 47%)) 50%, transparent);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n.recur-form-input:hover:not(:focus) {\n  border-color: #9ca3af;\n}\n\n/* ============================================\n * Card Fields Styles\n * ============================================ */\n.recur-card-field {\n  margin-bottom: 16px;\n}\n\n.recur-card-field-label {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  color: #2d3748;\n  margin-bottom: 6px;\n}\n\n.recur-payuni-iframe {\n  height: 36px;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  touch-action: manipulation;\n}\n\n.recur-card-row {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  column-gap: 16px;\n  max-width: 100%;\n  box-sizing: border-box;\n}\n\n.recur-card-field-container {\n  position: relative;\n  touch-action: manipulation;\n}\n\n.recur-card-skeleton {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 36px;\n  width: 100%;\n  background: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 50%, #f0f0f0 100%);\n  background-size: 200% 100%;\n  animation: recur-skeleton-loading 1.5s ease-in-out infinite;\n  border-radius: 4px;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.recur-card-skeleton.hidden {\n  display: none;\n}\n\n@keyframes recur-skeleton-loading {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n/* ============================================\n * Submit Button Styles\n * ============================================ */\n.recur-submit-button {\n  width: 100%;\n  padding: 14px 20px;\n  font-size: 16px;\n  font-weight: 500;\n  color: #ffffff;\n  background: #18181b;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  box-sizing: border-box;\n}\n\n.recur-submit-button:hover:not(:disabled) {\n  background: #27272a;\n}\n\n.recur-submit-button:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.recur-submit-button.loading {\n  cursor: wait;\n}\n\n.recur-loading-spinner {\n  width: 16px;\n  height: 16px;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: recur-spin 0.6s linear infinite;\n}\n\n@keyframes recur-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* ============================================\n * Skeleton Loading Styles\n * ============================================ */\n.recur-skeleton {\n  display: inline-block;\n  background: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 50%, #f0f0f0 100%);\n  background-size: 200% 100%;\n  animation: recur-skeleton-loading 1.5s ease-in-out infinite;\n  border-radius: 4px;\n}\n";
+    payment_form_light_default = "/**\n * Payment Form - Light DOM Styles\n * These styles are applied to slotted content in the Light DOM\n * Using BEM naming convention with 'recur-' prefix for isolation\n */\n\n/* ============================================\n * Order Summary Styles\n * ============================================ */\n.recur-order-summary {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  padding: 16px;\n}\n\n.recur-order-summary__row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.recur-order-summary__row--total {\n  margin-bottom: 0;\n  padding-top: 12px;\n  border-top: 1px solid #e2e8f0;\n}\n\n.recur-order-summary__label {\n  font-size: 14px;\n  color: #4a5568;\n}\n\n.recur-order-summary__value {\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 500;\n  color: #2d3748;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n\n.recur-order-summary__total {\n  font-size: 18px;\n  line-height: 26px;\n  font-weight: 700;\n  color: #1a202c;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n\n/* ============================================\n * Coupon Section Styles\n * ============================================ */\n.recur-coupon {\n  padding: 12px 0;\n  border-top: 1px solid #e2e8f0;\n  margin-top: 12px;\n  min-height: 36px;\n  display: flex;\n  align-items: center;\n}\n\n.recur-coupon__trigger {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  height: 36px;\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 14px;\n  line-height: 1;\n  color: #718096;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.recur-coupon__trigger:hover {\n  color: #4a5568;\n}\n\n.recur-coupon__trigger-icon {\n  width: 16px;\n  height: 16px;\n}\n\n.recur-coupon__input-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n}\n\n.recur-coupon__input-wrapper {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n}\n\n.recur-coupon__input {\n  width: 100%;\n  height: 36px;\n  padding: 0 32px 0 12px;\n  font-size: 14px;\n  text-transform: uppercase;\n  background-color: #ffffff;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  outline: none;\n  transition: border-color 0.2s, box-shadow 0.2s;\n}\n\n.recur-coupon__input::placeholder {\n  text-transform: none;\n}\n\n.recur-coupon__input:hover:not(:focus) {\n  border-color: #9ca3af;\n}\n\n.recur-coupon__input:focus {\n  border-color: var(--ring, hsl(215 16% 47%));\n  outline: 0;\n  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring, hsl(215 16% 47%)) 50%, transparent);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n.recur-coupon__clear {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: none;\n  border: none;\n  padding: 4px;\n  cursor: pointer;\n  color: #9ca3af;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.2s;\n}\n\n.recur-coupon__clear:hover {\n  color: #6b7280;\n}\n\n.recur-coupon__clear-icon {\n  width: 16px;\n  height: 16px;\n}\n\n.recur-coupon__btn {\n  height: 36px;\n  padding: 0 12px;\n  font-size: 14px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background-color 0.2s, opacity 0.2s;\n  white-space: nowrap;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.recur-coupon__btn--apply {\n  background: #18181b;\n  color: white;\n  border: none;\n  min-width: 52px;\n}\n\n.recur-coupon__btn--apply .recur-coupon__spinner {\n  width: 14px;\n  height: 14px;\n}\n\n.recur-coupon__btn--apply:hover:not(:disabled) {\n  background: #27272a;\n}\n\n.recur-coupon__btn--apply:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.recur-coupon__error {\n  width: 100%;\n  margin-top: 8px;\n  font-size: 13px;\n  color: #dc2626;\n}\n\n.recur-coupon__applied-wrapper {\n  width: 100%;\n}\n\n.recur-coupon__description {\n  font-size: 12px;\n  color: #6b7280;\n  margin: 4px 0 0 22px;\n}\n\n.recur-coupon__bonus {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #dcfce7;\n  border-radius: 6px;\n  padding: 8px 12px;\n  margin-top: 8px;\n  font-size: 12px;\n  color: #15803d;\n}\n\n.recur-coupon__applied {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n}\n\n.recur-coupon__applied-info {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  flex: 1;\n}\n\n.recur-coupon__applied-icon {\n  width: 16px;\n  height: 16px;\n  color: #dc2626;\n  flex-shrink: 0;\n}\n\n.recur-coupon__applied-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #dc2626;\n  white-space: nowrap;\n}\n\n.recur-coupon__applied-code {\n  font-size: 14px;\n  color: #9ca3af;\n  white-space: nowrap;\n  margin-right: 2px;\n}\n\n.recur-coupon__applied-amount {\n  font-size: 14px;\n  font-weight: 500;\n  color: #dc2626;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n  flex-shrink: 0;\n  margin-left: auto;\n}\n\n.recur-coupon__remove {\n  background: none;\n  border: none;\n  padding: 4px;\n  cursor: pointer;\n  color: #9ca3af;\n  border-radius: 4px;\n  transition: color 0.2s, background-color 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.recur-coupon__remove:hover {\n  color: #6b7280;\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.recur-coupon__remove-icon {\n  width: 14px;\n  height: 14px;\n}\n\n.recur-coupon__spinner {\n  width: 14px;\n  height: 14px;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: recur-spin 0.6s linear infinite;\n}\n\n/* Discount Row */\n.recur-order-summary__row--discount {\n  color: #16a34a;\n}\n\n.recur-order-summary__row--discount .recur-order-summary__value {\n  color: #16a34a;\n  font-weight: 500;\n}\n\n/* ============================================\n * Customer Info Styles\n * ============================================ */\n.recur-info-display {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  padding: 12px;\n  margin-bottom: 8px;\n}\n\n.recur-info-row {\n  margin-bottom: 12px;\n}\n\n.recur-info-row:last-child {\n  margin-bottom: 0;\n}\n\n.recur-info-label {\n  display: block;\n  font-size: 12px;\n  line-height: 16px;\n  color: #718096;\n  margin-bottom: 2px;\n}\n\n.recur-info-value {\n  display: block;\n  font-size: 14px;\n  line-height: 20px;\n  min-height: 20px;\n  color: #2d3748;\n  font-weight: 500;\n  word-break: break-all;\n}\n\n.recur-form-group {\n  margin-bottom: 16px;\n}\n\n.recur-form-label {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  color: #2d3748;\n  margin-bottom: 6px;\n}\n\n.recur-form-input {\n  width: 100%;\n  height: 36px;\n  padding: 0 12px;\n  font-size: 14px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  transition: border-color 0.2s;\n  box-sizing: border-box;\n}\n\n.recur-form-input:focus {\n  border-color: var(--ring, hsl(215 16% 47%));\n  outline: 0;\n  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring, hsl(215 16% 47%)) 50%, transparent);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n.recur-form-input:hover:not(:focus) {\n  border-color: #9ca3af;\n}\n\n/* ============================================\n * Card Fields Styles\n * ============================================ */\n.recur-card-field {\n  margin-bottom: 16px;\n}\n\n.recur-card-field-label {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  color: #2d3748;\n  margin-bottom: 6px;\n}\n\n.recur-payuni-iframe {\n  height: 36px;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  touch-action: manipulation;\n}\n\n.recur-card-row {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  column-gap: 16px;\n  max-width: 100%;\n  box-sizing: border-box;\n}\n\n.recur-card-field-container {\n  position: relative;\n  touch-action: manipulation;\n}\n\n.recur-card-skeleton {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 36px;\n  width: 100%;\n  background: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 50%, #f0f0f0 100%);\n  background-size: 200% 100%;\n  animation: recur-skeleton-loading 1.5s ease-in-out infinite;\n  border-radius: 4px;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.recur-card-skeleton.hidden {\n  display: none;\n}\n\n@keyframes recur-skeleton-loading {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n/* ============================================\n * Submit Button Styles\n * ============================================ */\n.recur-submit-button {\n  width: 100%;\n  padding: 14px 20px;\n  font-size: 16px;\n  font-weight: 500;\n  color: #ffffff;\n  background: #18181b;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  box-sizing: border-box;\n}\n\n.recur-submit-button:hover:not(:disabled) {\n  background: #27272a;\n}\n\n.recur-submit-button:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.recur-submit-button.loading {\n  cursor: wait;\n}\n\n.recur-loading-spinner {\n  width: 16px;\n  height: 16px;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: recur-spin 0.6s linear infinite;\n}\n\n@keyframes recur-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* ============================================\n * Skeleton Loading Styles\n * ============================================ */\n.recur-skeleton {\n  display: inline-block;\n  background: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 50%, #f0f0f0 100%);\n  background-size: 200% 100%;\n  animation: recur-skeleton-loading 1.5s ease-in-out infinite;\n  border-radius: 4px;\n}\n\n/* ============================================\n * Test Mode Banner Styles\n * ============================================ */\n.recur-test-mode-banner {\n  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n  border: 1px solid #f59e0b;\n  border-radius: 8px;\n  margin-bottom: 16px;\n  overflow: hidden;\n}\n\n.recur-test-mode-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 14px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.2s;\n}\n\n.recur-test-mode-header:hover {\n  background: rgba(245, 158, 11, 0.1);\n}\n\n.recur-test-mode-badge {\n  font-size: 13px;\n  font-weight: 600;\n  color: #92400e;\n}\n\n.recur-test-mode-toggle {\n  font-size: 12px;\n  color: #b45309;\n}\n\n.recur-test-cards {\n  background: rgba(255, 255, 255, 0.7);\n  padding: 12px 14px;\n  border-top: 1px solid rgba(245, 158, 11, 0.3);\n}\n\n.recur-test-cards-info {\n  font-size: 12px;\n  color: #78350f;\n  margin: 0 0 10px 0;\n}\n\n.recur-test-card {\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  padding: 10px 12px;\n  margin-bottom: 8px;\n}\n\n.recur-test-card:last-child {\n  margin-bottom: 0;\n}\n\n.recur-test-card-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 4px;\n}\n\n.recur-test-card-number {\n  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;\n  font-size: 14px;\n  font-weight: 600;\n  color: #1f2937;\n  letter-spacing: 0.5px;\n}\n\n.recur-test-card-copy {\n  font-size: 11px;\n  font-weight: 500;\n  color: #3b82f6;\n  background: #eff6ff;\n  border: 1px solid #bfdbfe;\n  border-radius: 4px;\n  padding: 3px 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.recur-test-card-copy:hover {\n  background: #dbeafe;\n  border-color: #93c5fd;\n}\n\n.recur-test-card-copy.copied {\n  background: #dcfce7;\n  border-color: #86efac;\n  color: #16a34a;\n}\n\n.recur-test-card-details {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  font-size: 11px;\n  color: #6b7280;\n}\n\n.recur-test-card-desc {\n  color: #374151;\n  font-weight: 500;\n}\n\n.recur-test-card-meta {\n  color: #9ca3af;\n}\n";
   }
 });
 
@@ -1097,6 +1097,9 @@ var init_payment_form = __esm({
         __publicField(this, "customStyles");
         __publicField(this, "_isInitializing", false);
         __publicField(this, "_initializationAborted", false);
+        __publicField(this, "_paymentSession", null);
+        // Test mode state
+        __publicField(this, "_showTestCardHints", false);
         // Coupon state
         __publicField(this, "_showCouponInput", false);
         __publicField(this, "_couponCode", "");
@@ -1163,6 +1166,8 @@ var init_payment_form = __esm({
       <style>${this.getShadowDOMStyles()}</style>
 
       <div class="payment-form-wrapper">
+        <slot name="test-mode-banner"></slot>
+
         <div class="form-header">
           <h2 class="form-title">訂閱付款</h2>
         </div>
@@ -1199,6 +1204,10 @@ var init_payment_form = __esm({
         ${this.getCustomStyles()}
       </style>
 
+      <div slot="test-mode-banner">
+        ${this.renderTestCardHints()}
+      </div>
+
       <div slot="order-summary">
         ${this.renderOrderSummary()}
       </div>
@@ -1235,6 +1244,63 @@ var init_payment_form = __esm({
         }
       }
       // ============================================
+      // Test Mode Helpers
+      // ============================================
+      isTestMode() {
+        const publishableKey = this.getAttribute("publishable-key") || "";
+        return publishableKey.startsWith("pk_test_");
+      }
+      renderTestCardHints() {
+        if (!this.isTestMode()) {
+          return litHtml.html``;
+        }
+        const testCards = [
+          { number: "4147 6310 0000 0001", desc: "VISA \u6E2C\u8A66\u5361\uFF08\u6388\u6B0A\u6210\u529F\uFF09", expiry: "\u4EFB\u610F\u672A\u4F86\u65E5\u671F", cvc: "\u4EFB\u610F3\u78BC" },
+          { number: "3560 5110 0000 0001", desc: "JCB \u6E2C\u8A66\u5361\uFF08\u6388\u6B0A\u6210\u529F\uFF09", expiry: "\u4EFB\u610F\u672A\u4F86\u65E5\u671F", cvc: "\u4EFB\u610F3\u78BC" },
+          { number: "4147 6310 0000 0002", desc: "VISA \u6E2C\u8A66\u5361\uFF083D\u9A57\u8B49\u5931\u6557\uFF09", expiry: "\u4EFB\u610F\u672A\u4F86\u65E5\u671F", cvc: "\u4EFB\u610F3\u78BC" }
+        ];
+        const copyToClipboard = (text, event) => {
+          const btn = event.currentTarget;
+          navigator.clipboard.writeText(text.replace(/\s/g, "")).then(() => {
+            const originalText = btn.textContent;
+            btn.textContent = "\u5DF2\u8907\u88FD!";
+            btn.classList.add("copied");
+            setTimeout(() => {
+              btn.textContent = originalText;
+              btn.classList.remove("copied");
+            }, 1500);
+          });
+        };
+        return litHtml.html`
+      <div class="recur-test-mode-banner">
+        <div class="recur-test-mode-header" @click=${() => {
+          this._showTestCardHints = !this._showTestCardHints;
+          this.renderLightDOM();
+        }}>
+          <span class="recur-test-mode-badge">🧪 測試模式</span>
+          <span class="recur-test-mode-toggle">${this._showTestCardHints ? "\u6536\u5408 \u25B2" : "\u5C55\u958B\u6E2C\u8A66\u5361\u865F \u25BC"}</span>
+        </div>
+        ${this._showTestCardHints ? litHtml.html`
+          <div class="recur-test-cards">
+            <p class="recur-test-cards-info">使用以下測試卡號進行測試付款：</p>
+            ${testCards.map((card) => litHtml.html`
+              <div class="recur-test-card">
+                <div class="recur-test-card-row">
+                  <span class="recur-test-card-number">${card.number}</span>
+                  <button type="button" class="recur-test-card-copy" @click=${(e) => copyToClipboard(card.number, e)}>複製</button>
+                </div>
+                <div class="recur-test-card-details">
+                  <span class="recur-test-card-desc">${card.desc}</span>
+                  <span class="recur-test-card-meta">到期日: ${card.expiry} / CVC: ${card.cvc}</span>
+                </div>
+              </div>
+            `)}
+          </div>
+        ` : litHtml.nothing}
+      </div>
+    `;
+      }
+      // ============================================
       // Section Renderers (lit-html)
       // ============================================
       renderOrderSummary() {
@@ -1648,16 +1714,16 @@ var init_payment_form = __esm({
           }
           this._appliedCoupon = {
             code: data.discount.code,
-            couponName: data.discount.couponName,
-            discountType: data.discount.discountType,
-            discountAmount: data.discount.discountAmount,
+            couponName: data.discount.coupon_name,
+            discountType: data.discount.discount_type,
+            discountAmount: data.discount.discount_amount,
             duration: data.discount.duration,
-            durationMonths: data.discount.durationMonths,
-            bonusTrialDays: data.discount.bonusTrialDays,
-            bonusMonths: data.discount.bonusMonths,
-            productInterval: data.discount.productInterval,
-            productIntervalCount: data.discount.productIntervalCount,
-            productPrice: data.discount.productPrice
+            durationMonths: data.discount.duration_months,
+            bonusTrialDays: data.discount.bonus_trial_days,
+            bonusMonths: data.discount.bonus_months,
+            productInterval: data.discount.product_interval,
+            productIntervalCount: data.discount.product_interval_count,
+            productPrice: data.discount.product_price
           };
           this._showCouponInput = false;
           this._couponCode = "";
@@ -1668,7 +1734,7 @@ var init_payment_form = __esm({
             bubbles: true,
             composed: true
           }));
-        } catch (err) {
+        } catch {
           this._couponError = "\u7DB2\u8DEF\u932F\u8AA4\uFF0C\u8ACB\u7A0D\u5F8C\u518D\u8A66";
           this._couponLoading = false;
           this.updateCouponSectionDOM();
@@ -1702,7 +1768,7 @@ var init_payment_form = __esm({
             bubbles: true,
             composed: true
           }));
-        } catch (err) {
+        } catch {
           this._couponError = "\u7DB2\u8DEF\u932F\u8AA4\uFF0C\u8ACB\u7A0D\u5F8C\u518D\u8A66";
           this._couponLoading = false;
           this.updateCouponSectionDOM();
@@ -1861,7 +1927,8 @@ var init_payment_form = __esm({
           try {
             await paymentSession.start();
           } catch (startError) {
-            const is1008Error = startError?.message?.includes("1008") || startError?.message?.includes("timeout") || startError?.code === 1008;
+            const errorObj = startError;
+            const is1008Error = errorObj?.message?.includes("1008") || errorObj?.message?.includes("timeout") || errorObj?.code === 1008;
             if (is1008Error && this._initializationAborted) {
               console.log("[PaymentForm] Caught 1008 timeout error after component disconnect - ignoring");
               this._isInitializing = false;
@@ -1881,7 +1948,8 @@ var init_payment_form = __esm({
               return;
             }
             console.log("[PaymentForm] PAYUNi update:", data);
-            const allFieldsComplete = data.status && data.status.CardNo === true && data.status.CardExp === true && data.status.CardCvc === true;
+            const updateData = data;
+            const allFieldsComplete = updateData.status && updateData.status.CardNo === true && updateData.status.CardExp === true && updateData.status.CardCvc === true;
             const submitBtn = document.getElementById(`${this.containerId}-submit-btn`);
             if (submitBtn) {
               submitBtn.disabled = !allFieldsComplete;
@@ -2107,7 +2175,7 @@ var init_checkout_button = __esm({
             this._isLoading = false;
             this.render();
             this.setupEventListeners();
-            this.dispatchError(error.message || "Failed to create checkout session");
+            this.dispatchError(error instanceof Error ? error.message : "Failed to create checkout session");
           }
         });
         this.attachShadow({ mode: "open" });
@@ -2555,7 +2623,7 @@ var init_portal_button = __esm({
           this._isLoading = false;
           this.render();
           this.setupEventListeners();
-          this.dispatchError(error.message || "Failed to create portal session");
+          this.dispatchError(error instanceof Error ? error.message : "Failed to create portal session");
         }
       }
       dispatchError(message) {
@@ -2674,7 +2742,7 @@ function toCamelCase(obj) {
 
 // package.json
 var package_default = {
-  version: "0.11.0"};
+  version: "0.13.0"};
 var SDK_VERSION = package_default.version;
 var SDK_TYPE = "react";
 var RecurContext = React.createContext(null);
@@ -2700,7 +2768,7 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
       checkoutMode: "embedded",
       ...initialConfig
     });
-  }, [initialConfig.checkoutMode, initialConfig.publishableKey, initialConfig.containerElementId]);
+  }, [initialConfig]);
   React__default.default.useEffect(() => {
     setIsCheckingOut(false);
   }, [config.checkoutMode]);
@@ -2988,14 +3056,14 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
         }
         console.log("[Recur SDK] Step 1: Creating checkout session...");
         const checkoutRequestBody = {
-          customerName: options.customerName,
-          customerEmail: options.customerEmail
+          customer_name: options.customerName,
+          customer_email: options.customerEmail
         };
-        if (productId) checkoutRequestBody.productId = productId;
-        if (productSlug) checkoutRequestBody.productSlug = productSlug;
-        if (options.externalCustomerId) checkoutRequestBody.externalCustomerId = options.externalCustomerId;
-        if (options.successUrl) checkoutRequestBody.successUrl = options.successUrl;
-        if (options.cancelUrl) checkoutRequestBody.cancelUrl = options.cancelUrl;
+        if (productId) checkoutRequestBody.product_id = productId;
+        if (productSlug) checkoutRequestBody.product_slug = productSlug;
+        if (options.externalCustomerId) checkoutRequestBody.external_customer_id = options.externalCustomerId;
+        if (options.successUrl) checkoutRequestBody.success_url = options.successUrl;
+        if (options.cancelUrl) checkoutRequestBody.cancel_url = options.cancelUrl;
         const checkoutResponse = await fetch(`${baseUrl}/v1/checkouts`, {
           method: "POST",
           headers,
@@ -3198,9 +3266,10 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
                 paymentForm.resetButton?.();
                 return;
               } else {
+                const failureMessage = failureError.details && !Array.isArray(failureError.details) ? failureError.details.failure_message : void 0;
                 paymentForm.showError?.({
                   title: "\u4ED8\u6B3E\u5931\u6557",
-                  message: failureError.details?.failure_message || failureError.message
+                  message: failureMessage || failureError.message
                 });
                 paymentForm.resetButton?.();
                 return;
@@ -3327,7 +3396,8 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
                       }
                     }
                   } catch (pollError) {
-                    if (pollError.message === "3D \u9A57\u8B49\u5DF2\u53D6\u6D88" || pollError.message === "\u4ED8\u6B3E\u5931\u6557\u6216\u5DF2\u53D6\u6D88") {
+                    const errorMessage = pollError instanceof Error ? pollError.message : String(pollError);
+                    if (errorMessage === "3D \u9A57\u8B49\u5DF2\u53D6\u6D88" || errorMessage === "\u4ED8\u6B3E\u5931\u6557\u6216\u5DF2\u53D6\u6D88") {
                       throw pollError;
                     }
                     console.error("[Recur SDK] Poll error:", pollError);
@@ -3389,7 +3459,7 @@ function RecurProvider({ children, config: initialConfig = {}, customer: custome
                   currentPeriodEnd: paymentResult.subscription.currentPeriodEnd
                 });
               } else {
-                const chargeId = paymentResult.charge?.id || paymentResult.paymentIntent?.id;
+                const chargeId = paymentResult.charge?.id || paymentResult.paymentIntent?.id || checkoutResult.checkout.id;
                 const chargeStatus = paymentResult.charge?.status || "SUCCEEDED";
                 options.onPaymentComplete({
                   id: chargeId,
@@ -3610,28 +3680,65 @@ function useCustomer() {
     throw new Error("useCustomer must be used within a RecurProvider");
   }
   const { customer, subscription, entitlements, isLoading: isLoading2, error, refetch } = context;
-  const check = React.useCallback(
-    (options) => {
+  const resolveProduct = (target) => {
+    if (typeof target === "string") {
+      return target;
+    }
+    if ("product" in target) {
+      return target.product;
+    }
+    if ("feature" in target) {
+      throw new Error("Feature-based checks are not yet supported. Coming in Phase 2.");
+    }
+    if ("benefit" in target) {
+      throw new Error("Benefit-based checks are not yet supported. Coming in Phase 2.");
+    }
+    throw new Error("Invalid check target");
+  };
+  const checkSync = React.useCallback(
+    (target) => {
+      const product = resolveProduct(target);
       if (!customer) {
         return { allowed: false, reason: "no_customer" };
       }
       if (entitlements.length === 0) {
-        return { allowed: false, reason: "no_subscription" };
+        return { allowed: false, reason: "no_entitlement" };
       }
-      const entitlement = entitlements.find(
-        (e) => e.product === options.product || e.productId === options.product
+      const matchedEntitlement = entitlements.find(
+        (e) => e.product === product || e.productId === product
       );
-      if (!entitlement) {
-        return { allowed: false, reason: "wrong_product" };
+      if (!matchedEntitlement) {
+        return { allowed: false, reason: "not_found" };
       }
       let matchingSubscription;
-      if (subscription && (subscription.product.slug === options.product || subscription.product.id === options.product)) {
+      if (subscription && (subscription.product.slug === product || subscription.product.id === product)) {
         matchingSubscription = subscription;
       }
-      return { allowed: true, subscription: matchingSubscription };
+      return {
+        allowed: true,
+        entitlement: matchedEntitlement,
+        // Backward compatibility
+        subscription: matchingSubscription
+      };
     },
     [customer, entitlements, subscription]
   );
+  const checkLive = React.useCallback(
+    async (target) => {
+      await refetch();
+      return checkSync(target);
+    },
+    [refetch, checkSync]
+  );
+  const check = React.useCallback(
+    (target, options) => {
+      if (options?.live) {
+        return checkLive(target);
+      }
+      return checkSync(target);
+    },
+    [checkSync, checkLive]
+  );
   return {
     customer,
     subscription,