recur-tw 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -1,78 +1,601 @@
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
 // src/context.tsx
-var RecurContext = react.createContext(null);
+
+// src/payuni-loader.ts
+var PAYUNI_SDK_URL = "https://vendor.payuni.com.tw/sdk/uni-payment.js";
+var PAYUNI_SANDBOX_SDK_URL = "https://sandbox-vendor.payuni.com.tw/sdk/uni-payment.js";
+var isLoaded = false;
+var isLoading = false;
+var loadPromise = null;
+function createMockUniPayment() {
+  return {
+    createSession: (token, options) => {
+      console.log("[Mock PAYUNi SDK] Creating session with token:", token.substring(0, 20) + "...");
+      console.log("[Mock PAYUNi SDK] Options:", options);
+      const { elements } = options;
+      const cardNoEl = document.getElementById(elements.CardNo);
+      const cardExpEl = document.getElementById(elements.CardExp);
+      const cardCvcEl = document.getElementById(elements.CardCvc);
+      if (cardNoEl) {
+        cardNoEl.innerHTML = '<div style="border: 1px solid #e5e7eb; padding: 8px; border-radius: 4px; background: white; font-size: 14px; color: #6b7280;">4242 4242 4242 4242 (Mock)</div>';
+      }
+      if (cardExpEl) {
+        cardExpEl.innerHTML = '<div style="border: 1px solid #e5e7eb; padding: 8px; border-radius: 4px; background: white; font-size: 14px; color: #6b7280;">12 / 25 (Mock)</div>';
+      }
+      if (cardCvcEl) {
+        cardCvcEl.innerHTML = '<div style="border: 1px solid #e5e7eb; padding: 8px; border-radius: 4px; background: white; font-size: 14px; color: #6b7280;">123 (Mock)</div>';
+      }
+      return {
+        start: async () => {
+          console.log("[Mock PAYUNi SDK] \u2713 Started successfully");
+          await new Promise((resolve) => setTimeout(resolve, 500));
+        },
+        getTradeResult: async () => {
+          console.log("[Mock PAYUNi SDK] \u2713 Getting trade result");
+          await new Promise((resolve) => setTimeout(resolve, 800));
+          return {
+            Status: "SUCCESS",
+            Message: "Mock payment successful",
+            TradeNo: `MOCK${Date.now()}`,
+            AuthCode: "123456"
+          };
+        }
+      };
+    }
+  };
+}
+async function loadPayUniSDK(isSandbox = false, mockMode = false) {
+  if (mockMode) {
+    console.log("[Recur SDK] \u{1F3AD} Mock mode enabled - using mock PAYUNi SDK");
+    if (typeof window !== "undefined") {
+      window.UniPayment = createMockUniPayment();
+    }
+    isLoaded = true;
+    return Promise.resolve();
+  }
+  if (isLoaded && window.UniPayment) {
+    return Promise.resolve();
+  }
+  if (isLoading && loadPromise) {
+    return loadPromise;
+  }
+  isLoading = true;
+  loadPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = isSandbox ? PAYUNI_SANDBOX_SDK_URL : PAYUNI_SDK_URL;
+    script.async = true;
+    script.onload = () => {
+      isLoaded = true;
+      isLoading = false;
+      resolve();
+    };
+    script.onerror = () => {
+      isLoading = false;
+      loadPromise = null;
+      reject(new Error("Failed to load PAYUNi SDK"));
+    };
+    document.head.appendChild(script);
+  });
+  return loadPromise;
+}
+var RecurContext = React.createContext(null);
 function RecurProvider({ children, config: initialConfig = {} }) {
-  const [config, setConfig] = react.useState({
-    redirectMode: "redirect",
+  const [config, setConfig] = React.useState({
+    checkoutMode: "embedded",
     ...initialConfig
   });
-  const [isCheckingOut, setIsCheckingOut] = react.useState(false);
-  const updateConfig = react.useCallback((newConfig) => {
+  const [isCheckingOut, setIsCheckingOut] = React.useState(false);
+  React__default.default.useEffect(() => {
+    setConfig({
+      checkoutMode: "embedded",
+      ...initialConfig
+    });
+  }, [initialConfig.checkoutMode, initialConfig.publishableKey, initialConfig.containerElementId]);
+  React__default.default.useEffect(() => {
+    setIsCheckingOut(false);
+  }, [config.checkoutMode]);
+  const updateConfig = React.useCallback((newConfig) => {
     setConfig((prev) => ({ ...prev, ...newConfig }));
   }, []);
-  const checkout = react.useCallback(
+  const checkout = React.useCallback(
     async (options) => {
+      let modalOverlay = null;
       try {
+        console.log("[Recur SDK] Starting checkout flow...", {
+          planId: options.planId,
+          checkoutMode: config.checkoutMode,
+          containerElementId: config.containerElementId
+        });
         setIsCheckingOut(true);
         if (!options.planId) {
           throw new Error("planId is required");
         }
-        const organizationId = options.organizationId || config.organizationId;
-        if (!organizationId) {
-          throw new Error("organizationId is required. Provide it in RecurProvider config or checkout options.");
+        if (!config.publishableKey) {
+          throw new Error("publishableKey is required");
+        }
+        if (!options.customerEmail || !options.customerName) {
+          throw new Error("customerEmail and customerName are required");
         }
         const baseUrl = config.baseUrl || (typeof window !== "undefined" ? window.location.origin : "");
-        const response = await fetch(`${baseUrl}/api/subscriptions`, {
+        console.log("[Recur SDK] Base URL:", baseUrl);
+        const headers = {
+          "Content-Type": "application/json",
+          "X-Recur-Publishable-Key": config.publishableKey
+        };
+        let modalContent = null;
+        let loadingContainer = null;
+        let embeddedContainer = null;
+        if (config.checkoutMode === "modal") {
+          console.log("[Recur SDK] Mode is modal, creating modal with loading state...");
+          modalOverlay = document.createElement("div");
+          modalOverlay.id = "recur-modal-overlay";
+          modalOverlay.className = "recur-sdk__modal-overlay";
+          modalOverlay.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 9999;
+          `;
+          modalContent = document.createElement("div");
+          modalContent.className = "recur-sdk__modal-content";
+          modalContent.style.cssText = `
+            background: white;
+            padding: 32px;
+            border-radius: 12px;
+            max-width: 500px;
+            width: 90%;
+            max-height: 90vh;
+            overflow-y: auto;
+            position: relative;
+          `;
+          const closeButton = document.createElement("button");
+          closeButton.className = "recur-sdk__close-button";
+          closeButton.innerHTML = "\u2715";
+          closeButton.style.cssText = `
+            position: absolute;
+            top: 16px;
+            right: 16px;
+            background: none;
+            border: none;
+            font-size: 24px;
+            cursor: pointer;
+            color: #666;
+            padding: 0;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          `;
+          closeButton.onclick = () => {
+            modalOverlay?.remove();
+            setIsCheckingOut(false);
+            options.onPaymentCancel?.();
+          };
+          const title = document.createElement("h2");
+          title.className = "recur-sdk__title";
+          title.textContent = "\u8A02\u95B1\u4ED8\u6B3E";
+          title.style.cssText = "margin: 0 0 24px 0; font-size: 24px; font-weight: 600;";
+          loadingContainer = document.createElement("div");
+          loadingContainer.id = "recur-modal-loading";
+          loadingContainer.className = "recur-sdk__loading-container";
+          loadingContainer.style.cssText = "text-align: center; padding: 40px 0;";
+          loadingContainer.innerHTML = `
+            <style>
+              @keyframes recur-sdk-spin {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+              }
+              .recur-sdk__spinner {
+                border: 3px solid #e5e7eb;
+                border-top: 3px solid #3b82f6;
+                border-radius: 50%;
+                width: 40px;
+                height: 40px;
+                animation: recur-sdk-spin 1s linear infinite;
+                margin: 0 auto 16px;
+              }
+              .recur-sdk__loading-text {
+                color: #6b7280;
+                font-size: 14px;
+                margin: 0;
+              }
+            </style>
+            <div class="recur-sdk__spinner"></div>
+            <p class="recur-sdk__loading-text">\u6B63\u5728\u8655\u7406\u8A02\u95B1...</p>
+          `;
+          modalContent.appendChild(closeButton);
+          modalContent.appendChild(title);
+          modalContent.appendChild(loadingContainer);
+          modalOverlay.appendChild(modalContent);
+          document.body.appendChild(modalOverlay);
+          console.log("[Recur SDK] Modal created with loading state");
+        } else if (config.checkoutMode === "embedded") {
+          console.log("[Recur SDK] Mode is embedded, checking for container...");
+          if (!config.containerElementId) {
+            console.warn("[Recur SDK] No containerElementId provided for embedded mode");
+          } else {
+            embeddedContainer = document.getElementById(config.containerElementId);
+            if (!embeddedContainer) {
+              console.log("[Recur SDK] Container not found, polling for container...");
+              for (let i = 0; i < 10; i++) {
+                await new Promise((resolve) => setTimeout(resolve, 50));
+                embeddedContainer = document.getElementById(config.containerElementId);
+                if (embeddedContainer) {
+                  console.log("[Recur SDK] Container found after polling");
+                  break;
+                }
+              }
+            }
+            if (embeddedContainer) {
+              console.log("[Recur SDK] Container found, showing loading state...");
+              loadingContainer = document.createElement("div");
+              loadingContainer.id = "recur-embedded-loading";
+              loadingContainer.className = "recur-sdk__loading-container";
+              loadingContainer.style.cssText = "text-align: center; padding: 40px 0;";
+              loadingContainer.innerHTML = `
+                <style>
+                  @keyframes recur-sdk-spin {
+                    0% { transform: rotate(0deg); }
+                    100% { transform: rotate(360deg); }
+                  }
+                  .recur-sdk__spinner {
+                    border: 3px solid #e5e7eb;
+                    border-top: 3px solid #3b82f6;
+                    border-radius: 50%;
+                    width: 40px;
+                    height: 40px;
+                    animation: recur-sdk-spin 1s linear infinite;
+                    margin: 0 auto 16px;
+                  }
+                  .recur-sdk__loading-text {
+                    color: #6b7280;
+                    font-size: 14px;
+                    margin: 0;
+                  }
+                </style>
+                <div class="recur-sdk__spinner"></div>
+                <p class="recur-sdk__loading-text">\u6B63\u5728\u8655\u7406\u8A02\u95B1...</p>
+              `;
+              embeddedContainer.appendChild(loadingContainer);
+            } else {
+              console.log("[Recur SDK] Container not found after polling, will continue without early loading state");
+            }
+          }
+        }
+        console.log("[Recur SDK] Step 1: Creating subscription...");
+        const subscriptionResponse = await fetch(`${baseUrl}/api/v1/subscriptions`, {
           method: "POST",
-          headers: {
-            "Content-Type": "application/json"
-          },
+          headers,
           body: JSON.stringify({
-            organizationId,
             planId: options.planId,
             customerName: options.customerName,
             customerEmail: options.customerEmail,
             customerPhone: options.customerPhone
           })
         });
-        if (!response.ok) {
-          const errorData = await response.json().catch(() => ({}));
-          const error = {
-            code: errorData.error || "CHECKOUT_FAILED",
-            message: errorData.message || "Failed to initiate checkout",
-            details: errorData
-          };
-          options.onError?.(error);
-          throw new Error(error.message);
-        }
-        const result = await response.json();
-        options.onSuccess?.(result);
-        if (config.redirectMode === "popup") {
-          const popup = window.open(
-            result.paymentUrl,
-            "recurCheckout",
-            "width=600,height=700,scrollbars=yes,resizable=yes"
-          );
-          if (!popup) {
-            throw new Error("Failed to open popup. Please allow popups for this site.");
+        if (!subscriptionResponse.ok) {
+          const errorData = await subscriptionResponse.json().catch(() => ({}));
+          console.error("[Recur SDK] Failed to create subscription:", errorData);
+          const errorMessage = errorData.details || errorData.error || "Failed to create subscription";
+          throw new Error(errorMessage);
+        }
+        const subscriptionResult = await subscriptionResponse.json();
+        console.log("[Recur SDK] Subscription created successfully:", subscriptionResult);
+        options.onSuccess?.(subscriptionResult);
+        console.log("[Recur SDK] Step 2: Getting SDK token...");
+        const tokenResponse = await fetch(`${baseUrl}/api/v1/subscriptions/sdk-token`, {
+          method: "POST",
+          headers,
+          body: JSON.stringify({
+            subscriberId: subscriptionResult.subscriber.id,
+            iframeDomain: window.location.origin
+          })
+        });
+        if (!tokenResponse.ok) {
+          const errorData = await tokenResponse.json().catch(() => ({}));
+          console.error("[Recur SDK] Failed to get SDK token:", errorData);
+          throw new Error("Failed to get SDK token");
+        }
+        const tokenResult = await tokenResponse.json();
+        console.log("[Recur SDK] SDK token received:", {
+          environment: tokenResult.environment,
+          creditToken: tokenResult.creditToken,
+          tokenExpired: tokenResult.tokenExpired
+        });
+        console.log("[Recur SDK] Step 3: Loading PAYUNi SDK...");
+        const isSandbox = tokenResult.environment === "SANDBOX";
+        await loadPayUniSDK(isSandbox, config.mockMode);
+        console.log("[Recur SDK] PAYUNi SDK loaded successfully");
+        if (!window.UniPayment) {
+          console.error("[Recur SDK] window.UniPayment is not available after loading");
+          throw new Error("PAYUNi SDK failed to load");
+        }
+        console.log("[Recur SDK] Step 4: Preparing container for checkout mode:", config.checkoutMode);
+        console.log("[Recur SDK] Initial containerElementId from config:", config.containerElementId);
+        let containerElementId = config.containerElementId;
+        if (config.checkoutMode === "modal") {
+          console.log("[Recur SDK] Mode is modal, updating modal with payment form...");
+          if (!loadingContainer || !modalContent) {
+            throw new Error("Modal components not initialized");
           }
-          const pollInterval = setInterval(() => {
-            if (popup.closed) {
-              clearInterval(pollInterval);
-              setIsCheckingOut(false);
-              if (options.onPaymentComplete) {
-                options.onPaymentComplete(result.subscription);
-              }
+          loadingContainer.remove();
+          const formContainer = document.createElement("div");
+          containerElementId = "recur-modal-payment-container";
+          formContainer.id = containerElementId;
+          modalContent.appendChild(formContainer);
+          console.log("[Recur SDK] Modal updated with container ID:", containerElementId);
+        } else if (config.checkoutMode === "embedded") {
+          console.log("[Recur SDK] Mode is embedded, preparing container...");
+          if (!containerElementId) {
+            throw new Error("containerElementId is required for embedded mode");
+          }
+          if (loadingContainer && embeddedContainer) {
+            console.log("[Recur SDK] Removing loading spinner from embedded container");
+            loadingContainer.remove();
+          }
+        }
+        console.log("[Recur SDK] Step 5: Initializing PAYUNi form...");
+        console.log("[Recur SDK] Available UniPayment methods:", Object.keys(window.UniPayment || {}));
+        if (!containerElementId) {
+          throw new Error("containerElementId is required");
+        }
+        const uniPayment = window.UniPayment.createSession(tokenResult.sdkToken, {
+          env: tokenResult.environment === "SANDBOX" ? "S" : "P",
+          elements: {
+            CardNo: `${containerElementId}-card-no`,
+            CardExp: `${containerElementId}-card-exp`,
+            CardCvc: `${containerElementId}-card-cvc`
+          }
+        });
+        console.log("[Recur SDK] PAYUNi form initialized");
+        console.log("[Recur SDK] Step 6: Waiting for container element...");
+        let container = document.getElementById(containerElementId);
+        if (!container && config.checkoutMode === "embedded") {
+          console.log("[Recur SDK] Container not found, waiting for React to render...");
+          for (let i = 0; i < 20; i++) {
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            container = document.getElementById(containerElementId);
+            if (container) {
+              console.log("[Recur SDK] Container found after waiting");
+              break;
             }
-          }, 500);
-        } else {
-          window.location.href = result.paymentUrl;
+          }
+        }
+        if (!container) {
+          throw new Error(`Container element '${containerElementId}' not found`);
         }
+        console.log("[Recur SDK] Creating loading skeleton...");
+        container.innerHTML = `
+          <style>
+            /* Recur SDK Styles - CSS Namespace with BEM */
+
+            /* Animations */
+            @keyframes recur-sdk-pulse {
+              0%, 100% { opacity: 1; }
+              50% { opacity: 0.5; }
+            }
+
+            /* Skeleton Loading State */
+            .recur-sdk__skeleton {
+              animation: recur-sdk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+              background-color: #e5e7eb;
+              border-radius: 6px;
+            }
+
+            /* Form States */
+            .recur-sdk__form--hidden {
+              display: none;
+            }
+
+            /* Form Layout */
+            .recur-sdk__form-field {
+              margin-bottom: 16px;
+            }
+
+            .recur-sdk__form-row {
+              display: grid;
+              grid-template-columns: 1fr 1fr;
+              gap: 16px;
+              margin-bottom: 16px;
+            }
+
+            /* Labels and Text */
+            .recur-sdk__label {
+              display: block;
+              margin-bottom: 8px;
+              font-weight: 500;
+              color: #374151;
+            }
+
+            .recur-sdk__hint-text {
+              margin-top: 4px;
+              font-size: 12px;
+              color: #6b7280;
+            }
+
+            /* Input Container (for PAYUNi iframes) */
+            .recur-sdk__input-container {
+              /* Container styles applied via ID selectors below for PAYUNi compatibility */
+            }
+
+            /* Button */
+            .recur-sdk__button {
+              width: 100%;
+              padding: 12px;
+              background: #3b82f6;
+              color: white;
+              border: none;
+              border-radius: 6px;
+              font-weight: 600;
+              cursor: pointer;
+              transition: background-color 0.15s ease-in-out;
+            }
+
+            .recur-sdk__button:hover {
+              background: #2563eb;
+            }
+
+            .recur-sdk__button:disabled {
+              opacity: 0.6;
+              cursor: not-allowed;
+            }
+
+            /* PAYUNi SDK \u81EA\u8A02\u6A23\u5F0F - \u8207 shadcn input focus \u6A23\u5F0F\u4E00\u81F4 */
+            /* Note: .form-input-focus is applied by PAYUNi SDK, not by our code */
+            .form-input-focus {
+              border-color: hsl(215 16% 47%) !important;
+              outline: 0 !important;
+              box-shadow: 0 0 0 3px hsl(215 16% 47% / 0.5) !important;
+              transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
+            }
+
+            /* \u78BA\u4FDD PAYUNi iframe \u5BB9\u5668\u9AD8\u5EA6\u4E00\u81F4 */
+            /* Note: These IDs are required by PAYUNi SDK and cannot be changed */
+            #${containerElementId}-card-no,
+            #${containerElementId}-card-exp,
+            #${containerElementId}-card-cvc {
+              height: 36px !important;
+            }
+          </style>
+
+          <!-- Skeleton Loading State -->
+          <div id="${containerElementId}-skeleton" class="recur-sdk__skeleton-container">
+            <div class="recur-sdk__form-field">
+              <label class="recur-sdk__label">\u5361\u865F</label>
+              <div class="recur-sdk__skeleton" style="height: 36px;"></div>
+              <p class="recur-sdk__hint-text">\u8ACB\u8F38\u5165\u60A8\u7684 16 \u4F4D\u6578\u5361\u865F</p>
+            </div>
+            <div class="recur-sdk__form-row">
+              <div class="recur-sdk__form-field">
+                <label class="recur-sdk__label">\u6709\u6548\u671F\u9650</label>
+                <div class="recur-sdk__skeleton" style="height: 36px;"></div>
+              </div>
+              <div class="recur-sdk__form-field">
+                <label class="recur-sdk__label">\u5B89\u5168\u78BC</label>
+                <div class="recur-sdk__skeleton" style="height: 36px;"></div>
+              </div>
+            </div>
+            <!-- Show button during loading to prevent layout shift -->
+            <button class="recur-sdk__button" disabled>
+              \u8F09\u5165\u4E2D...
+            </button>
+          </div>
+
+          <!-- Actual Payment Form (hidden initially) -->
+          <div id="${containerElementId}-form" class="recur-sdk__form recur-sdk__form--hidden">
+            <div class="recur-sdk__form-field">
+              <label class="recur-sdk__label">\u5361\u865F</label>
+              <div id="${containerElementId}-card-no" class="recur-sdk__input-container"></div>
+              <p class="recur-sdk__hint-text">\u8ACB\u8F38\u5165\u60A8\u7684 16 \u4F4D\u6578\u5361\u865F</p>
+            </div>
+            <div class="recur-sdk__form-row">
+              <div class="recur-sdk__form-field">
+                <label class="recur-sdk__label">\u6709\u6548\u671F\u9650</label>
+                <div id="${containerElementId}-card-exp" class="recur-sdk__input-container"></div>
+              </div>
+              <div class="recur-sdk__form-field">
+                <label class="recur-sdk__label">\u5B89\u5168\u78BC</label>
+                <div id="${containerElementId}-card-cvc" class="recur-sdk__input-container"></div>
+              </div>
+            </div>
+            <button id="${containerElementId}-submit-btn" class="recur-sdk__button">
+              \u78BA\u8A8D\u4ED8\u6B3E
+            </button>
+          </div>
+        `;
+        console.log("[Recur SDK] Starting PAYUNi SDK...");
+        await uniPayment.start();
+        console.log("[Recur SDK] PAYUNi SDK started successfully");
+        console.log("[Recur SDK] Showing actual form...");
+        const skeleton = document.getElementById(`${containerElementId}-skeleton`);
+        const form = document.getElementById(`${containerElementId}-form`);
+        if (skeleton && form) {
+          skeleton.style.display = "none";
+          form.classList.remove("recur-sdk__form--hidden");
+        }
+        console.log("[Recur SDK] Step 7: Setting up submit button handler...");
+        const submitBtn = document.getElementById(`${containerElementId}-submit-btn`);
+        if (!submitBtn) {
+          throw new Error("Submit button not found");
+        }
+        submitBtn.addEventListener("click", async () => {
+          console.log("[Recur SDK] Submit button clicked");
+          submitBtn.setAttribute("disabled", "true");
+          submitBtn.textContent = "\u8655\u7406\u4E2D...";
+          try {
+            console.log("[Recur SDK] Getting trade result from PAYUNi...");
+            const tradeResult = await uniPayment.getTradeResult();
+            console.log("[Recur SDK] Trade result received:", tradeResult);
+            console.log("[Recur SDK] Step 8: Completing subscription...");
+            const completeResponse = await fetch(
+              `${baseUrl}/api/v1/subscriptions/${subscriptionResult.subscription.id}/complete`,
+              {
+                method: "POST",
+                headers,
+                body: JSON.stringify({
+                  sdkToken: tokenResult.sdkToken,
+                  timestamp: tokenResult.timestamp,
+                  creditToken: tokenResult.creditToken
+                })
+              }
+            );
+            if (!completeResponse.ok) {
+              const errorData = await completeResponse.json().catch(() => ({}));
+              console.error("[Recur SDK] Failed to complete subscription:", errorData);
+              throw new Error("Failed to complete subscription");
+            }
+            const completeResult = await completeResponse.json();
+            console.log("[Recur SDK] Subscription completed successfully:", completeResult);
+            console.log("[Recur SDK] Calling onPaymentComplete callback...");
+            if (options.onPaymentComplete) {
+              options.onPaymentComplete({
+                id: completeResult.subscription.id,
+                status: completeResult.subscription.status,
+                planId: subscriptionResult.subscription.planId,
+                amount: subscriptionResult.subscription.amount,
+                billingPeriod: subscriptionResult.subscription.billingPeriod,
+                currentPeriodStart: (/* @__PURE__ */ new Date()).toISOString(),
+                currentPeriodEnd: (/* @__PURE__ */ new Date()).toISOString()
+              });
+            }
+            console.log("[Recur SDK] Checkout flow completed successfully!");
+            if (modalOverlay) {
+              modalOverlay.remove();
+            }
+            setIsCheckingOut(false);
+          } catch (error) {
+            console.error("[Recur SDK] Error in payment flow:", error);
+            const checkoutError = {
+              code: "PAYMENT_FAILED",
+              message: error instanceof Error ? error.message : "Payment failed"
+            };
+            options.onError?.(checkoutError);
+            submitBtn.removeAttribute("disabled");
+            submitBtn.textContent = "\u78BA\u8A8D\u4ED8\u6B3E";
+            setIsCheckingOut(false);
+          }
+        });
+        console.log("[Recur SDK] Checkout flow initialized, waiting for user input...");
       } catch (error) {
+        console.error("[Recur SDK] Checkout error:", error);
+        if (modalOverlay) {
+          modalOverlay.remove();
+        }
         const checkoutError = {
           code: "CHECKOUT_ERROR",
           message: error instanceof Error ? error.message : "An unknown error occurred"
@@ -84,19 +607,41 @@ function RecurProvider({ children, config: initialConfig = {} }) {
     },
     [config]
   );
-  const value = react.useMemo(
+  const fetchPlans = React.useCallback(
+    async () => {
+      if (!config.publishableKey) {
+        throw new Error("publishableKey is required");
+      }
+      const baseUrl = config.baseUrl || (typeof window !== "undefined" ? window.location.origin : "");
+      const response = await fetch(`${baseUrl}/api/v1/plans`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Recur-Publishable-Key": config.publishableKey
+        }
+      });
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || "Failed to fetch plans");
+      }
+      return await response.json();
+    },
+    [config]
+  );
+  const value = React.useMemo(
     () => ({
       config,
       checkout,
+      fetchPlans,
       isCheckingOut,
       updateConfig
     }),
-    [config, checkout, isCheckingOut, updateConfig]
+    [config, checkout, fetchPlans, isCheckingOut, updateConfig]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(RecurContext.Provider, { value, children });
 }
 function useRecur() {
-  const context = react.useContext(RecurContext);
+  const context = React.useContext(RecurContext);
   if (!context) {
     throw new Error("useRecur must be used within a RecurProvider");
   }