@klingis/sdk 0.0.0 → 0.2.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styles.ts","../src/overlay.ts","../src/kling.ts"],"sourcesContent":["/**\n * Checkout overlay styles\n * Injected into Shadow DOM to avoid conflicts with host page\n */\n\nexport const overlayStyles = `\n  * {\n    box-sizing: border-box;\n  }\n\n  .kling-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 2147483647;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  }\n\n  .kling-backdrop {\n    position: absolute;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.5);\n    backdrop-filter: blur(4px);\n    animation: kling-fade-in 0.2s ease-out;\n  }\n\n  .kling-modal-wrapper {\n    position: relative;\n    margin: 16px;\n    animation: kling-slide-up 0.3s ease-out;\n  }\n\n  .kling-modal {\n    position: relative;\n    width: min(400px, calc(100vw - 32px));\n    min-height: 300px;\n    max-height: 90vh;\n    background: white;\n    border-radius: 16px;\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n    overflow: hidden;\n  }\n\n  .kling-modal-wrapper-mobile {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: 0;\n    animation: kling-slide-up-mobile 0.3s ease-out;\n  }\n\n  .kling-modal-wrapper-mobile .kling-modal {\n    width: 100%;\n    max-width: 100%;\n    max-height: 95vh;\n    border-radius: 16px 16px 0 0;\n  }\n\n  .kling-modal-wrapper-mobile .kling-close-button {\n    top: -40px;\n    right: 12px;\n  }\n\n  .kling-close-button {\n    position: absolute;\n    top: -12px;\n    right: -12px;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: rgba(255, 255, 255, 0.9);\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s;\n    z-index: 10;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  }\n\n  .kling-close-button:hover {\n    background: rgba(255, 255, 255, 1);\n  }\n\n  .kling-close-button svg {\n    width: 16px;\n    height: 16px;\n    color: #374151;\n  }\n\n  .kling-iframe {\n    width: 100%;\n    height: 0;\n    border: none;\n    display: block;\n    opacity: 0;\n    transition: opacity 0.15s ease-out, height 0.2s ease-out;\n  }\n\n  .kling-iframe.loaded {\n    opacity: 1;\n    max-height: calc(90vh - 32px);\n  }\n\n  .kling-modal-mobile .kling-iframe {\n    height: calc(95vh - 32px);\n    max-height: calc(95vh - 32px);\n  }\n\n  .kling-loading {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 300px;\n    max-height: 400px;\n    gap: 16px;\n  }\n\n  .kling-spinner {\n    width: 32px;\n    height: 32px;\n    border: 3px solid #e2e8f0;\n    border-top-color: #6366f1;\n    border-radius: 50%;\n    animation: kling-spin 0.8s linear infinite;\n  }\n\n  .kling-loading-text {\n    color: #64748b;\n    font-size: 14px;\n  }\n\n  @keyframes kling-fade-in {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  @keyframes kling-slide-up {\n    from {\n      opacity: 0;\n      transform: translateY(20px) scale(0.98);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes kling-slide-up-mobile {\n    from {\n      transform: translateY(100%);\n    }\n    to {\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes kling-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  /* Success state */\n  .kling-success {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px 32px;\n    text-align: center;\n  }\n\n  .kling-success-icon {\n    width: 64px;\n    height: 64px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 24px;\n    animation: kling-success-pop 0.4s ease-out;\n  }\n\n  .kling-success-icon svg {\n    width: 32px;\n    height: 32px;\n    color: white;\n  }\n\n  .kling-success-title {\n    font-size: 24px;\n    font-weight: 700;\n    color: #0f172a;\n    margin: 0 0 8px 0;\n  }\n\n  .kling-success-amount {\n    font-size: 18px;\n    font-weight: 600;\n    color: #10b981;\n    margin: 0 0 8px 0;\n  }\n\n  .kling-success-message {\n    font-size: 14px;\n    color: #64748b;\n    margin: 0;\n  }\n\n  .kling-success-button {\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    border: none;\n    padding: 12px 32px;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: transform 0.15s, box-shadow 0.15s;\n  }\n\n  .kling-success-button:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);\n  }\n\n  @keyframes kling-success-pop {\n    0% { transform: scale(0); opacity: 0; }\n    50% { transform: scale(1.1); }\n    100% { transform: scale(1); opacity: 1; }\n  }\n\n  /* Error state */\n  .kling-error {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px 32px;\n    text-align: center;\n  }\n\n  .kling-error-icon {\n    width: 64px;\n    height: 64px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 24px;\n  }\n\n  .kling-error-icon svg {\n    width: 32px;\n    height: 32px;\n    color: white;\n  }\n\n  .kling-error-title {\n    font-size: 24px;\n    font-weight: 700;\n    color: #0f172a;\n    margin: 0 0 8px 0;\n  }\n\n  .kling-error-message {\n    font-size: 14px;\n    color: #64748b;\n    margin: 0 0 32px 0;\n    max-width: 280px;\n  }\n\n  .kling-error-buttons {\n    display: flex;\n    gap: 12px;\n  }\n\n  .kling-error-retry {\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    border: none;\n    padding: 12px 24px;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: transform 0.15s, box-shadow 0.15s;\n  }\n\n  .kling-error-retry:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);\n  }\n\n  .kling-error-cancel {\n    background: transparent;\n    color: #64748b;\n    border: 1px solid #e2e8f0;\n    padding: 12px 24px;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: background 0.15s;\n  }\n\n  .kling-error-cancel:hover {\n    background: #f8fafc;\n  }\n\n  /* Closing animation */\n  .kling-overlay.closing .kling-backdrop {\n    animation: kling-fade-out 0.2s ease-in forwards;\n  }\n\n  .kling-overlay.closing .kling-modal-wrapper {\n    animation: kling-slide-down 0.2s ease-in forwards;\n  }\n\n  .kling-overlay.closing .kling-modal-wrapper-mobile {\n    animation: kling-slide-down-mobile 0.2s ease-in forwards;\n  }\n\n  @keyframes kling-fade-out {\n    to { opacity: 0; }\n  }\n\n  @keyframes kling-slide-down {\n    to {\n      opacity: 0;\n      transform: translateY(20px) scale(0.98);\n    }\n  }\n\n  @keyframes kling-slide-down-mobile {\n    to {\n      transform: translateY(100%);\n    }\n  }\n`;\n\nexport const closeIconSvg = `\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n  </svg>\n`;\n","import { overlayStyles, closeIconSvg } from \"./styles\";\nimport type { CheckoutResult, CheckoutOptions } from \"./types\";\n\nexport interface OverlayOptions {\n  embedUrl: string;\n  onComplete: (result: CheckoutResult) => void;\n  onCancel: () => void;\n  callbacks?: {\n    onSuccess?: CheckoutOptions[\"onSuccess\"];\n    onError?: CheckoutOptions[\"onError\"];\n    onCancel?: CheckoutOptions[\"onCancel\"];\n  };\n}\n\nexport class CheckoutOverlay {\n  private host: HTMLDivElement | null = null;\n  private shadow: ShadowRoot | null = null;\n  private iframe: HTMLIFrameElement | null = null;\n  private messageHandler: ((event: MessageEvent) => void) | null = null;\n  private options: OverlayOptions;\n  private isClosing = false;\n\n  constructor(options: OverlayOptions) {\n    this.options = options;\n  }\n\n  /**\n   * Open the checkout overlay\n   */\n  open(): void {\n    if (this.host) return;\n\n    // Create host element\n    this.host = document.createElement(\"div\");\n    this.host.id = \"kling-checkout-host\";\n    document.body.appendChild(this.host);\n\n    // Attach Shadow DOM\n    this.shadow = this.host.attachShadow({ mode: \"closed\" });\n\n    // Detect mobile\n    const isMobile = window.innerWidth < 640;\n\n    // Build overlay HTML\n    this.shadow.innerHTML = `\n      <style>${overlayStyles}</style>\n      <div class=\"kling-overlay\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Checkout\">\n        <div class=\"kling-backdrop\"></div>\n        <div class=\"kling-modal-wrapper ${isMobile ? \"kling-modal-wrapper-mobile\" : \"\"}\">\n          <button class=\"kling-close-button\" aria-label=\"Close checkout\">\n            ${closeIconSvg}\n          </button>\n          <div class=\"kling-modal\">\n            <div class=\"kling-loading\">\n              <div class=\"kling-spinner\"></div>\n              <div class=\"kling-loading-text\">Loading checkout...</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n\n    // Set up event listeners\n    const backdrop = this.shadow.querySelector(\".kling-backdrop\");\n    const closeButton = this.shadow.querySelector(\".kling-close-button\");\n\n    backdrop?.addEventListener(\"click\", () => this.handleCancel());\n    closeButton?.addEventListener(\"click\", () => this.handleCancel());\n\n    // Handle escape key\n    document.addEventListener(\"keydown\", this.handleKeyDown);\n\n    // Prevent body scroll\n    document.body.style.overflow = \"hidden\";\n\n    // Load iframe after a brief delay (allows animation to start)\n    setTimeout(() => this.loadIframe(), 50);\n\n    // Set up message listener\n    this.messageHandler = this.handleMessage.bind(this);\n    window.addEventListener(\"message\", this.messageHandler);\n  }\n\n  /**\n   * Load the checkout iframe\n   */\n  private loadIframe(): void {\n    if (!this.shadow) return;\n\n    const modal = this.shadow.querySelector(\".kling-modal\");\n    const loading = this.shadow.querySelector(\".kling-loading\");\n    if (!modal || !loading) return;\n\n    // Create iframe\n    this.iframe = document.createElement(\"iframe\");\n    this.iframe.className = \"kling-iframe\";\n    this.iframe.src = this.options.embedUrl;\n    this.iframe.allow = \"payment\";\n    this.iframe.setAttribute(\"loading\", \"eager\");\n\n    // Note: loading spinner is removed when we receive the first resize message\n    // This ensures content is actually ready before showing\n\n    // Insert iframe before loading spinner\n    modal.insertBefore(this.iframe, loading);\n  }\n\n  /**\n   * Handle postMessage from iframe\n   */\n  private handleMessage(event: MessageEvent): void {\n    // Validate origin - should come from our checkout page\n    // In production, validate against known Kling domains\n    const data = event.data;\n\n    if (!data || typeof data !== \"object\" || data.source !== \"kling-checkout\") {\n      return;\n    }\n\n    switch (data.type) {\n      case \"checkout:success\":\n        this.handleSuccess(data.payload);\n        break;\n\n      case \"checkout:error\":\n        this.handleError(data.payload);\n        break;\n\n      case \"checkout:cancel\":\n        this.handleCancel(data.payload?.cancelUrl);\n        break;\n\n      case \"checkout:resize\":\n        this.handleResize(data.payload);\n        break;\n\n      case \"checkout:ready\":\n        this.handleReady();\n        break;\n\n      case \"payment:success\":\n        this.showPaymentSuccess(data.payload);\n        break;\n\n      case \"payment:error\":\n        this.showPaymentError(data.payload);\n        break;\n    }\n  }\n\n  /**\n   * Handle successful payment (legacy checkout:success message)\n   * Routes to the same success screen as payment:success.\n   */\n  private handleSuccess(payload: {\n    paymentIntentId: string;\n    paymentMethodId?: string;\n  }): void {\n    this.showPaymentSuccess(payload);\n  }\n\n  /**\n   * Handle payment error\n   */\n  private handleError(payload: { code: string; message: string }): void {\n    // Fire callback - don't close overlay, let user retry\n    this.options.callbacks?.onError?.(payload);\n  }\n\n  /**\n   * Handle cancel — close overlay and optionally redirect to cancelUrl\n   */\n  private handleCancel(cancelUrl?: string): void {\n    if (this.isClosing) return;\n\n    this.options.callbacks?.onCancel?.();\n    this.options.onCancel();\n    this.close();\n\n    if (cancelUrl) {\n      window.location.href = cancelUrl;\n    }\n  }\n\n  /**\n   * Handle iframe resize request\n   */\n  private handleResize(payload: { height: number }): void {\n    if (this.iframe && payload.height) {\n      this.iframe.style.height = `${Math.min(payload.height, window.innerHeight * 0.9)}px`;\n    }\n  }\n\n  /**\n   * Handle checkout ready signal - show iframe and hide spinner\n   */\n  private handleReady(): void {\n    if (this.iframe && !this.iframe.classList.contains(\"loaded\")) {\n      this.iframe.classList.add(\"loaded\");\n      // Hide loading spinner\n      const loading = this.shadow?.querySelector(\".kling-loading\");\n      loading?.remove();\n    }\n  }\n\n  /**\n   * Show brief success animation, then redirect to successUrl or show \"Done\" button.\n   */\n  private showPaymentSuccess(payload: {\n    paymentIntentId: string;\n    paymentMethodId?: string;\n    amount?: number;\n    currency?: string;\n    successUrl?: string | null;\n  }): void {\n    if (!this.shadow) return;\n\n    const modal = this.shadow.querySelector(\".kling-modal\");\n    if (!modal) return;\n\n    const result: CheckoutResult = {\n      status: \"success\",\n      success: true,\n      paymentIntentId: payload.paymentIntentId,\n      paymentMethodId: payload.paymentMethodId,\n    };\n\n    // Fire success callback immediately\n    this.options.callbacks?.onSuccess?.(payload);\n\n    // Hide iframe and show success state\n    if (this.iframe) {\n      this.iframe.style.display = \"none\";\n    }\n\n    const amountText = payload.amount && payload.currency\n      ? `${payload.amount.toLocaleString()} ${payload.currency}`\n      : \"\";\n\n    const hasRedirect = !!payload.successUrl;\n\n    modal.innerHTML = `\n      <div class=\"kling-success\">\n        <div class=\"kling-success-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>\n            <polyline points=\"22 4 12 14.01 9 11.01\"/>\n          </svg>\n        </div>\n        <h2 class=\"kling-success-title\">Payment Successful</h2>\n        ${amountText ? `<p class=\"kling-success-amount\">${amountText}</p>` : \"\"}\n        ${hasRedirect\n          ? `<p class=\"kling-success-message\">Redirecting...</p>`\n          : `<button class=\"kling-success-button\" type=\"button\">Done</button>`\n        }\n      </div>\n    `;\n\n    if (hasRedirect) {\n      // Brief display then redirect parent page\n      setTimeout(() => {\n        this.close();\n        this.options.onComplete(result);\n        window.location.href = payload.successUrl!;\n      }, 1000);\n    } else {\n      // No redirect — let user close manually\n      const doneButton = modal.querySelector(\".kling-success-button\");\n      doneButton?.addEventListener(\"click\", () => {\n        this.close();\n        this.options.onComplete(result);\n      });\n    }\n  }\n\n  /**\n   * Show payment error UI in the overlay\n   */\n  private showPaymentError(payload: { code: string; message: string }): void {\n    if (!this.shadow) return;\n\n    const modal = this.shadow.querySelector(\".kling-modal\");\n    if (!modal) return;\n\n    // Hide iframe and show error state\n    if (this.iframe) {\n      this.iframe.style.display = \"none\";\n    }\n\n    modal.innerHTML = `\n      <div class=\"kling-error\">\n        <div class=\"kling-error-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n            <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/>\n            <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n          </svg>\n        </div>\n        <h2 class=\"kling-error-title\">Payment Failed</h2>\n        <p class=\"kling-error-message\">${payload.message || \"Something went wrong. Please try again.\"}</p>\n        <div class=\"kling-error-buttons\">\n          <button class=\"kling-error-retry\" type=\"button\">Try Again</button>\n          <button class=\"kling-error-cancel\" type=\"button\">Cancel</button>\n        </div>\n      </div>\n    `;\n\n    // Handle retry button - reload iframe\n    const retryButton = modal.querySelector(\".kling-error-retry\");\n    retryButton?.addEventListener(\"click\", () => {\n      if (this.iframe) {\n        this.iframe.style.display = \"block\";\n        modal.innerHTML = \"\";\n        modal.appendChild(this.iframe);\n        // Add loading spinner\n        const loading = document.createElement(\"div\");\n        loading.className = \"kling-loading\";\n        loading.innerHTML = `\n          <div class=\"kling-spinner\"></div>\n          <div class=\"kling-loading-text\">Loading checkout...</div>\n        `;\n        modal.appendChild(loading);\n        this.iframe.src = this.iframe.src; // Reload\n      }\n    });\n\n    // Handle cancel button\n    const cancelButton = modal.querySelector(\".kling-error-cancel\");\n    cancelButton?.addEventListener(\"click\", () => {\n      this.handleCancel();\n    });\n\n    // Fire error callback\n    this.options.callbacks?.onError?.(payload);\n  }\n\n  /**\n   * Handle escape key\n   */\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === \"Escape\") {\n      this.handleCancel();\n    }\n  };\n\n  /**\n   * Close the overlay with animation\n   */\n  close(): void {\n    if (this.isClosing || !this.shadow) return;\n    this.isClosing = true;\n\n    const overlay = this.shadow.querySelector(\".kling-overlay\");\n    overlay?.classList.add(\"closing\");\n\n    // Wait for animation to complete\n    setTimeout(() => this.destroy(), 200);\n  }\n\n  /**\n   * Clean up and remove overlay\n   */\n  private destroy(): void {\n    // Remove event listeners\n    document.removeEventListener(\"keydown\", this.handleKeyDown);\n    if (this.messageHandler) {\n      window.removeEventListener(\"message\", this.messageHandler);\n    }\n\n    // Remove host element\n    if (this.host) {\n      this.host.remove();\n      this.host = null;\n    }\n\n    // Restore body scroll\n    document.body.style.overflow = \"\";\n\n    this.shadow = null;\n    this.iframe = null;\n  }\n}\n","import { CheckoutOverlay } from \"./overlay\";\nimport type {\n  KlingInitOptions,\n  CheckoutOptions,\n  CheckoutResult,\n  CheckoutController,\n} from \"./types\";\n\nconst DEFAULT_API_URL = \"https://api.kling.is\";\nconst DEFAULT_PAY_URL = \"https://pay.kling.is\";\n\nexport class Kling {\n  private apiUrl: string;\n  private payUrl: string;\n  private locale: \"is\" | \"en\";\n  private currentOverlay: CheckoutOverlay | null = null;\n\n  private constructor(options: KlingInitOptions = {}) {\n    this.apiUrl = options.apiUrl || DEFAULT_API_URL;\n    // Use baseUrl if provided, otherwise derive from apiUrl\n    if (options.baseUrl) {\n      this.payUrl = options.baseUrl.replace(/\\/$/, \"\"); // Remove trailing slash\n    } else if (this.apiUrl.includes(\"localhost\")) {\n      this.payUrl = this.apiUrl.replace(\":3001\", \":3000\");\n    } else {\n      this.payUrl = DEFAULT_PAY_URL;\n    }\n    this.locale = options.locale || this.detectLocale();\n  }\n\n  /**\n   * Initialize the Kling SDK\n   */\n  static init(options: KlingInitOptions = {}): Kling {\n    return new Kling(options);\n  }\n\n  /**\n   * Open checkout overlay\n   */\n  checkout(options: CheckoutOptions): CheckoutController {\n    // Validate options\n    if (!options.sessionId) {\n      throw new Error(\"Kling.checkout() requires a sessionId\");\n    }\n\n    // Close any existing overlay\n    if (this.currentOverlay) {\n      this.currentOverlay.close();\n      this.currentOverlay = null;\n    }\n\n    // Build embed URL\n    const embedUrl = this.buildEmbedUrl(options);\n\n    // Create promise for result\n    let resolvePromise: (result: CheckoutResult) => void;\n    const resultPromise = new Promise<CheckoutResult>((resolve) => {\n      resolvePromise = resolve;\n    });\n\n    // Create overlay\n    const overlay = new CheckoutOverlay({\n      embedUrl,\n      onComplete: (result) => {\n        this.currentOverlay = null;\n        resolvePromise(result);\n      },\n      onCancel: () => {\n        this.currentOverlay = null;\n        resolvePromise({\n          status: \"canceled\",\n          success: false,\n          canceled: true,\n        });\n      },\n      callbacks: {\n        onSuccess: options.onSuccess,\n        onError: options.onError,\n        onCancel: options.onCancel,\n      },\n    });\n\n    this.currentOverlay = overlay;\n    overlay.open();\n\n    // Return controller\n    const controller: CheckoutController = {\n      then: resultPromise.then.bind(resultPromise),\n      catch: resultPromise.catch.bind(resultPromise),\n      finally: resultPromise.finally.bind(resultPromise),\n      close: () => {\n        overlay.close();\n        resolvePromise({\n          status: \"canceled\",\n          success: false,\n          canceled: true,\n        });\n      },\n    };\n\n    return controller;\n  }\n\n  /**\n   * Build the embed URL for the checkout iframe\n   */\n  private buildEmbedUrl(options: CheckoutOptions): string {\n    const params = new URLSearchParams();\n    params.set(\"embed\", \"1\");\n    params.set(\"locale\", this.locale);\n\n    // Pass the current page URL so the checkout can track where it was embedded\n    if (typeof window !== \"undefined\" && window.location?.href) {\n      params.set(\"origin\", window.location.href);\n    }\n\n    return `${this.payUrl}/checkout/${options.sessionId}?${params}`;\n  }\n\n  /**\n   * Detect user's locale from browser\n   */\n  private detectLocale(): \"is\" | \"en\" {\n    if (typeof navigator === \"undefined\") return \"en\";\n    const lang = navigator.language?.toLowerCase() || \"\";\n    return lang.startsWith(\"is\") ? \"is\" : \"en\";\n  }\n\n  /**\n   * Preload checkout assets for faster opening\n   */\n  preload(options: { sessionId: string }): void {\n    // Create a hidden iframe to preload the checkout\n    const embedUrl = this.buildEmbedUrl(options as CheckoutOptions);\n    const link = document.createElement(\"link\");\n    link.rel = \"prefetch\";\n    link.href = embedUrl;\n    document.head.appendChild(link);\n  }\n}\n"],"mappings":"AAKO,IAAMA,EAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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","names":["overlayStyles","closeIconSvg","CheckoutOverlay","options","event","isMobile","overlayStyles","closeIconSvg","backdrop","closeButton","modal","loading","data","payload","cancelUrl","result","amountText","hasRedirect","DEFAULT_API_URL","DEFAULT_PAY_URL","Kling","_Kling","options","embedUrl","resolvePromise","resultPromise","resolve","overlay","CheckoutOverlay","result","params","link"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,cAAc,sBAAsB,CAAC;AAErC,oCAAoC;AACpC,OAAO,EAAE,SAAS,EAAoB,MAAM,cAAc,CAAC"}

package/dist/mutator.d.ts

@@ -0,0 +1,8 @@
+export type FetchConfig = {
+    baseUrl?: string;
+    headers?: Record<string, string>;
+};
+export declare function configure(config: FetchConfig): void;
+export declare function customFetch<T>(url: string, options?: RequestInit): Promise<T>;
+export default customFetch;
+//# sourceMappingURL=mutator.d.ts.map

package/dist/mutator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mutator.d.ts","sourceRoot":"","sources":["../src/mutator.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,CAAC;AAIF,wBAAgB,SAAS,CAAC,MAAM,EAAE,WAAW,QAE5C;AAED,wBAAsB,WAAW,CAAC,CAAC,EACjC,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,WAAW,GACpB,OAAO,CAAC,CAAC,CAAC,CAoBZ;AAED,eAAe,WAAW,CAAC"}

package/dist/mutator.js

@@ -0,0 +1,24 @@
+let globalConfig = {};
+export function configure(config) {
+    globalConfig = { ...globalConfig, ...config };
+}
+export async function customFetch(url, options) {
+    const baseUrl = globalConfig.baseUrl ?? "";
+    // Replace the hardcoded localhost URL with the configured baseUrl
+    const fullUrl = baseUrl ? url.replace(/^https?:\/\/[^/]+/, baseUrl) : url;
+    const response = await fetch(fullUrl, {
+        ...options,
+        headers: {
+            ...globalConfig.headers,
+            ...options?.headers,
+        },
+    });
+    const data = response.status === 204 ? undefined : await response.json();
+    return {
+        data,
+        status: response.status,
+        headers: response.headers,
+    };
+}
+export default customFetch;
+//# sourceMappingURL=mutator.js.map

package/dist/mutator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mutator.js","sourceRoot":"","sources":["../src/mutator.ts"],"names":[],"mappings":"AAKA,IAAI,YAAY,GAAgB,EAAE,CAAC;AAEnC,MAAM,UAAU,SAAS,CAAC,MAAmB;IAC3C,YAAY,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,MAAM,EAAE,CAAC;AAChD,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,WAAW,CAC/B,GAAW,EACX,OAAqB;IAErB,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,CAAC;IAC3C,kEAAkE;IAClE,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAE1E,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,OAAO,EAAE;QACpC,GAAG,OAAO;QACV,OAAO,EAAE;YACP,GAAG,YAAY,CAAC,OAAO;YACvB,GAAG,OAAO,EAAE,OAAO;SACpB;KACF,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;IAEzE,OAAO;QACL,IAAI;QACJ,MAAM,EAAE,QAAQ,CAAC,MAAM;QACvB,OAAO,EAAE,QAAQ,CAAC,OAAO;KACrB,CAAC;AACT,CAAC;AAED,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,25 +1,27 @@
 {
   "name": "@klingis/sdk",
-  "version": "0.0.0",
-  "description": "Kling Embeddable Checkout SDK",
+  "version": "0.2.0",
+  "description": "Kling TypeScript Server SDK — typed API client generated from OpenAPI",
   "license": "MIT",
   "author": "Kling <hello@kling.is>",
   "homepage": "https://kling.is",
   "repository": {
     "type": "git",
     "url": "https://github.com/getjourney-io/kling.git",
-    "directory": "packages/sdk"
+    "directory": "packages/api-spec"
   },
-  "keywords": ["payments", "checkout", "iceland", "sdk", "embed"],
+  "keywords": [
+    "payments",
+    "iceland",
+    "sdk",
+    "api",
+    "openapi"
+  ],
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     }
   },
   "files": [
@@ -29,14 +31,13 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "dev:build": "tsup --watch",
+    "generate": "orval",
+    "build": "bun run generate && tsc",
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "@types/node": "^22.10.7",
-    "tsup": "^8.0.0",
+    "orval": "^7.5.0",
     "typescript": "^5.7.3"
   }
 }

package/README.md

@@ -1,62 +0,0 @@
-# @klingis/sdk
-
-Embeddable checkout SDK for [Kling](https://kling.is) — a payments platform for Iceland.
-
-## Install
-
-```bash
-npm install @klingis/sdk
-```
-
-## Usage
-
-```typescript
-import { Kling } from '@klingis/sdk';
-
-// 1. Initialize
-const kling = Kling.init({ locale: 'is' });
-
-// 2. Open checkout (sessionId comes from your server via the Kling API)
-const result = await kling.checkout({
-  sessionId: 'cs_...',
-  onSuccess: (res) => console.log('Paid!', res.paymentIntentId),
-  onError: (err) => console.log('Failed', err.message),
-  onCancel: () => console.log('Cancelled'),
-});
-```
-
-## Options
-
-### `Kling.init(options)`
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `locale` | `'is' \| 'en'` | auto-detect | Checkout UI language |
-| `baseUrl` | `string` | `https://pay.kling.is` | Override checkout URL (for local dev) |
-| `apiUrl` | `string` | `https://api.kling.is` | Override API URL |
-
-### `kling.checkout(options)`
-
-| Option | Type | Description |
-|--------|------|-------------|
-| `sessionId` | `string` | **Required.** Checkout session ID from the API |
-| `onSuccess` | `(result) => void` | Called on successful payment |
-| `onError` | `(error) => void` | Called on payment failure |
-| `onCancel` | `() => void` | Called when user closes checkout |
-| `showSuccessScreen` | `boolean` | Show success screen after payment (default: `true`) |
-
-### CDN
-
-You can also load the SDK via script tag:
-
-```html
-<script src="https://api.kling.is/v1/kling.js"></script>
-<script>
-  const kling = Kling.init();
-  kling.checkout({ sessionId: 'cs_...' });
-</script>
-```
-
-## License
-
-MIT

package/dist/index.cjs

@@ -1,394 +0,0 @@
-"use strict";var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var k=(s,e)=>{for(var t in e)c(s,t,{get:e[t],enumerable:!0})},f=(s,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of u(e))!m.call(s,n)&&n!==t&&c(s,n,{get:()=>e[n],enumerable:!(i=p(e,n))||i.enumerable});return s};var y=s=>f(c({},"__esModule",{value:!0}),s);var x={};k(x,{Kling:()=>r,default:()=>r});module.exports=y(x);var d=`
-  * {
-    box-sizing: border-box;
-  }
-
-  .kling-overlay {
-    position: fixed;
-    inset: 0;
-    z-index: 2147483647;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  }
-
-  .kling-backdrop {
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(4px);
-    animation: kling-fade-in 0.2s ease-out;
-  }
-
-  .kling-modal-wrapper {
-    position: relative;
-    margin: 16px;
-    animation: kling-slide-up 0.3s ease-out;
-  }
-
-  .kling-modal {
-    position: relative;
-    width: min(400px, calc(100vw - 32px));
-    min-height: 300px;
-    max-height: 90vh;
-    background: white;
-    border-radius: 16px;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    overflow: hidden;
-  }
-
-  .kling-modal-wrapper-mobile {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: 0;
-    animation: kling-slide-up-mobile 0.3s ease-out;
-  }
-
-  .kling-modal-wrapper-mobile .kling-modal {
-    width: 100%;
-    max-width: 100%;
-    max-height: 95vh;
-    border-radius: 16px 16px 0 0;
-  }
-
-  .kling-modal-wrapper-mobile .kling-close-button {
-    top: -40px;
-    right: 12px;
-  }
-
-  .kling-close-button {
-    position: absolute;
-    top: -12px;
-    right: -12px;
-    width: 32px;
-    height: 32px;
-    border: none;
-    background: rgba(255, 255, 255, 0.9);
-    border-radius: 50%;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background 0.15s;
-    z-index: 10;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  }
-
-  .kling-close-button:hover {
-    background: rgba(255, 255, 255, 1);
-  }
-
-  .kling-close-button svg {
-    width: 16px;
-    height: 16px;
-    color: #374151;
-  }
-
-  .kling-iframe {
-    width: 100%;
-    height: 0;
-    border: none;
-    display: block;
-    opacity: 0;
-    transition: opacity 0.15s ease-out, height 0.2s ease-out;
-  }
-
-  .kling-iframe.loaded {
-    opacity: 1;
-    max-height: calc(90vh - 32px);
-  }
-
-  .kling-modal-mobile .kling-iframe {
-    height: calc(95vh - 32px);
-    max-height: calc(95vh - 32px);
-  }
-
-  .kling-loading {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 300px;
-    max-height: 400px;
-    gap: 16px;
-  }
-
-  .kling-spinner {
-    width: 32px;
-    height: 32px;
-    border: 3px solid #e2e8f0;
-    border-top-color: #6366f1;
-    border-radius: 50%;
-    animation: kling-spin 0.8s linear infinite;
-  }
-
-  .kling-loading-text {
-    color: #64748b;
-    font-size: 14px;
-  }
-
-  @keyframes kling-fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  @keyframes kling-slide-up {
-    from {
-      opacity: 0;
-      transform: translateY(20px) scale(0.98);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
-  @keyframes kling-slide-up-mobile {
-    from {
-      transform: translateY(100%);
-    }
-    to {
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes kling-spin {
-    to { transform: rotate(360deg); }
-  }
-
-  /* Success state */
-  .kling-success {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 48px 32px;
-    text-align: center;
-  }
-
-  .kling-success-icon {
-    width: 64px;
-    height: 64px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 24px;
-    animation: kling-success-pop 0.4s ease-out;
-  }
-
-  .kling-success-icon svg {
-    width: 32px;
-    height: 32px;
-    color: white;
-  }
-
-  .kling-success-title {
-    font-size: 24px;
-    font-weight: 700;
-    color: #0f172a;
-    margin: 0 0 8px 0;
-  }
-
-  .kling-success-amount {
-    font-size: 18px;
-    font-weight: 600;
-    color: #10b981;
-    margin: 0 0 8px 0;
-  }
-
-  .kling-success-message {
-    font-size: 14px;
-    color: #64748b;
-    margin: 0;
-  }
-
-  .kling-success-button {
-    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
-    color: white;
-    border: none;
-    padding: 12px 32px;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: transform 0.15s, box-shadow 0.15s;
-  }
-
-  .kling-success-button:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
-  }
-
-  @keyframes kling-success-pop {
-    0% { transform: scale(0); opacity: 0; }
-    50% { transform: scale(1.1); }
-    100% { transform: scale(1); opacity: 1; }
-  }
-
-  /* Error state */
-  .kling-error {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 48px 32px;
-    text-align: center;
-  }
-
-  .kling-error-icon {
-    width: 64px;
-    height: 64px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 24px;
-  }
-
-  .kling-error-icon svg {
-    width: 32px;
-    height: 32px;
-    color: white;
-  }
-
-  .kling-error-title {
-    font-size: 24px;
-    font-weight: 700;
-    color: #0f172a;
-    margin: 0 0 8px 0;
-  }
-
-  .kling-error-message {
-    font-size: 14px;
-    color: #64748b;
-    margin: 0 0 32px 0;
-    max-width: 280px;
-  }
-
-  .kling-error-buttons {
-    display: flex;
-    gap: 12px;
-  }
-
-  .kling-error-retry {
-    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
-    color: white;
-    border: none;
-    padding: 12px 24px;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: transform 0.15s, box-shadow 0.15s;
-  }
-
-  .kling-error-retry:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
-  }
-
-  .kling-error-cancel {
-    background: transparent;
-    color: #64748b;
-    border: 1px solid #e2e8f0;
-    padding: 12px 24px;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background 0.15s;
-  }
-
-  .kling-error-cancel:hover {
-    background: #f8fafc;
-  }
-
-  /* Closing animation */
-  .kling-overlay.closing .kling-backdrop {
-    animation: kling-fade-out 0.2s ease-in forwards;
-  }
-
-  .kling-overlay.closing .kling-modal-wrapper {
-    animation: kling-slide-down 0.2s ease-in forwards;
-  }
-
-  .kling-overlay.closing .kling-modal-wrapper-mobile {
-    animation: kling-slide-down-mobile 0.2s ease-in forwards;
-  }
-
-  @keyframes kling-fade-out {
-    to { opacity: 0; }
-  }
-
-  @keyframes kling-slide-down {
-    to {
-      opacity: 0;
-      transform: translateY(20px) scale(0.98);
-    }
-  }
-
-  @keyframes kling-slide-down-mobile {
-    to {
-      transform: translateY(100%);
-    }
-  }
-`,h=`
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <line x1="18" y1="6" x2="6" y2="18"></line>
-    <line x1="6" y1="6" x2="18" y2="18"></line>
-  </svg>
-`;var a=class{constructor(e){this.host=null;this.shadow=null;this.iframe=null;this.messageHandler=null;this.isClosing=!1;this.handleKeyDown=e=>{e.key==="Escape"&&this.handleCancel()};this.options=e}open(){if(this.host)return;this.host=document.createElement("div"),this.host.id="kling-checkout-host",document.body.appendChild(this.host),this.shadow=this.host.attachShadow({mode:"closed"});let e=window.innerWidth<640;this.shadow.innerHTML=`
-      <style>${d}</style>
-      <div class="kling-overlay" role="dialog" aria-modal="true" aria-label="Checkout">
-        <div class="kling-backdrop"></div>
-        <div class="kling-modal-wrapper ${e?"kling-modal-wrapper-mobile":""}">
-          <button class="kling-close-button" aria-label="Close checkout">
-            ${h}
-          </button>
-          <div class="kling-modal">
-            <div class="kling-loading">
-              <div class="kling-spinner"></div>
-              <div class="kling-loading-text">Loading checkout...</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;let t=this.shadow.querySelector(".kling-backdrop"),i=this.shadow.querySelector(".kling-close-button");t?.addEventListener("click",()=>this.handleCancel()),i?.addEventListener("click",()=>this.handleCancel()),document.addEventListener("keydown",this.handleKeyDown),document.body.style.overflow="hidden",setTimeout(()=>this.loadIframe(),50),this.messageHandler=this.handleMessage.bind(this),window.addEventListener("message",this.messageHandler)}loadIframe(){if(!this.shadow)return;let e=this.shadow.querySelector(".kling-modal"),t=this.shadow.querySelector(".kling-loading");!e||!t||(this.iframe=document.createElement("iframe"),this.iframe.className="kling-iframe",this.iframe.src=this.options.embedUrl,this.iframe.allow="payment",this.iframe.setAttribute("loading","eager"),e.insertBefore(this.iframe,t))}handleMessage(e){let t=e.data;if(!(!t||typeof t!="object"||t.source!=="kling-checkout"))switch(t.type){case"checkout:success":this.handleSuccess(t.payload);break;case"checkout:error":this.handleError(t.payload);break;case"checkout:cancel":this.handleCancel(t.payload?.cancelUrl);break;case"checkout:resize":this.handleResize(t.payload);break;case"checkout:ready":this.handleReady();break;case"payment:success":this.showPaymentSuccess(t.payload);break;case"payment:error":this.showPaymentError(t.payload);break}}handleSuccess(e){this.showPaymentSuccess(e)}handleError(e){this.options.callbacks?.onError?.(e)}handleCancel(e){this.isClosing||(this.options.callbacks?.onCancel?.(),this.options.onCancel(),this.close(),e&&(window.location.href=e))}handleResize(e){this.iframe&&e.height&&(this.iframe.style.height=`${Math.min(e.height,window.innerHeight*.9)}px`)}handleReady(){this.iframe&&!this.iframe.classList.contains("loaded")&&(this.iframe.classList.add("loaded"),this.shadow?.querySelector(".kling-loading")?.remove())}showPaymentSuccess(e){if(!this.shadow)return;let t=this.shadow.querySelector(".kling-modal");if(!t)return;let i={status:"success",success:!0,paymentIntentId:e.paymentIntentId,paymentMethodId:e.paymentMethodId};this.options.callbacks?.onSuccess?.(e),this.iframe&&(this.iframe.style.display="none");let n=e.amount&&e.currency?`${e.amount.toLocaleString()} ${e.currency}`:"",o=!!e.successUrl;t.innerHTML=`
-      <div class="kling-success">
-        <div class="kling-success-icon">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
-            <polyline points="22 4 12 14.01 9 11.01"/>
-          </svg>
-        </div>
-        <h2 class="kling-success-title">Payment Successful</h2>
-        ${n?`<p class="kling-success-amount">${n}</p>`:""}
-        ${o?'<p class="kling-success-message">Redirecting...</p>':'<button class="kling-success-button" type="button">Done</button>'}
-      </div>
-    `,o?setTimeout(()=>{this.close(),this.options.onComplete(i),window.location.href=e.successUrl},1e3):t.querySelector(".kling-success-button")?.addEventListener("click",()=>{this.close(),this.options.onComplete(i)})}showPaymentError(e){if(!this.shadow)return;let t=this.shadow.querySelector(".kling-modal");if(!t)return;this.iframe&&(this.iframe.style.display="none"),t.innerHTML=`
-      <div class="kling-error">
-        <div class="kling-error-icon">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="10"/>
-            <line x1="15" y1="9" x2="9" y2="15"/>
-            <line x1="9" y1="9" x2="15" y2="15"/>
-          </svg>
-        </div>
-        <h2 class="kling-error-title">Payment Failed</h2>
-        <p class="kling-error-message">${e.message||"Something went wrong. Please try again."}</p>
-        <div class="kling-error-buttons">
-          <button class="kling-error-retry" type="button">Try Again</button>
-          <button class="kling-error-cancel" type="button">Cancel</button>
-        </div>
-      </div>
-    `,t.querySelector(".kling-error-retry")?.addEventListener("click",()=>{if(this.iframe){this.iframe.style.display="block",t.innerHTML="",t.appendChild(this.iframe);let o=document.createElement("div");o.className="kling-loading",o.innerHTML=`
-          <div class="kling-spinner"></div>
-          <div class="kling-loading-text">Loading checkout...</div>
-        `,t.appendChild(o),this.iframe.src=this.iframe.src}}),t.querySelector(".kling-error-cancel")?.addEventListener("click",()=>{this.handleCancel()}),this.options.callbacks?.onError?.(e)}close(){if(this.isClosing||!this.shadow)return;this.isClosing=!0,this.shadow.querySelector(".kling-overlay")?.classList.add("closing"),setTimeout(()=>this.destroy(),200)}destroy(){document.removeEventListener("keydown",this.handleKeyDown),this.messageHandler&&window.removeEventListener("message",this.messageHandler),this.host&&(this.host.remove(),this.host=null),document.body.style.overflow="",this.shadow=null,this.iframe=null}};var v="https://api.kling.is",b="https://pay.kling.is",r=class s{constructor(e={}){this.currentOverlay=null;this.apiUrl=e.apiUrl||v,e.baseUrl?this.payUrl=e.baseUrl.replace(/\/$/,""):this.apiUrl.includes("localhost")?this.payUrl=this.apiUrl.replace(":3001",":3000"):this.payUrl=b,this.locale=e.locale||this.detectLocale()}static init(e={}){return new s(e)}checkout(e){if(!e.sessionId)throw new Error("Kling.checkout() requires a sessionId");this.currentOverlay&&(this.currentOverlay.close(),this.currentOverlay=null);let t=this.buildEmbedUrl(e),i,n=new Promise(l=>{i=l}),o=new a({embedUrl:t,onComplete:l=>{this.currentOverlay=null,i(l)},onCancel:()=>{this.currentOverlay=null,i({status:"canceled",success:!1,canceled:!0})},callbacks:{onSuccess:e.onSuccess,onError:e.onError,onCancel:e.onCancel}});return this.currentOverlay=o,o.open(),{then:n.then.bind(n),catch:n.catch.bind(n),finally:n.finally.bind(n),close:()=>{o.close(),i({status:"canceled",success:!1,canceled:!0})}}}buildEmbedUrl(e){let t=new URLSearchParams;return t.set("embed","1"),t.set("locale",this.locale),typeof window<"u"&&window.location?.href&&t.set("origin",window.location.href),`${this.payUrl}/checkout/${e.sessionId}?${t}`}detectLocale(){return typeof navigator>"u"?"en":(navigator.language?.toLowerCase()||"").startsWith("is")?"is":"en"}preload(e){let t=this.buildEmbedUrl(e),i=document.createElement("link");i.rel="prefetch",i.href=t,document.head.appendChild(i)}};0&&(module.exports={Kling});
-//# sourceMappingURL=index.cjs.map