@inflow_pay/sdk 0.1.0 → 0.3.0

package/dist/payment-sdk-DK3VOIGL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-sdk-DK3VOIGL.mjs","sources":["../src/sdk.ts","../src/card-element.ts","../src/payment-sdk.ts"],"sourcesContent":["/**\n * InflowPay SDK v2 - Iframe-based Payment SDK\n * \n * This SDK creates an iframe and communicates with a React payment application\n * using postMessage API for secure cross-origin communication.\n */\n\nimport type { SDKConfig, IframeMessage } from './types';\n\nexport class SDK {\n  private iframe: HTMLIFrameElement | null = null;\n  private iframeUrl: string;\n  private config: SDKConfig;\n  private messageListener: ((event: MessageEvent) => void) | null = null;\n  private containerElement: HTMLElement | null = null;\n  private usePopup: boolean;\n  private environment: 'sandbox' | 'production' | 'development' | 'preprod';\n\n  constructor(config: SDKConfig) {\n    this.config = config;\n    this.iframeUrl = config.iframeUrl || 'http://localhost:3000/iframe/checkout';\n    this.environment = this.getEnvironmentFromApiKey(config.apiKey || '');\n\n    // Determine if we should use popup or inline\n    this.usePopup = !config.container;\n\n    // Resolve container if provided\n    if (config.container) {\n      if (typeof config.container === 'string') {\n        this.containerElement = document.querySelector(config.container);\n        if (!this.containerElement) {\n          throw new Error(`Container not found: ${config.container}`);\n        }\n      } else {\n        this.containerElement = config.container;\n      }\n    }\n  }\n\n  /**\n   * Initialize and open the payment iframe\n   */\n  init(): void {\n    if (this.iframe) {\n      return;\n    }\n\n    this.createIframe();\n    this.addMessageListener();\n  }\n\n  /**\n   * Create and append the iframe to the document\n   */\n  private createIframe(): void {\n    // Build iframe URL with API key and paymentId as query parameters\n    const url = new URL(this.iframeUrl);\n    if (this.config.apiKey) {\n      url.searchParams.set('apiKey', this.config.apiKey);\n    }\n    if (this.config.config?.paymentId) {\n      url.searchParams.set('paymentId', this.config.config.paymentId);\n    }\n    const iframeSrc = url.toString();\n\n    if (this.usePopup) {\n      // Create overlay for popup mode\n      const overlay = document.createElement('div');\n      overlay.id = 'inflowpay-sdk-overlay';\n      overlay.style.cssText = `\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: rgba(0, 0, 0, 0.5);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 999999;\n      `;\n\n      // Create iframe container\n      const container = document.createElement('div');\n      container.style.cssText = `\n        position: relative;\n        width: 90%;\n        max-width: 500px;\n        height: 90%;\n        max-height: 600px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n      `;\n\n      // Create close button\n      const closeButton = document.createElement('button');\n      closeButton.innerHTML = '×';\n      closeButton.style.cssText = `\n        position: absolute;\n        top: 10px;\n        right: 10px;\n        width: 30px;\n        height: 30px;\n        border: none;\n        background: transparent;\n        font-size: 24px;\n        cursor: pointer;\n        z-index: 1000000;\n        color: #333;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      `;\n      closeButton.onclick = () => this.close();\n\n      // Create iframe\n      this.iframe = document.createElement('iframe');\n      this.iframe.src = iframeSrc;\n      this.iframe.style.cssText = `\n        width: 100%;\n        height: 100%;\n        border: none;\n        border-radius: 8px;\n      `;\n      this.iframe.setAttribute('allow', 'payment');\n\n      // Assemble structure\n      container.appendChild(closeButton);\n      container.appendChild(this.iframe);\n      overlay.appendChild(container);\n      document.body.appendChild(overlay);\n\n      // Show loader\n      this.showLoader(container);\n\n      // Close on overlay click (but not on container click)\n      overlay.addEventListener('click', (e) => {\n        if (e.target === overlay) {\n          this.close();\n        }\n      });\n    } else {\n      // Inline mode - mount directly in container\n      if (!this.containerElement) {\n        throw new Error('Container element is required for inline mode');\n      }\n\n      // Clear container\n      this.containerElement.innerHTML = '';\n\n      // Set container styles for seamless integration\n      if (this.containerElement instanceof HTMLElement) {\n        const currentStyle = this.containerElement.getAttribute('style') || '';\n        if (!currentStyle.includes('min-height')) {\n          this.containerElement.style.minHeight = '196px';\n        }\n        if (!currentStyle.includes('position')) {\n          this.containerElement.style.position = 'relative';\n        }\n        if (!currentStyle.includes('overflow')) {\n          this.containerElement.style.overflow = 'hidden';\n        }\n      }\n\n      // Create iframe\n      this.iframe = document.createElement('iframe');\n      this.iframe.src = iframeSrc;\n\n      const iframeWidth = this.config.config?.style?.fillParent ? '100%' : '344px';\n      const iframeMaxWidth = this.config.config?.style?.fillParent ? 'none' : '100%';\n\n      this.iframe.style.cssText = `\n        width: ${iframeWidth};\n        max-width: ${iframeMaxWidth};\n        height: 196px;\n        min-height: 196px;\n        border: none;\n        display: block;\n        transition: height 0.2s ease;\n      `;\n\n      this.iframe.setAttribute('allow', 'payment');\n\n      // Append to container\n      this.containerElement.appendChild(this.iframe);\n\n      // Show loader\n      this.showLoader(this.containerElement);\n    }\n  }\n\n  /**\n   * Add message listener for communication with iframe\n   */\n  private addMessageListener(): void {\n    this.messageListener = (event: MessageEvent) => {\n      const allowedOrigin = new URL(this.iframeUrl).origin;\n      const isExactMatch = event.origin === allowedOrigin;\n\n      let isAllowedOrigin = isExactMatch;\n\n      if (!isAllowedOrigin) {\n        if (this.environment === 'sandbox' || this.environment === 'development') {\n          const isLocalhostDev =\n            (event.origin.includes('localhost') || event.origin.includes('127.0.0.1')) &&\n            (allowedOrigin.includes('localhost') || allowedOrigin.includes('127.0.0.1'));\n          isAllowedOrigin = isLocalhostDev;\n        }\n\n        if (!isAllowedOrigin) {\n          const isAllowedApiOrigin =\n            event.origin === 'https://dev.api.inflowpay.com' ||\n            event.origin === 'https://pre-prod.api.inflowpay.xyz' ||\n            event.origin === 'https://api.inflowpay.xyz';\n          isAllowedOrigin = isAllowedApiOrigin;\n        }\n      }\n\n      if (!isAllowedOrigin) {\n        if (this.config.debug) {\n          console.warn('[SDK] Rejected message from unauthorized origin:', event.origin);\n        }\n        return;\n      }\n\n      const data = event.data as IframeMessage;\n\n      if (!data || !data.type) {\n        return;\n      }\n\n      switch (data.type) {\n        case 'iframe-ready':\n          // Wait for iframe's javascript to be ready before sending config\n          this.hideLoader();\n          this.sendConfigToIframe();\n          break;\n\n        case 'content-height':\n          // Adjust iframe height based on content\n          if (data.height && this.iframe) {\n            const height = Math.max(data.height, 196); // Minimum 196px\n            this.iframe.style.height = `${height}px`;\n            if (this.containerElement) {\n              this.containerElement.style.minHeight = `${height}px`;\n            }\n          }\n          break;\n\n        case 'close':\n          this.close();\n          break;\n\n        case 'success':\n          if (this.config.onSuccess) {\n            this.config.onSuccess(data.data);\n          }\n          break;\n\n        case 'error':\n          if (this.config.onError) {\n            this.config.onError(data.data);\n          }\n          break;\n\n        case '3ds-required':\n          // Iframe requests SDK to open 3DS popup\n          if (this.config.debug) {\n            console.log('[SDK] Received 3DS request:', data.threeDsSessionUrl);\n          }\n          if (data.threeDsSessionUrl) {\n            if (this.config.debug) {\n              console.log('[SDK] Opening 3DS modal...');\n            }\n            this.open3DSModal(data.threeDsSessionUrl).then((success) => {\n              if (this.config.debug) {\n                console.log('[SDK] 3DS modal closed, result:', success);\n              }\n              if (this.iframe && this.iframe.contentWindow) {\n                const targetOrigin = this.getTargetOrigin();\n                this.iframe.contentWindow.postMessage({\n                  type: '3ds-result',\n                  success: success,\n                  paymentId: data.paymentId || this.config.config?.paymentId,\n                }, targetOrigin);\n              }\n            });\n          } else {\n            if (this.config.debug) {\n              console.error('[SDK] 3DS required but no threeDsSessionUrl provided');\n            }\n          }\n          break;\n\n        default:\n          if (this.config.debug) {\n            console.log('SDK: Received message:', data);\n          }\n      }\n    };\n\n    window.addEventListener('message', this.messageListener);\n  }\n\n  /**\n   * Send configuration to the iframe\n   */\n  private sendConfigToIframe(): void {\n    if (!this.iframe || !this.iframe.contentWindow) {\n      // Wait for iframe to load\n      if (this.iframe) {\n        this.iframe.onload = () => {\n          this.sendConfigToIframe();\n        };\n      }\n      return;\n    }\n\n    const message: IframeMessage = {\n      type: 'sdkData',\n      config: {\n        ...(this.config.config || {}),\n        paymentId: this.config.config?.paymentId\n      },\n      data: {\n        apiKey: this.config.apiKey,\n      },\n    };\n\n    const targetOrigin = this.getTargetOrigin();\n    this.iframe.contentWindow.postMessage(message, targetOrigin);\n  }\n\n  /**\n   * Show skeleton loader while iframe is connecting\n   */\n  private showLoader(container: HTMLElement): void {\n    // Hide iframe while loader is showing\n    if (this.iframe) {\n      this.iframe.style.display = 'none';\n    }\n    \n    // Detect dark mode\n    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;\n    \n    // Color scheme based on dark mode\n    const inputBgColor = isDarkMode ? '#2d2d2d' : '#F5F5F5';\n    const shimmerBase = isDarkMode ? '#3d3d3d' : '#E5E5E5';\n    const shimmerLight = isDarkMode ? '#4d4d4d' : '#F0F0F0';\n    const shimmerGradient = `linear-gradient(90deg, ${shimmerBase} 25%, ${shimmerLight} 50%, ${shimmerBase} 75%)`;\n    \n    const loader = document.createElement('div');\n    loader.id = 'inflowpay-loader';\n    \n    // Get container width to match SDK structure\n    const containerWidth = this.config.config?.style?.fillParent ? '100%' : '344px';\n    \n    loader.style.cssText = `\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 1000;\n      padding: 20px;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n    `;\n\n    // Skeleton card element container (matching .inflowpay-card-element)\n    const skeletonCard = document.createElement('div');\n    skeletonCard.style.cssText = `\n      width: ${containerWidth};\n      max-width: 100%;\n      margin: 0 auto;\n      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n    `;\n\n    // Input container skeleton (matching .inflowpay-card-inp-wrap)\n    const inputWrap = document.createElement('div');\n    inputWrap.style.cssText = `\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 6px;\n      background-color: ${inputBgColor};\n      padding: 8px;\n      border-radius: 8px;\n      margin-bottom: 20px;\n    `;\n\n    // Card number skeleton (flex: 1)\n    const cardNumberSkeleton = document.createElement('div');\n    cardNumberSkeleton.className = 'inflowpay-skeleton';\n    cardNumberSkeleton.style.cssText = `\n      flex: 1;\n      min-width: 0;\n      height: 32px;\n      border-radius: 6px;\n      background: ${shimmerGradient};\n      background-size: 200% 100%;\n      animation: inflowpay-shimmer 1.5s infinite;\n    `;\n\n    // Expiry skeleton (21.5% width)\n    const expirySkeleton = document.createElement('div');\n    expirySkeleton.className = 'inflowpay-skeleton';\n    expirySkeleton.style.cssText = `\n      width: 21.5%;\n      flex-shrink: 0;\n      height: 32px;\n      border-radius: 6px;\n      background: ${shimmerGradient};\n      background-size: 200% 100%;\n      animation: inflowpay-shimmer 1.5s infinite;\n    `;\n\n    // CVC skeleton (17.5% width)\n    const cvcSkeleton = document.createElement('div');\n    cvcSkeleton.className = 'inflowpay-skeleton';\n    cvcSkeleton.style.cssText = `\n      width: 17.5%;\n      flex-shrink: 0;\n      height: 32px;\n      border-radius: 6px;\n      background: ${shimmerGradient};\n      background-size: 200% 100%;\n      animation: inflowpay-shimmer 1.5s infinite;\n    `;\n\n    inputWrap.appendChild(cardNumberSkeleton);\n    inputWrap.appendChild(expirySkeleton);\n    inputWrap.appendChild(cvcSkeleton);\n\n    // Button skeleton (matching .inflowpay-button)\n    const buttonSkeleton = document.createElement('div');\n    buttonSkeleton.className = 'inflowpay-skeleton';\n    buttonSkeleton.style.cssText = `\n      width: 100%;\n      height: 42px;\n      border-radius: 8px;\n      background: ${shimmerGradient};\n      background-size: 200% 100%;\n      animation: inflowpay-shimmer 1.5s infinite;\n      margin-bottom: 16px;\n    `;\n\n    // Disclaimer skeleton (matching .inflowpay-disclaimer)\n    const disclaimerSkeleton = document.createElement('div');\n    disclaimerSkeleton.style.cssText = `\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 4px;\n      width: 100%;\n      margin-top: 16px;\n    `;\n\n    const disclaimerIconSkeleton = document.createElement('div');\n    disclaimerIconSkeleton.className = 'inflowpay-skeleton';\n    disclaimerIconSkeleton.style.cssText = `\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: ${shimmerGradient};\n      background-size: 200% 100%;\n      animation: inflowpay-shimmer 1.5s infinite;\n    `;\n\n    const disclaimerTextSkeleton = document.createElement('div');\n    disclaimerTextSkeleton.className = 'inflowpay-skeleton';\n    disclaimerTextSkeleton.style.cssText = `\n      width: 80%;\n      height: 16px;\n      border-radius: 4px;\n      background: ${shimmerGradient};\n      background-size: 200% 100%;\n      animation: inflowpay-shimmer 1.5s infinite;\n    `;\n\n    disclaimerSkeleton.appendChild(disclaimerIconSkeleton);\n    disclaimerSkeleton.appendChild(disclaimerTextSkeleton);\n\n    skeletonCard.appendChild(inputWrap);\n    skeletonCard.appendChild(buttonSkeleton);\n    skeletonCard.appendChild(disclaimerSkeleton);\n    loader.appendChild(skeletonCard);\n\n    // Add shimmer animation keyframes\n    if (!document.getElementById('inflowpay-loader-styles')) {\n      const style = document.createElement('style');\n      style.id = 'inflowpay-loader-styles';\n      style.textContent = `\n        @keyframes inflowpay-shimmer {\n          0% {\n            background-position: -200% 0;\n          }\n          100% {\n            background-position: 200% 0;\n          }\n        }\n      `;\n      document.head.appendChild(style);\n    }\n\n    container.appendChild(loader);\n  }\n\n  /**\n   * Hide loader\n   */\n  private hideLoader(): void {\n    const loader = document.getElementById('inflowpay-loader');\n    if (loader) {\n      loader.remove();\n    }\n    \n    // Show iframe again when loader is hidden\n    if (this.iframe) {\n      this.iframe.style.display = '';\n    }\n  }\n\n  /**\n   * Close the iframe and cleanup\n   */\n  private close(): void {\n    if (this.config.onClose) {\n      this.config.onClose();\n    }\n\n    // Hide loader\n    this.hideLoader();\n\n    // Remove message listener\n    if (this.messageListener) {\n      window.removeEventListener('message', this.messageListener);\n      this.messageListener = null;\n    }\n\n    if (this.usePopup) {\n      // Remove overlay\n      const overlay = document.getElementById('inflowpay-sdk-overlay');\n      if (overlay) {\n        overlay.remove();\n      }\n    } else {\n      // Clear container\n      if (this.containerElement) {\n        this.containerElement.innerHTML = '';\n      }\n    }\n\n    this.iframe = null;\n  }\n\n  /**\n   * Open 3DS authentication modal\n   * Called when iframe requests 3DS authentication\n   */\n  private open3DSModal(challengeUrl: string): Promise<boolean> {\n    if (this.config.debug) {\n      console.log('[SDK] open3DSModal called with URL:', challengeUrl);\n    }\n    return new Promise((resolve) => {\n      // Create overlay\n      const overlay = document.createElement('div');\n      overlay.id = 'inflowpay-3ds-overlay';\n      overlay.style.cssText = `\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: rgba(0, 0, 0, 0.7);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 999999;\n      `;\n\n      // Create modal\n      const modal = document.createElement('div');\n      modal.style.cssText = `\n        position: relative;\n        width: 90%;\n        max-width: 500px;\n        height: 90%;\n        max-height: 600px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n        display: flex;\n        flex-direction: column;\n      `;\n\n      // Create header\n      const header = document.createElement('div');\n      header.style.cssText = `\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 15px 20px;\n        border-bottom: 1px solid #e5e5e5;\n      `;\n      header.innerHTML = `\n        <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Secure Payment Authentication</h3>\n        <button id=\"inflowpay-3ds-close\" style=\"background: none; border: none; font-size: 24px; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: #333;\">×</button>\n      `;\n\n      // Create content with iframe\n      const content = document.createElement('div');\n      content.style.cssText = `\n        flex: 1;\n        position: relative;\n        overflow: hidden;\n      `;\n      const iframe = document.createElement('iframe');\n      iframe.src = challengeUrl;\n      iframe.style.cssText = `\n        width: 100%;\n        height: 100%;\n        border: none;\n      `;\n      iframe.setAttribute('allow', 'payment');\n      iframe.setAttribute('sandbox', 'allow-forms allow-scripts allow-same-origin allow-popups');\n      content.appendChild(iframe);\n\n      modal.appendChild(header);\n      modal.appendChild(content);\n      overlay.appendChild(modal);\n      document.body.appendChild(overlay);\n\n      // Close button handler\n      const closeBtn = overlay.querySelector('#inflowpay-3ds-close');\n      const closeHandler = () => {\n        overlay.remove();\n        window.removeEventListener('message', messageHandler);\n        resolve(false);\n      };\n      closeBtn?.addEventListener('click', closeHandler);\n\n      const messageHandler = (event: MessageEvent) => {\n        if (!event.data) return;\n\n        const allowed3DSOrigins = [\n          'https://dev.api.inflowpay.com',\n          'https://pre-prod.api.inflowpay.xyz',\n          'https://api.inflowpay.xyz',\n        ];\n\n        if (this.environment === 'sandbox' || this.environment === 'development') {\n          if (event.origin.includes('localhost') || event.origin.includes('127.0.0.1')) {\n            // Allow localhost in dev/sandbox\n          } else if (!allowed3DSOrigins.includes(event.origin)) {\n            if (this.config.debug) {\n              console.warn('[SDK] Rejected 3DS message from unauthorized origin:', event.origin);\n            }\n            return;\n          }\n        } else {\n          if (!allowed3DSOrigins.includes(event.origin)) {\n            if (this.config.debug) {\n              console.warn('[SDK] Rejected 3DS message from unauthorized origin:', event.origin);\n            }\n            return;\n          }\n        }\n\n        const data = event.data;\n        const is3DSComplete = data.type === 'THREE_DS_COMPLETE' || data.type === '3ds-complete';\n        const isSuccess = data.status === 'success';\n        const isFailure = data.status === 'failed' || data.status === 'failure';\n\n        // Success case\n        if (is3DSComplete && isSuccess) {\n          overlay.remove();\n          window.removeEventListener('message', messageHandler);\n          resolve(true);\n          return;\n        }\n\n        // Also handle legacy format\n        if (isSuccess && !is3DSComplete) {\n          overlay.remove();\n          window.removeEventListener('message', messageHandler);\n          resolve(true);\n          return;\n        }\n\n        // Failure case\n        if ((is3DSComplete && isFailure) || data.type === '3ds-failed' || isFailure) {\n          overlay.remove();\n          window.removeEventListener('message', messageHandler);\n          resolve(false);\n          return;\n        }\n      };\n\n      window.addEventListener('message', messageHandler);\n    });\n  }\n\n  /**\n   * Get target origin for postMessage based on environment\n   * In production/pre-prod: use exact origin for security\n   * In dev/sandbox: use wildcard for development flexibility\n   */\n  private getTargetOrigin(): string {\n    if (this.environment === 'production' || this.environment === 'preprod') {\n      return new URL(this.iframeUrl).origin;\n    }\n    return '*';\n  }\n\n  /**\n   * Detect environment from API key\n   */\n  private getEnvironmentFromApiKey(apiKey: string): 'sandbox' | 'production' | 'development' | 'preprod' {\n    if (!apiKey) return 'sandbox';\n    if (apiKey.includes('_local_') || apiKey.startsWith('inflow_local_')) {\n      return 'sandbox';\n    } else if (apiKey.includes('_prod_') && !apiKey.includes('_preprod_')) {\n      return 'production';\n    } else if (apiKey.includes('_preprod_') || apiKey.startsWith('inflow_preprod_')) {\n      return 'preprod';\n    } else if (apiKey.includes('_dev_')) {\n      return 'development';\n    }\n    return 'sandbox';\n  }\n\n  /**\n   * Public method to close the iframe\n   */\n  public destroy(): void {\n    this.close();\n  }\n}\n\n","/**\n * CardElement - Iframe-based payment element\n * \n * Mounts an iframe with the payment checkout form\n */\n\nimport { SDK } from './sdk';\n\nimport type { CSSProperties } from './types';\n\nexport interface CardElementOptions {\n  /** Container element or CSS selector where the iframe will be mounted */\n  container: string | HTMLElement;\n  /** Payment ID for this transaction */\n  paymentId: string;\n  /** Callback when payment completes */\n  onComplete?: (result: { status: string; data?: any; error?: any }) => void;\n  /** Callback when payment fails */\n  onError?: (error: any) => void;\n  /** Callback when user closes the payment */\n  onClose?: () => void;\n  /** Custom styling for the card element */\n  style?: CSSProperties;\n  /** Custom button text (default: \"Complete Payment\") */\n  buttonText?: string;\n  /** Custom placeholder text for inputs */\n  placeholders?: {\n    cardNumber?: string;\n    expiry?: string;\n    cvc?: string;\n  };\n}\n\ninterface InternalSDKConfig {\n  apiKey: string;\n  iframeUrl: string;\n  timeout: number;\n  debug: boolean;\n}\n\nexport class CardElement {\n  private sdk: SDK;\n  private container: HTMLElement;\n  private mounted: boolean = false;\n\n  constructor(\n    config: InternalSDKConfig,\n    options: CardElementOptions\n  ) {\n    let containerElement: HTMLElement | null;\n    if (typeof options.container === 'string') {\n      containerElement = document.querySelector(options.container);\n      if (!containerElement) {\n        throw new Error(`Container not found: ${options.container}`);\n      }\n    } else {\n      containerElement = options.container;\n    }\n    this.container = containerElement;\n\n    this.sdk = new SDK({\n      iframeUrl: config.iframeUrl,\n      apiKey: config.apiKey,\n      container: this.container,\n      config: {\n        paymentId: options.paymentId,\n        ...(options.style && { style: options.style }),\n        ...(options.buttonText && { buttonText: options.buttonText }),\n        ...(options.placeholders && { placeholders: options.placeholders }),\n      },\n      onSuccess: (data) => {\n        if (options.onComplete) {\n          options.onComplete({\n            status: data?.data?.transaction?.status || 'CHECKOUT_SUCCESS',\n            data: data,\n          });\n        }\n      },\n      onError: (error) => {\n        if (options.onError) {\n          options.onError(error);\n        } else if (options.onComplete) {\n          options.onComplete({\n            status: 'PAYMENT_FAILED',\n            error: error,\n          });\n        }\n      },\n      onClose: () => {\n        if (options.onClose) {\n          options.onClose();\n        }\n      },\n    });\n  }\n\n  /**\n   * Mount the CardElement to the DOM\n   * This will create and display the iframe\n   */\n  mount(): void {\n    if (this.mounted) {\n      throw new Error('CardElement is already mounted');\n    }\n\n    this.sdk.init();\n    this.mounted = true;\n  }\n\n  /**\n   * Destroy the CardElement and cleanup\n   */\n  destroy(): void {\n    if (this.mounted) {\n      this.sdk.destroy();\n      this.mounted = false;\n    }\n  }\n}\n","/**\n * InflowPay Payment SDK v2\n * \n * Provider class that manages global SDK configuration\n * Similar to the original SDK but uses iframe-based payment flow\n */\n\nimport type { SDKConfig, PaymentConfig, CSSProperties } from './types';\nimport { CardElement } from './card-element';\n\nexport interface PaymentSDKConfig {\n  /** Public API key */\n  apiKey: string;\n  /** Backend API URL (optional, auto-detected from API key) */\n  iframeUrl?: string;\n  /** Request timeout in milliseconds (default: 30000) */\n  timeout?: number;\n  /** Enable debug logging (default: false, only allowed in local/dev environments) */\n  debug?: boolean;\n}\n\nexport class PaymentSDK {\n  private config: PaymentSDKConfig & { iframeUrl: string; timeout: number; debug: boolean };\n\n  /**\n   * Initialize the InflowPay Payment SDK\n   * \n   * @param config - SDK configuration\n   * \n   * @example\n   * ```typescript\n   * const sdk = new PaymentSDK({\n   *   apiKey: 'inflow_pub_local_xxx'\n   * });\n   * ```\n   */\n  constructor(config: PaymentSDKConfig) {\n    // Validate API key\n    if (!config.apiKey || typeof config.apiKey !== 'string') {\n      throw new Error('API key is required');\n    }\n\n    // Auto-detect iframe URL from API key if not provided\n    let iframeUrl = config.iframeUrl;\n    const environment = this.getEnvironmentFromApiKey(config.apiKey);\n    \n    if (!iframeUrl) {\n      if (environment === 'production') {\n        iframeUrl = 'https://api.inflowpay.xyz/iframe/checkout';\n      } else if (environment === 'preprod') {\n        iframeUrl = 'https://pre-prod.api.inflowpay.xyz/iframe/checkout';\n      } else if (environment === 'development') {\n        iframeUrl = 'https://dev.api.inflowpay.com/iframe/checkout';\n      } else {\n        // sandbox/local\n        iframeUrl = 'http://localhost:3000/iframe/checkout';\n      }\n    }\n\n    // Validate debug mode - only allowed in local/dev environments\n    const requestedDebug = config.debug ?? false;\n    if (requestedDebug && (environment === 'production' || environment === 'preprod')) {\n      console.warn('[InflowPay SDK] Debug mode is not allowed in production/pre-prod environments. Debug mode disabled.');\n    }\n    const debug = requestedDebug && (environment === 'sandbox' || environment === 'development');\n\n    this.config = {\n      apiKey: config.apiKey,\n      iframeUrl,\n      timeout: config.timeout ?? 30000,\n      debug,\n    };\n  }\n\n  /**\n   * Create a CardElement for iframe-based payment UI\n   * \n   * @param options - CardElement configuration\n   * @returns CardElement instance\n   * \n   * @example\n   * ```typescript\n   * const cardElement = sdk.createCardElement({\n   *   container: '#card-container',\n   *   paymentId: 'pay_123',\n   *   onComplete: (result) => {\n   *     if (result.status === 'CHECKOUT_SUCCESS') {\n   *       window.location.href = '/success';\n   *     }\n   *   }\n   * });\n   * \n   * cardElement.mount();\n   * ```\n   */\n  createCardElement(options: {\n    container: string | HTMLElement;\n    paymentId: string;\n    style?: CSSProperties;\n    buttonText?: string;\n    placeholders?: {\n      cardNumber?: string;\n      expiry?: string;\n      cvc?: string;\n    };\n    onComplete?: (result: { status: string; data?: any; error?: any }) => void;\n    onError?: (error: any) => void;\n    onClose?: () => void;\n  }): CardElement {\n    return new CardElement(this.config, options);\n  }\n\n  /**\n   * Get the iframe URL being used\n   */\n  getIframeUrl(): string {\n    return this.config.iframeUrl;\n  }\n\n  /**\n   * Get the API key\n   */\n  getApiKey(): string {\n    return this.config.apiKey;\n  }\n\n  /**\n   * Auto-detect environment from API key\n   */\n  private getEnvironmentFromApiKey(apiKey: string): 'sandbox' | 'production' | 'development' | 'preprod' {\n    if (apiKey.includes('_local_') || apiKey.startsWith('inflow_local_')) {\n      return 'sandbox';\n    } else if (apiKey.includes('_prod_') && !apiKey.includes('_preprod_')) {\n      return 'production';\n    } else if (apiKey.includes('_preprod_') || apiKey.startsWith('inflow_preprod_')) {\n      return 'preprod';\n    } else if (apiKey.includes('_dev_')) {\n      return 'development';\n    }\n    return 'sandbox';\n  }\n}\n\n"],"names":["SDK","config","url","iframeSrc","overlay","container","closeButton","e","currentStyle","iframeWidth","iframeMaxWidth","event","allowedOrigin","isAllowedOrigin","data","height","success","targetOrigin","message","isDarkMode","inputBgColor","shimmerBase","shimmerGradient","loader","containerWidth","skeletonCard","inputWrap","cardNumberSkeleton","expirySkeleton","cvcSkeleton","buttonSkeleton","disclaimerSkeleton","disclaimerIconSkeleton","disclaimerTextSkeleton","style","challengeUrl","resolve","modal","header","content","iframe","closeBtn","closeHandler","messageHandler","allowed3DSOrigins","is3DSComplete","isSuccess","isFailure","apiKey","CardElement","options","containerElement","error","PaymentSDK","iframeUrl","environment","requestedDebug","debug"],"mappings":"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"}

package/dist/react/index.d.ts

@@ -8,8 +8,8 @@ declare interface ButtonBaseStyles {
     borderColor?: string;
     borderEnabled?: boolean;
     fontSize?: string;
-    fontWeight?: string;
-    opacity?: string;
+    fontWeight?: FontWeight;
+    opacity?: Opacity;
 }
 
 declare interface ButtonStyles extends ButtonBaseStyles {
@@ -120,6 +120,8 @@ declare interface CSSProperties {
  */
 declare type FontFamily = 'DM Sans' | 'Inter' | 'Poppins' | 'Nunito' | 'Work Sans' | 'Manrope' | 'Rubik' | 'Karla' | 'Figtree' | 'Outfit' | 'Space Grotesk' | 'Urbanist';
 
+declare type FontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'normal' | 'bold' | 'lighter' | 'bolder';
+
 declare interface GeneralMessageStyles {
     textColor?: string;
     backgroundColor?: string;
@@ -175,6 +177,8 @@ declare interface InternalSDKConfig {
     debug: boolean;
 }
 
+declare type Opacity = number | string;
+
 export declare interface PaymentError {
     code: string;
     message: string;

package/dist/react.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),t=require("react"),v=require("./payment-sdk-BWb7DDT1.js"),P=t.createContext(null);function b({config:e,children:u}){const[i]=t.useState(()=>{const r={apiKey:e.apiKey,iframeUrl:e.iframeUrl,timeout:e.timeout,debug:e.debug};return new v.PaymentSDK(r)});return E.jsx(P.Provider,{value:{sdk:i},children:u})}function k(){const e=t.useContext(P);if(!e)throw new Error("useInflowPay must be used within InflowPayProvider");return e.sdk}function K({paymentId:e,onReady:u,onChange:i,onComplete:r,onError:f,style:o,buttonText:l,placeholders:d,config:s}){const x=t.useContext(P),c=t.useRef(null),a=t.useRef(null),[m,I]=t.useState(!1),w=x?.sdk||(s?new v.PaymentSDK({apiKey:s.apiKey,iframeUrl:s.iframeUrl,timeout:s.timeout,debug:s.debug}):null);if(!w)throw new Error("CardElement must be used within InflowPayProvider or have a config prop");return t.useEffect(()=>{if(!c.current)return;c.current.id||(c.current.id=`inflowpay-card-element-${Date.now()}`);const S={container:c.current,paymentId:e,...o&&{style:o},...l&&{buttonText:l},...d&&{placeholders:d},onComplete:n=>{r&&r(n)},onError:n=>{f?f(n):r&&r({status:"PAYMENT_FAILED",error:n})},onClose:()=>{}},y=w.createCardElement(S);if(a.current=y,y.mount(),I(!0),u){const n=setTimeout(()=>{u()},100);return()=>clearTimeout(n)}},[e,w,m,r,f,u,o,l,d]),t.useEffect(()=>{i&&m&&i({complete:!1})},[m,i]),t.useEffect(()=>()=>{a.current&&(a.current.destroy(),a.current=null)},[]),E.jsx("div",{ref:c,style:{width:o?.fillParent?"100%":"344px"}})}exports.CardElement=K;exports.InflowPayProvider=b;exports.useInflowPay=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),t=require("react"),v=require("./payment-sdk-CvXfOxY6.js"),w=t.createContext(null);function b({config:e,children:u}){const[i]=t.useState(()=>{const r={apiKey:e.apiKey,iframeUrl:e.iframeUrl,timeout:e.timeout,debug:e.debug};return new v.PaymentSDK(r)});return E.jsx(w.Provider,{value:{sdk:i},children:u})}function k(){const e=t.useContext(w);if(!e)throw new Error("useInflowPay must be used within InflowPayProvider");return e.sdk}function K({paymentId:e,onReady:u,onChange:i,onComplete:r,onError:f,style:o,buttonText:l,placeholders:d,config:s}){const x=t.useContext(w),c=t.useRef(null),a=t.useRef(null),[P,I]=t.useState(!1),m=x?.sdk||(s?new v.PaymentSDK({apiKey:s.apiKey,iframeUrl:s.iframeUrl,timeout:s.timeout,debug:s.debug}):null);if(!m)throw new Error("CardElement must be used within InflowPayProvider or have a config prop");return t.useEffect(()=>{if(!c.current)return;c.current.id||(c.current.id=`inflowpay-card-element-${Date.now()}`);const S={container:c.current,paymentId:e,...o&&{style:o},...l&&{buttonText:l},...d&&{placeholders:d},onComplete:n=>{r&&r(n)},onError:n=>{f?f(n):r&&r({status:"PAYMENT_FAILED",error:n})},onClose:()=>{}},y=m.createCardElement(S);if(a.current=y,y.mount(),I(!0),u){const n=setTimeout(()=>{u()},100);return()=>clearTimeout(n)}},[e,m,r,f,u,o,l,d]),t.useEffect(()=>{i&&P&&i({complete:!1})},[P,i]),t.useEffect(()=>()=>{a.current&&(a.current.destroy(),a.current=null)},[]),E.jsx("div",{ref:c,style:{width:o?.fillParent?"100%":"344px"}})}exports.CardElement=K;exports.InflowPayProvider=b;exports.useInflowPay=k;
 //# sourceMappingURL=react.cjs.map

package/dist/react.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"react.cjs","sources":["../src/react/index.tsx"],"sourcesContent":["/**\n * InflowPay React SDK v2 - React Components\n * \n * React components that use the iframe-based SDK v2\n * Same API as the original React SDK for easy migration\n */\n\nimport React, { createContext, useContext, useEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { PaymentSDK } from '../payment-sdk';\nimport type { PaymentSDKConfig } from '../payment-sdk';\nimport type { CardElement as CardElementClass } from '../card-element';\nimport type { CardElementOptions } from '../card-element';\nimport type { CSSProperties } from '../types';\n\nexport interface SDKConfig {\n  apiKey: string;\n  iframeUrl?: string;\n  timeout?: number;\n  /** Enable debug logging (default: false, only allowed in local/dev environments) */\n  debug?: boolean;\n}\n\nexport interface PaymentResult {\n  status: string;\n  data?: any;\n  error?: {\n    code: string;\n    message: string;\n    retryable: boolean;\n  };\n}\n\nexport interface PaymentError {\n  code: string;\n  message: string;\n  retryable: boolean;\n}\n\nexport interface CardElementState {\n  complete: boolean;\n}\n\nexport interface CardElementProps {\n  paymentId: string;\n  onReady?: () => void;\n  onChange?: (state: CardElementState) => void;\n  onComplete?: (result: PaymentResult) => void;\n  onError?: (error: PaymentError) => void;\n  style?: CSSProperties;\n  buttonText?: string;\n  placeholders?: {\n    cardNumber?: string;\n    expiry?: string;\n    cvc?: string;\n  };\n}\n\ninterface InflowPayContextValue {\n  sdk: PaymentSDK;\n}\n\nconst InflowPayContext = createContext<InflowPayContextValue | null>(null);\n\n/**\n * InflowPayProvider - React component\n * \n * Same API as the original React SDK\n * \n * @example\n * ```tsx\n * <InflowPayProvider config={{ apiKey: 'inflow_pub_xxx' }}>\n *   <CardElement\n *     paymentId=\"pay_xxx\"\n *     onComplete={(result) => {\n *       if (result.status === 'CHECKOUT_SUCCESS') {\n *         window.location.href = '/success';\n *       }\n *     }}\n *   />\n * </InflowPayProvider>\n * ```\n */\nexport function InflowPayProvider({\n  config,\n  children,\n}: {\n  config: SDKConfig;\n  children: ReactNode;\n}) {\n  const [sdk] = useState(() => {\n    const sdkConfig: PaymentSDKConfig = {\n      apiKey: config.apiKey,\n      iframeUrl: config.iframeUrl,\n      timeout: config.timeout,\n      debug: config.debug,\n    };\n    return new PaymentSDK(sdkConfig);\n  });\n\n  return (\n    <InflowPayContext.Provider value={{ sdk }}>\n      {children}\n    </InflowPayContext.Provider>\n  );\n}\n\n/**\n * useInflowPay - Hook to access InflowPay SDK instance\n * \n * @example\n * ```tsx\n * function CustomComponent() {\n *   const inflow = useInflowPay();\n *   \n *   const checkStatus = async () => {\n *     const status = await inflow.getPaymentStatus('pay_xxx');\n *     console.log(status);\n *   };\n *   \n *   return <button onClick={checkStatus}>Check Status</button>;\n * }\n * ```\n */\nexport function useInflowPay(): PaymentSDK {\n  const context = useContext(InflowPayContext);\n  if (!context) {\n    throw new Error('useInflowPay must be used within InflowPayProvider');\n  }\n  return context.sdk;\n}\n\n/**\n * CardElement - React component\n * \n * Same API as the original React SDK\n * \n * @example\n * ```tsx\n * <CardElement\n *   paymentId=\"pay_xxx\"\n *   onComplete={(result) => {\n *     if (result.status === 'CHECKOUT_SUCCESS') {\n *       window.location.href = '/success';\n *     }\n *   }}\n * />\n * ```\n */\nexport function CardElement({\n  paymentId,\n  onReady,\n  onChange,\n  onComplete,\n  onError,\n  style,\n  buttonText,\n  placeholders,\n  config: propConfig,\n}: CardElementProps & { config?: SDKConfig }) {\n  const context = useContext(InflowPayContext);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const cardElementRef = useRef<CardElementClass | null>(null);\n  const [mounted, setMounted] = useState(false);\n\n  const sdk = context?.sdk || (propConfig ? new PaymentSDK({\n    apiKey: propConfig.apiKey,\n    iframeUrl: propConfig.iframeUrl,\n    timeout: propConfig.timeout,\n    debug: propConfig.debug,\n  }) : null);\n\n  if (!sdk) {\n    throw new Error('CardElement must be used within InflowPayProvider or have a config prop');\n  }\n\n  useEffect(() => {\n    if (!containerRef.current) {\n      return;\n    }\n\n    if (!containerRef.current.id) {\n      containerRef.current.id = `inflowpay-card-element-${Date.now()}`;\n    }\n\n    const cardElementOptions: CardElementOptions = {\n      container: containerRef.current,\n      paymentId: paymentId,\n      ...(style && { style }),\n      ...(buttonText && { buttonText }),\n      ...(placeholders && { placeholders }),\n      onComplete: (result) => {\n        if (onComplete) {\n          onComplete(result);\n        }\n      },\n      onError: (error) => {\n        if (onError) {\n          onError(error);\n        } else if (onComplete) {\n          onComplete({\n            status: 'PAYMENT_FAILED',\n            error: error,\n          });\n        }\n      },\n      onClose: () => {\n      },\n    };\n\n    const cardElement = sdk.createCardElement(cardElementOptions);\n    cardElementRef.current = cardElement;\n    cardElement.mount();\n    setMounted(true);\n\n    if (onReady) {\n      const timer = setTimeout(() => {\n        onReady();\n      }, 100);\n      return () => clearTimeout(timer);\n    }\n  }, [paymentId, sdk, mounted, onComplete, onError, onReady, style, buttonText, placeholders]);\n\n  useEffect(() => {\n    if (onChange && mounted) {\n      onChange({ complete: false });\n    }\n  }, [mounted, onChange]);\n\n  useEffect(() => {\n    return () => {\n      if (cardElementRef.current) {\n        cardElementRef.current.destroy();\n        cardElementRef.current = null;\n      }\n    };\n  }, []);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: style?.fillParent ? \"100%\" : \"344px\"\n      }}\n    />\n  );\n}\n"],"names":["InflowPayContext","createContext","InflowPayProvider","config","children","sdk","useState","sdkConfig","PaymentSDK","jsx","useInflowPay","context","useContext","CardElement","paymentId","onReady","onChange","onComplete","onError","style","buttonText","placeholders","propConfig","containerRef","useRef","cardElementRef","mounted","setMounted","useEffect","cardElementOptions","result","error","cardElement","timer"],"mappings":"+KA8DMA,EAAmBC,EAAAA,cAA4C,IAAI,EAqBlE,SAASC,EAAkB,CAChC,OAAAC,EACA,SAAAC,CACF,EAGG,CACD,KAAM,CAACC,CAAG,EAAIC,EAAAA,SAAS,IAAM,CAC3B,MAAMC,EAA8B,CAClC,OAAQJ,EAAO,OACf,UAAWA,EAAO,UAClB,QAASA,EAAO,QAChB,MAAOA,EAAO,KAAA,EAEhB,OAAO,IAAIK,EAAAA,WAAWD,CAAS,CACjC,CAAC,EAED,OACEE,EAAAA,IAACT,EAAiB,SAAjB,CAA0B,MAAO,CAAE,IAAAK,CAAA,EACjC,SAAAD,EACH,CAEJ,CAmBO,SAASM,GAA2B,CACzC,MAAMC,EAAUC,EAAAA,WAAWZ,CAAgB,EAC3C,GAAI,CAACW,EACH,MAAM,IAAI,MAAM,oDAAoD,EAEtE,OAAOA,EAAQ,GACjB,CAmBO,SAASE,EAAY,CAC1B,UAAAC,EACA,QAAAC,EACA,SAAAC,EACA,WAAAC,EACA,QAAAC,EACA,MAAAC,EACA,WAAAC,EACA,aAAAC,EACA,OAAQC,CACV,EAA8C,CAC5C,MAAMX,EAAUC,EAAAA,WAAWZ,CAAgB,EACrCuB,EAAeC,EAAAA,OAAuB,IAAI,EAC1CC,EAAiBD,EAAAA,OAAgC,IAAI,EACrD,CAACE,EAASC,CAAU,EAAIrB,EAAAA,SAAS,EAAK,EAEtCD,EAAMM,GAAS,MAAQW,EAAa,IAAId,EAAAA,WAAW,CACvD,OAAQc,EAAW,OACnB,UAAWA,EAAW,UACtB,QAASA,EAAW,QACpB,MAAOA,EAAW,KAAA,CACnB,EAAI,MAEL,GAAI,CAACjB,EACH,MAAM,IAAI,MAAM,yEAAyE,EAG3FuB,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACL,EAAa,QAChB,OAGGA,EAAa,QAAQ,KACxBA,EAAa,QAAQ,GAAK,0BAA0B,KAAK,KAAK,IAGhE,MAAMM,EAAyC,CAC7C,UAAWN,EAAa,QACxB,UAAAT,EACA,GAAIK,GAAS,CAAE,MAAAA,CAAA,EACf,GAAIC,GAAc,CAAE,WAAAA,CAAA,EACpB,GAAIC,GAAgB,CAAE,aAAAA,CAAA,EACtB,WAAaS,GAAW,CAClBb,GACFA,EAAWa,CAAM,CAErB,EACA,QAAUC,GAAU,CACdb,EACFA,EAAQa,CAAK,EACJd,GACTA,EAAW,CACT,OAAQ,iBACR,MAAAc,CAAA,CACD,CAEL,EACA,QAAS,IAAM,CACf,CAAA,EAGIC,EAAc3B,EAAI,kBAAkBwB,CAAkB,EAK5D,GAJAJ,EAAe,QAAUO,EACzBA,EAAY,MAAA,EACZL,EAAW,EAAI,EAEXZ,EAAS,CACX,MAAMkB,EAAQ,WAAW,IAAM,CAC7BlB,EAAA,CACF,EAAG,GAAG,EACN,MAAO,IAAM,aAAakB,CAAK,CACjC,CACF,EAAG,CAACnB,EAAWT,EAAKqB,EAAST,EAAYC,EAASH,EAASI,EAAOC,EAAYC,CAAY,CAAC,EAE3FO,EAAAA,UAAU,IAAM,CACVZ,GAAYU,GACdV,EAAS,CAAE,SAAU,GAAO,CAEhC,EAAG,CAACU,EAASV,CAAQ,CAAC,EAEtBY,EAAAA,UAAU,IACD,IAAM,CACPH,EAAe,UACjBA,EAAe,QAAQ,QAAA,EACvBA,EAAe,QAAU,KAE7B,EACC,CAAA,CAAE,EAGHhB,EAAAA,IAAC,MAAA,CACC,IAAKc,EACL,MAAO,CACL,MAAOJ,GAAO,WAAa,OAAS,OAAA,CACtC,CAAA,CAGN"}
+{"version":3,"file":"react.cjs","sources":["../src/react/index.tsx"],"sourcesContent":["/**\n * InflowPay React SDK v2 - React Components\n * \n * React components that use the iframe-based SDK v2\n * Same API as the original React SDK for easy migration\n */\n\nimport React, { createContext, useContext, useEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { PaymentSDK } from '../payment-sdk';\nimport type { PaymentSDKConfig } from '../payment-sdk';\nimport type { CardElement as CardElementClass } from '../card-element';\nimport type { CardElementOptions } from '../card-element';\nimport type { CSSProperties } from '../types';\n\nexport interface SDKConfig {\n  apiKey: string;\n  iframeUrl?: string;\n  timeout?: number;\n  /** Enable debug logging (default: false, only allowed in local/dev environments) */\n  debug?: boolean;\n}\n\nexport interface PaymentResult {\n  status: string;\n  data?: any;\n  error?: {\n    code: string;\n    message: string;\n    retryable: boolean;\n  };\n}\n\nexport interface PaymentError {\n  code: string;\n  message: string;\n  retryable: boolean;\n}\n\nexport interface CardElementState {\n  complete: boolean;\n}\n\nexport interface CardElementProps {\n  paymentId: string;\n  onReady?: () => void;\n  onChange?: (state: CardElementState) => void;\n  onComplete?: (result: PaymentResult) => void;\n  onError?: (error: PaymentError) => void;\n  style?: CSSProperties;\n  buttonText?: string;\n  placeholders?: {\n    cardNumber?: string;\n    expiry?: string;\n    cvc?: string;\n  };\n}\n\ninterface InflowPayContextValue {\n  sdk: PaymentSDK;\n}\n\nconst InflowPayContext = createContext<InflowPayContextValue | null>(null);\n\n/**\n * InflowPayProvider - React component\n * \n * Same API as the original React SDK\n * \n * @example\n * ```tsx\n * <InflowPayProvider config={{ apiKey: 'inflow_pub_xxx' }}>\n *   <CardElement\n *     paymentId=\"pay_xxx\"\n *     onComplete={(result) => {\n *       if (result.status === 'CHECKOUT_SUCCESS') {\n *         window.location.href = '/success';\n *       }\n *     }}\n *   />\n * </InflowPayProvider>\n * ```\n */\nexport function InflowPayProvider({\n  config,\n  children,\n}: {\n  config: SDKConfig;\n  children: ReactNode;\n}) {\n  const [sdk] = useState(() => {\n    const sdkConfig: PaymentSDKConfig = {\n      apiKey: config.apiKey,\n      iframeUrl: config.iframeUrl,\n      timeout: config.timeout,\n      debug: config.debug,\n    };\n    return new PaymentSDK(sdkConfig);\n  });\n\n  return (\n    <InflowPayContext.Provider value={{ sdk }}>\n      {children}\n    </InflowPayContext.Provider>\n  );\n}\n\n/**\n * useInflowPay - Hook to access InflowPay SDK instance\n * \n * @example\n * ```tsx\n * function CustomComponent() {\n *   const inflow = useInflowPay();\n *   \n *   const checkStatus = async () => {\n *     const status = await inflow.getPaymentStatus('pay_xxx');\n *     console.log(status);\n *   };\n *   \n *   return <button onClick={checkStatus}>Check Status</button>;\n * }\n * ```\n */\nexport function useInflowPay(): PaymentSDK {\n  const context = useContext(InflowPayContext);\n  if (!context) {\n    throw new Error('useInflowPay must be used within InflowPayProvider');\n  }\n  return context.sdk;\n}\n\n/**\n * CardElement - React component\n * \n * Same API as the original React SDK\n * \n * @example\n * ```tsx\n * <CardElement\n *   paymentId=\"pay_xxx\"\n *   onComplete={(result) => {\n *     if (result.status === 'CHECKOUT_SUCCESS') {\n *       window.location.href = '/success';\n *     }\n *   }}\n * />\n * ```\n */\nexport function CardElement({\n  paymentId,\n  onReady,\n  onChange,\n  onComplete,\n  onError,\n  style,\n  buttonText,\n  placeholders,\n  config: propConfig,\n}: CardElementProps & { config?: SDKConfig }) {\n  const context = useContext(InflowPayContext);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const cardElementRef = useRef<CardElementClass | null>(null);\n  const [mounted, setMounted] = useState(false);\n\n  const sdk = context?.sdk || (propConfig ? new PaymentSDK({\n    apiKey: propConfig.apiKey,\n    iframeUrl: propConfig.iframeUrl,\n    timeout: propConfig.timeout,\n    debug: propConfig.debug,\n  }) : null);\n\n  if (!sdk) {\n    throw new Error('CardElement must be used within InflowPayProvider or have a config prop');\n  }\n\n  useEffect(() => {\n    if (!containerRef.current) {\n      return;\n    }\n\n    if (!containerRef.current.id) {\n      containerRef.current.id = `inflowpay-card-element-${Date.now()}`;\n    }\n\n    const cardElementOptions: CardElementOptions = {\n      container: containerRef.current,\n      paymentId: paymentId,\n      ...(style && { style }),\n      ...(buttonText && { buttonText }),\n      ...(placeholders && { placeholders }),\n      onComplete: (result) => {\n        if (onComplete) {\n          onComplete(result);\n        }\n      },\n      onError: (error) => {\n        if (onError) {\n          onError(error);\n        } else if (onComplete) {\n          onComplete({\n            status: 'PAYMENT_FAILED',\n            error: error,\n          });\n        }\n      },\n      onClose: () => {\n      },\n    };\n\n    const cardElement = sdk.createCardElement(cardElementOptions);\n    cardElementRef.current = cardElement;\n    cardElement.mount();\n    setMounted(true);\n\n    if (onReady) {\n      const timer = setTimeout(() => {\n        onReady();\n      }, 100);\n      return () => clearTimeout(timer);\n    }\n  }, [paymentId, sdk, onComplete, onError, onReady, style, buttonText, placeholders]);\n\n  useEffect(() => {\n    if (onChange && mounted) {\n      onChange({ complete: false });\n    }\n  }, [mounted, onChange]);\n\n  useEffect(() => {\n    return () => {\n      if (cardElementRef.current) {\n        cardElementRef.current.destroy();\n        cardElementRef.current = null;\n      }\n    };\n  }, []);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: style?.fillParent ? \"100%\" : \"344px\"\n      }}\n    />\n  );\n}\n"],"names":["InflowPayContext","createContext","InflowPayProvider","config","children","sdk","useState","sdkConfig","PaymentSDK","jsx","useInflowPay","context","useContext","CardElement","paymentId","onReady","onChange","onComplete","onError","style","buttonText","placeholders","propConfig","containerRef","useRef","cardElementRef","mounted","setMounted","useEffect","cardElementOptions","result","error","cardElement","timer"],"mappings":"+KA8DMA,EAAmBC,EAAAA,cAA4C,IAAI,EAqBlE,SAASC,EAAkB,CAChC,OAAAC,EACA,SAAAC,CACF,EAGG,CACD,KAAM,CAACC,CAAG,EAAIC,EAAAA,SAAS,IAAM,CAC3B,MAAMC,EAA8B,CAClC,OAAQJ,EAAO,OACf,UAAWA,EAAO,UAClB,QAASA,EAAO,QAChB,MAAOA,EAAO,KAAA,EAEhB,OAAO,IAAIK,EAAAA,WAAWD,CAAS,CACjC,CAAC,EAED,OACEE,EAAAA,IAACT,EAAiB,SAAjB,CAA0B,MAAO,CAAE,IAAAK,CAAA,EACjC,SAAAD,EACH,CAEJ,CAmBO,SAASM,GAA2B,CACzC,MAAMC,EAAUC,EAAAA,WAAWZ,CAAgB,EAC3C,GAAI,CAACW,EACH,MAAM,IAAI,MAAM,oDAAoD,EAEtE,OAAOA,EAAQ,GACjB,CAmBO,SAASE,EAAY,CAC1B,UAAAC,EACA,QAAAC,EACA,SAAAC,EACA,WAAAC,EACA,QAAAC,EACA,MAAAC,EACA,WAAAC,EACA,aAAAC,EACA,OAAQC,CACV,EAA8C,CAC5C,MAAMX,EAAUC,EAAAA,WAAWZ,CAAgB,EACrCuB,EAAeC,EAAAA,OAAuB,IAAI,EAC1CC,EAAiBD,EAAAA,OAAgC,IAAI,EACrD,CAACE,EAASC,CAAU,EAAIrB,EAAAA,SAAS,EAAK,EAEtCD,EAAMM,GAAS,MAAQW,EAAa,IAAId,EAAAA,WAAW,CACvD,OAAQc,EAAW,OACnB,UAAWA,EAAW,UACtB,QAASA,EAAW,QACpB,MAAOA,EAAW,KAAA,CACnB,EAAI,MAEL,GAAI,CAACjB,EACH,MAAM,IAAI,MAAM,yEAAyE,EAG3FuB,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACL,EAAa,QAChB,OAGGA,EAAa,QAAQ,KACxBA,EAAa,QAAQ,GAAK,0BAA0B,KAAK,KAAK,IAGhE,MAAMM,EAAyC,CAC7C,UAAWN,EAAa,QACxB,UAAAT,EACA,GAAIK,GAAS,CAAE,MAAAA,CAAA,EACf,GAAIC,GAAc,CAAE,WAAAA,CAAA,EACpB,GAAIC,GAAgB,CAAE,aAAAA,CAAA,EACtB,WAAaS,GAAW,CAClBb,GACFA,EAAWa,CAAM,CAErB,EACA,QAAUC,GAAU,CACdb,EACFA,EAAQa,CAAK,EACJd,GACTA,EAAW,CACT,OAAQ,iBACR,MAAAc,CAAA,CACD,CAEL,EACA,QAAS,IAAM,CACf,CAAA,EAGIC,EAAc3B,EAAI,kBAAkBwB,CAAkB,EAK5D,GAJAJ,EAAe,QAAUO,EACzBA,EAAY,MAAA,EACZL,EAAW,EAAI,EAEXZ,EAAS,CACX,MAAMkB,EAAQ,WAAW,IAAM,CAC7BlB,EAAA,CACF,EAAG,GAAG,EACN,MAAO,IAAM,aAAakB,CAAK,CACjC,CACF,EAAG,CAACnB,EAAWT,EAAKY,EAAYC,EAASH,EAASI,EAAOC,EAAYC,CAAY,CAAC,EAElFO,EAAAA,UAAU,IAAM,CACVZ,GAAYU,GACdV,EAAS,CAAE,SAAU,GAAO,CAEhC,EAAG,CAACU,EAASV,CAAQ,CAAC,EAEtBY,EAAAA,UAAU,IACD,IAAM,CACPH,EAAe,UACjBA,EAAe,QAAQ,QAAA,EACvBA,EAAe,QAAU,KAE7B,EACC,CAAA,CAAE,EAGHhB,EAAAA,IAAC,MAAA,CACC,IAAKc,EACL,MAAO,CACL,MAAOJ,GAAO,WAAa,OAAS,OAAA,CACtC,CAAA,CAGN"}

package/dist/react.esm.js

@@ -1,7 +1,7 @@
 import { jsx as v } from "react/jsx-runtime";
-import { createContext as D, useState as x, useContext as I, useRef as y, useEffect as w } from "react";
-import { P as k } from "./payment-sdk-CH8ugKck.mjs";
-const P = D(null);
+import { createContext as D, useState as x, useContext as I, useRef as y, useEffect as d } from "react";
+import { P as k } from "./payment-sdk-DK3VOIGL.mjs";
+const w = D(null);
 function S({
   config: e,
   children: n
@@ -15,10 +15,10 @@ function S({
     };
     return new k(t);
   });
-  return /* @__PURE__ */ v(P.Provider, { value: { sdk: u }, children: n });
+  return /* @__PURE__ */ v(w.Provider, { value: { sdk: u }, children: n });
 }
 function j() {
-  const e = I(P);
+  const e = I(w);
   if (!e)
     throw new Error("useInflowPay must be used within InflowPayProvider");
   return e.sdk;
@@ -34,15 +34,15 @@ function F({
   placeholders: l,
   config: i
 }) {
-  const K = I(P), o = y(null), c = y(null), [m, b] = x(!1), d = K?.sdk || (i ? new k({
+  const K = I(w), o = y(null), c = y(null), [P, b] = x(!1), m = K?.sdk || (i ? new k({
     apiKey: i.apiKey,
     iframeUrl: i.iframeUrl,
     timeout: i.timeout,
     debug: i.debug
   }) : null);
-  if (!d)
+  if (!m)
     throw new Error("CardElement must be used within InflowPayProvider or have a config prop");
-  return w(() => {
+  return d(() => {
     if (!o.current)
       return;
     o.current.id || (o.current.id = `inflowpay-card-element-${Date.now()}`);
@@ -63,16 +63,16 @@ function F({
       },
       onClose: () => {
       }
-    }, E = d.createCardElement(U);
+    }, E = m.createCardElement(U);
     if (c.current = E, E.mount(), b(!0), n) {
       const r = setTimeout(() => {
         n();
       }, 100);
       return () => clearTimeout(r);
     }
-  }, [e, d, m, t, f, n, s, a, l]), w(() => {
-    u && m && u({ complete: !1 });
-  }, [m, u]), w(() => () => {
+  }, [e, m, t, f, n, s, a, l]), d(() => {
+    u && P && u({ complete: !1 });
+  }, [P, u]), d(() => () => {
     c.current && (c.current.destroy(), c.current = null);
   }, []), /* @__PURE__ */ v(
     "div",

package/dist/react.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.esm.js","sources":["../src/react/index.tsx"],"sourcesContent":["/**\n * InflowPay React SDK v2 - React Components\n * \n * React components that use the iframe-based SDK v2\n * Same API as the original React SDK for easy migration\n */\n\nimport React, { createContext, useContext, useEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { PaymentSDK } from '../payment-sdk';\nimport type { PaymentSDKConfig } from '../payment-sdk';\nimport type { CardElement as CardElementClass } from '../card-element';\nimport type { CardElementOptions } from '../card-element';\nimport type { CSSProperties } from '../types';\n\nexport interface SDKConfig {\n  apiKey: string;\n  iframeUrl?: string;\n  timeout?: number;\n  /** Enable debug logging (default: false, only allowed in local/dev environments) */\n  debug?: boolean;\n}\n\nexport interface PaymentResult {\n  status: string;\n  data?: any;\n  error?: {\n    code: string;\n    message: string;\n    retryable: boolean;\n  };\n}\n\nexport interface PaymentError {\n  code: string;\n  message: string;\n  retryable: boolean;\n}\n\nexport interface CardElementState {\n  complete: boolean;\n}\n\nexport interface CardElementProps {\n  paymentId: string;\n  onReady?: () => void;\n  onChange?: (state: CardElementState) => void;\n  onComplete?: (result: PaymentResult) => void;\n  onError?: (error: PaymentError) => void;\n  style?: CSSProperties;\n  buttonText?: string;\n  placeholders?: {\n    cardNumber?: string;\n    expiry?: string;\n    cvc?: string;\n  };\n}\n\ninterface InflowPayContextValue {\n  sdk: PaymentSDK;\n}\n\nconst InflowPayContext = createContext<InflowPayContextValue | null>(null);\n\n/**\n * InflowPayProvider - React component\n * \n * Same API as the original React SDK\n * \n * @example\n * ```tsx\n * <InflowPayProvider config={{ apiKey: 'inflow_pub_xxx' }}>\n *   <CardElement\n *     paymentId=\"pay_xxx\"\n *     onComplete={(result) => {\n *       if (result.status === 'CHECKOUT_SUCCESS') {\n *         window.location.href = '/success';\n *       }\n *     }}\n *   />\n * </InflowPayProvider>\n * ```\n */\nexport function InflowPayProvider({\n  config,\n  children,\n}: {\n  config: SDKConfig;\n  children: ReactNode;\n}) {\n  const [sdk] = useState(() => {\n    const sdkConfig: PaymentSDKConfig = {\n      apiKey: config.apiKey,\n      iframeUrl: config.iframeUrl,\n      timeout: config.timeout,\n      debug: config.debug,\n    };\n    return new PaymentSDK(sdkConfig);\n  });\n\n  return (\n    <InflowPayContext.Provider value={{ sdk }}>\n      {children}\n    </InflowPayContext.Provider>\n  );\n}\n\n/**\n * useInflowPay - Hook to access InflowPay SDK instance\n * \n * @example\n * ```tsx\n * function CustomComponent() {\n *   const inflow = useInflowPay();\n *   \n *   const checkStatus = async () => {\n *     const status = await inflow.getPaymentStatus('pay_xxx');\n *     console.log(status);\n *   };\n *   \n *   return <button onClick={checkStatus}>Check Status</button>;\n * }\n * ```\n */\nexport function useInflowPay(): PaymentSDK {\n  const context = useContext(InflowPayContext);\n  if (!context) {\n    throw new Error('useInflowPay must be used within InflowPayProvider');\n  }\n  return context.sdk;\n}\n\n/**\n * CardElement - React component\n * \n * Same API as the original React SDK\n * \n * @example\n * ```tsx\n * <CardElement\n *   paymentId=\"pay_xxx\"\n *   onComplete={(result) => {\n *     if (result.status === 'CHECKOUT_SUCCESS') {\n *       window.location.href = '/success';\n *     }\n *   }}\n * />\n * ```\n */\nexport function CardElement({\n  paymentId,\n  onReady,\n  onChange,\n  onComplete,\n  onError,\n  style,\n  buttonText,\n  placeholders,\n  config: propConfig,\n}: CardElementProps & { config?: SDKConfig }) {\n  const context = useContext(InflowPayContext);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const cardElementRef = useRef<CardElementClass | null>(null);\n  const [mounted, setMounted] = useState(false);\n\n  const sdk = context?.sdk || (propConfig ? new PaymentSDK({\n    apiKey: propConfig.apiKey,\n    iframeUrl: propConfig.iframeUrl,\n    timeout: propConfig.timeout,\n    debug: propConfig.debug,\n  }) : null);\n\n  if (!sdk) {\n    throw new Error('CardElement must be used within InflowPayProvider or have a config prop');\n  }\n\n  useEffect(() => {\n    if (!containerRef.current) {\n      return;\n    }\n\n    if (!containerRef.current.id) {\n      containerRef.current.id = `inflowpay-card-element-${Date.now()}`;\n    }\n\n    const cardElementOptions: CardElementOptions = {\n      container: containerRef.current,\n      paymentId: paymentId,\n      ...(style && { style }),\n      ...(buttonText && { buttonText }),\n      ...(placeholders && { placeholders }),\n      onComplete: (result) => {\n        if (onComplete) {\n          onComplete(result);\n        }\n      },\n      onError: (error) => {\n        if (onError) {\n          onError(error);\n        } else if (onComplete) {\n          onComplete({\n            status: 'PAYMENT_FAILED',\n            error: error,\n          });\n        }\n      },\n      onClose: () => {\n      },\n    };\n\n    const cardElement = sdk.createCardElement(cardElementOptions);\n    cardElementRef.current = cardElement;\n    cardElement.mount();\n    setMounted(true);\n\n    if (onReady) {\n      const timer = setTimeout(() => {\n        onReady();\n      }, 100);\n      return () => clearTimeout(timer);\n    }\n  }, [paymentId, sdk, mounted, onComplete, onError, onReady, style, buttonText, placeholders]);\n\n  useEffect(() => {\n    if (onChange && mounted) {\n      onChange({ complete: false });\n    }\n  }, [mounted, onChange]);\n\n  useEffect(() => {\n    return () => {\n      if (cardElementRef.current) {\n        cardElementRef.current.destroy();\n        cardElementRef.current = null;\n      }\n    };\n  }, []);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: style?.fillParent ? \"100%\" : \"344px\"\n      }}\n    />\n  );\n}\n"],"names":["InflowPayContext","createContext","InflowPayProvider","config","children","sdk","useState","sdkConfig","PaymentSDK","jsx","useInflowPay","context","useContext","CardElement","paymentId","onReady","onChange","onComplete","onError","style","buttonText","placeholders","propConfig","containerRef","useRef","cardElementRef","mounted","setMounted","useEffect","cardElementOptions","result","error","cardElement","timer"],"mappings":"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"}
+{"version":3,"file":"react.esm.js","sources":["../src/react/index.tsx"],"sourcesContent":["/**\n * InflowPay React SDK v2 - React Components\n * \n * React components that use the iframe-based SDK v2\n * Same API as the original React SDK for easy migration\n */\n\nimport React, { createContext, useContext, useEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { PaymentSDK } from '../payment-sdk';\nimport type { PaymentSDKConfig } from '../payment-sdk';\nimport type { CardElement as CardElementClass } from '../card-element';\nimport type { CardElementOptions } from '../card-element';\nimport type { CSSProperties } from '../types';\n\nexport interface SDKConfig {\n  apiKey: string;\n  iframeUrl?: string;\n  timeout?: number;\n  /** Enable debug logging (default: false, only allowed in local/dev environments) */\n  debug?: boolean;\n}\n\nexport interface PaymentResult {\n  status: string;\n  data?: any;\n  error?: {\n    code: string;\n    message: string;\n    retryable: boolean;\n  };\n}\n\nexport interface PaymentError {\n  code: string;\n  message: string;\n  retryable: boolean;\n}\n\nexport interface CardElementState {\n  complete: boolean;\n}\n\nexport interface CardElementProps {\n  paymentId: string;\n  onReady?: () => void;\n  onChange?: (state: CardElementState) => void;\n  onComplete?: (result: PaymentResult) => void;\n  onError?: (error: PaymentError) => void;\n  style?: CSSProperties;\n  buttonText?: string;\n  placeholders?: {\n    cardNumber?: string;\n    expiry?: string;\n    cvc?: string;\n  };\n}\n\ninterface InflowPayContextValue {\n  sdk: PaymentSDK;\n}\n\nconst InflowPayContext = createContext<InflowPayContextValue | null>(null);\n\n/**\n * InflowPayProvider - React component\n * \n * Same API as the original React SDK\n * \n * @example\n * ```tsx\n * <InflowPayProvider config={{ apiKey: 'inflow_pub_xxx' }}>\n *   <CardElement\n *     paymentId=\"pay_xxx\"\n *     onComplete={(result) => {\n *       if (result.status === 'CHECKOUT_SUCCESS') {\n *         window.location.href = '/success';\n *       }\n *     }}\n *   />\n * </InflowPayProvider>\n * ```\n */\nexport function InflowPayProvider({\n  config,\n  children,\n}: {\n  config: SDKConfig;\n  children: ReactNode;\n}) {\n  const [sdk] = useState(() => {\n    const sdkConfig: PaymentSDKConfig = {\n      apiKey: config.apiKey,\n      iframeUrl: config.iframeUrl,\n      timeout: config.timeout,\n      debug: config.debug,\n    };\n    return new PaymentSDK(sdkConfig);\n  });\n\n  return (\n    <InflowPayContext.Provider value={{ sdk }}>\n      {children}\n    </InflowPayContext.Provider>\n  );\n}\n\n/**\n * useInflowPay - Hook to access InflowPay SDK instance\n * \n * @example\n * ```tsx\n * function CustomComponent() {\n *   const inflow = useInflowPay();\n *   \n *   const checkStatus = async () => {\n *     const status = await inflow.getPaymentStatus('pay_xxx');\n *     console.log(status);\n *   };\n *   \n *   return <button onClick={checkStatus}>Check Status</button>;\n * }\n * ```\n */\nexport function useInflowPay(): PaymentSDK {\n  const context = useContext(InflowPayContext);\n  if (!context) {\n    throw new Error('useInflowPay must be used within InflowPayProvider');\n  }\n  return context.sdk;\n}\n\n/**\n * CardElement - React component\n * \n * Same API as the original React SDK\n * \n * @example\n * ```tsx\n * <CardElement\n *   paymentId=\"pay_xxx\"\n *   onComplete={(result) => {\n *     if (result.status === 'CHECKOUT_SUCCESS') {\n *       window.location.href = '/success';\n *     }\n *   }}\n * />\n * ```\n */\nexport function CardElement({\n  paymentId,\n  onReady,\n  onChange,\n  onComplete,\n  onError,\n  style,\n  buttonText,\n  placeholders,\n  config: propConfig,\n}: CardElementProps & { config?: SDKConfig }) {\n  const context = useContext(InflowPayContext);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const cardElementRef = useRef<CardElementClass | null>(null);\n  const [mounted, setMounted] = useState(false);\n\n  const sdk = context?.sdk || (propConfig ? new PaymentSDK({\n    apiKey: propConfig.apiKey,\n    iframeUrl: propConfig.iframeUrl,\n    timeout: propConfig.timeout,\n    debug: propConfig.debug,\n  }) : null);\n\n  if (!sdk) {\n    throw new Error('CardElement must be used within InflowPayProvider or have a config prop');\n  }\n\n  useEffect(() => {\n    if (!containerRef.current) {\n      return;\n    }\n\n    if (!containerRef.current.id) {\n      containerRef.current.id = `inflowpay-card-element-${Date.now()}`;\n    }\n\n    const cardElementOptions: CardElementOptions = {\n      container: containerRef.current,\n      paymentId: paymentId,\n      ...(style && { style }),\n      ...(buttonText && { buttonText }),\n      ...(placeholders && { placeholders }),\n      onComplete: (result) => {\n        if (onComplete) {\n          onComplete(result);\n        }\n      },\n      onError: (error) => {\n        if (onError) {\n          onError(error);\n        } else if (onComplete) {\n          onComplete({\n            status: 'PAYMENT_FAILED',\n            error: error,\n          });\n        }\n      },\n      onClose: () => {\n      },\n    };\n\n    const cardElement = sdk.createCardElement(cardElementOptions);\n    cardElementRef.current = cardElement;\n    cardElement.mount();\n    setMounted(true);\n\n    if (onReady) {\n      const timer = setTimeout(() => {\n        onReady();\n      }, 100);\n      return () => clearTimeout(timer);\n    }\n  }, [paymentId, sdk, onComplete, onError, onReady, style, buttonText, placeholders]);\n\n  useEffect(() => {\n    if (onChange && mounted) {\n      onChange({ complete: false });\n    }\n  }, [mounted, onChange]);\n\n  useEffect(() => {\n    return () => {\n      if (cardElementRef.current) {\n        cardElementRef.current.destroy();\n        cardElementRef.current = null;\n      }\n    };\n  }, []);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: style?.fillParent ? \"100%\" : \"344px\"\n      }}\n    />\n  );\n}\n"],"names":["InflowPayContext","createContext","InflowPayProvider","config","children","sdk","useState","sdkConfig","PaymentSDK","jsx","useInflowPay","context","useContext","CardElement","paymentId","onReady","onChange","onComplete","onError","style","buttonText","placeholders","propConfig","containerRef","useRef","cardElementRef","mounted","setMounted","useEffect","cardElementOptions","result","error","cardElement","timer"],"mappings":"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"}

package/dist/react.umd.js

@@ -1,4 +1,4 @@
-(function(E,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],h):(E=typeof globalThis<"u"?globalThis:E||self,h(E.InflowPaySDKReact={},E.React))})(this,function(E,h){"use strict";var A={exports:{}},S={};/**
+(function(_,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],g):(_=typeof globalThis<"u"?globalThis:_||self,g(_.InflowPaySDKReact={},_.React))})(this,function(_,g){"use strict";var A={exports:{}},S={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var U;function G(){if(U)return S;U=1;var l=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(n,i,o){var c=null;if(o!==void 0&&(c=""+o),i.key!==void 0&&(c=""+i.key),"key"in i){o={};for(var f in i)f!=="key"&&(o[f]=i[f])}else o=i;return i=o.ref,{$$typeof:l,type:n,key:c,ref:i!==void 0?i:null,props:o}}return S.Fragment=t,S.jsx=r,S.jsxs=r,S}var k={};/**
+ */var N;function V(){if(N)return S;N=1;var d=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function n(r,i,o){var a=null;if(o!==void 0&&(a=""+o),i.key!==void 0&&(a=""+i.key),"key"in i){o={};for(var l in i)l!=="key"&&(o[l]=i[l])}else o=i;return i=o.ref,{$$typeof:d,type:r,key:a,ref:i!==void 0?i:null,props:o}}return S.Fragment=t,S.jsx=n,S.jsxs=n,S}var R={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,12 +14,12 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var N;function J(){return N||(N=1,process.env.NODE_ENV!=="production"&&function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ae?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case v:return"Fragment";case $:return"Profiler";case x:return"StrictMode";case ne:return"Suspense";case ie:return"SuspenseList";case se:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case _:return"Portal";case te:return e.displayName||"Context";case ee:return(e._context.displayName||"Context")+".Consumer";case re:var s=e.render;return e=e.displayName,e||(e=s.displayName||s.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case oe:return s=e.displayName||null,s!==null?s:l(e.type)||"Memo";case O:s=e._payload,e=e._init;try{return l(e(s))}catch{}}return null}function t(e){return""+e}function r(e){try{t(e);var s=!1}catch{s=!0}if(s){s=console;var a=s.error,d=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(s,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",d),t(e)}}function n(e){if(e===v)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===O)return"<...>";try{var s=l(e);return s?"<"+s+">":"<...>"}catch{return"<...>"}}function i(){var e=D.A;return e===null?null:e.getOwner()}function o(){return Error("react-stack-top-frame")}function c(e){if(K.call(e,"key")){var s=Object.getOwnPropertyDescriptor(e,"key").get;if(s&&s.isReactWarning)return!1}return e.key!==void 0}function f(e,s){function a(){Y||(Y=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",s))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function w(){var e=l(this.type);return F[e]||(F[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function R(e,s,a,d,P,I){var u=a.ref;return e={$$typeof:y,type:e,key:s,props:a,_owner:d},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:w}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:I}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function p(e,s,a,d,P,I){var u=s.children;if(u!==void 0)if(d)if(le(u)){for(d=0;d<u.length;d++)m(u[d]);Object.freeze&&Object.freeze(u)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else m(u);if(K.call(s,"key")){u=l(e);var T=Object.keys(s).filter(function(ce){return ce!=="key"});d=0<T.length?"{key: someKey, "+T.join(": ..., ")+": ...}":"{key: someKey}",V[u+d]||(T=0<T.length?"{"+T.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var U;function G(){return U||(U=1,process.env.NODE_ENV!=="production"&&function(){function d(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ae?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case w:return"Fragment";case C:return"Profiler";case E:return"StrictMode";case re:return"Suspense";case ie:return"SuspenseList";case se:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case k:return"Portal";case te:return e.displayName||"Context";case ee:return(e._context.displayName||"Context")+".Consumer";case ne:var s=e.render;return e=e.displayName,e||(e=s.displayName||s.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case oe:return s=e.displayName||null,s!==null?s:d(e.type)||"Memo";case D:s=e._payload,e=e._init;try{return d(e(s))}catch{}}return null}function t(e){return""+e}function n(e){try{t(e);var s=!1}catch{s=!0}if(s){s=console;var c=s.error,m=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return c.call(s,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",m),t(e)}}function r(e){if(e===w)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===D)return"<...>";try{var s=d(e);return s?"<"+s+">":"<...>"}catch{return"<...>"}}function i(){var e=L.A;return e===null?null:e.getOwner()}function o(){return Error("react-stack-top-frame")}function a(e){if(W.call(e,"key")){var s=Object.getOwnPropertyDescriptor(e,"key").get;if(s&&s.isReactWarning)return!1}return e.key!==void 0}function l(e,s){function c(){K||(K=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",s))}c.isReactWarning=!0,Object.defineProperty(e,"key",{get:c,configurable:!0})}function x(){var e=d(this.type);return Y[e]||(Y[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function v(e,s,c,m,P,j){var h=c.ref;return e={$$typeof:y,type:e,key:s,props:c,_owner:m},(h!==void 0?h:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:x}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:j}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function u(e,s,c,m,P,j){var h=s.children;if(h!==void 0)if(m)if(le(h)){for(m=0;m<h.length;m++)f(h[m]);Object.freeze&&Object.freeze(h)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else f(h);if(W.call(s,"key")){h=d(e);var T=Object.keys(s).filter(function(ce){return ce!=="key"});m=0<T.length?"{key: someKey, "+T.join(": ..., ")+": ...}":"{key: someKey}",B[h+m]||(T=0<T.length?"{"+T.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,d,u,T,u),V[u+d]=!0)}if(u=null,a!==void 0&&(r(a),u=""+a),c(s)&&(r(s.key),u=""+s.key),"key"in s){a={};for(var L in s)L!=="key"&&(a[L]=s[L])}else a=s;return u&&f(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),R(e,u,a,i(),P,I)}function m(e){b(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===O&&(e._payload.status==="fulfilled"?b(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function b(e){return typeof e=="object"&&e!==null&&e.$$typeof===y}var g=h,y=Symbol.for("react.transitional.element"),_=Symbol.for("react.portal"),v=Symbol.for("react.fragment"),x=Symbol.for("react.strict_mode"),$=Symbol.for("react.profiler"),ee=Symbol.for("react.consumer"),te=Symbol.for("react.context"),re=Symbol.for("react.forward_ref"),ne=Symbol.for("react.suspense"),ie=Symbol.for("react.suspense_list"),oe=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),se=Symbol.for("react.activity"),ae=Symbol.for("react.client.reference"),D=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,K=Object.prototype.hasOwnProperty,le=Array.isArray,j=console.createTask?console.createTask:function(){return null};g={react_stack_bottom_frame:function(e){return e()}};var Y,F={},W=g.react_stack_bottom_frame.bind(g,o)(),H=j(n(o)),V={};k.Fragment=v,k.jsx=function(e,s,a){var d=1e4>D.recentlyCreatedOwnerStacks++;return p(e,s,a,!1,d?Error("react-stack-top-frame"):W,d?j(n(e)):H)},k.jsxs=function(e,s,a){var d=1e4>D.recentlyCreatedOwnerStacks++;return p(e,s,a,!0,d?Error("react-stack-top-frame"):W,d?j(n(e)):H)}}()),k}process.env.NODE_ENV==="production"?A.exports=G():A.exports=J();var M=A.exports;class q{constructor(t){if(this.iframe=null,this.messageListener=null,this.containerElement=null,this.config=t,this.iframeUrl=t.iframeUrl||"http://localhost:3000/iframe/checkout",this.environment=this.getEnvironmentFromApiKey(t.apiKey||""),this.usePopup=!t.container,t.container)if(typeof t.container=="string"){if(this.containerElement=document.querySelector(t.container),!this.containerElement)throw new Error(`Container not found: ${t.container}`)}else this.containerElement=t.container}init(){this.iframe||(this.createIframe(),this.addMessageListener())}createIframe(){const t=new URL(this.iframeUrl);this.config.apiKey&&t.searchParams.set("apiKey",this.config.apiKey),this.config.config?.paymentId&&t.searchParams.set("paymentId",this.config.config.paymentId);const r=t.toString();if(this.usePopup){const n=document.createElement("div");n.id="inflowpay-sdk-overlay",n.style.cssText=`
+  <%s key={someKey} {...props} />`,m,h,T,h),B[h+m]=!0)}if(h=null,c!==void 0&&(n(c),h=""+c),a(s)&&(n(s.key),h=""+s.key),"key"in s){c={};for(var M in s)M!=="key"&&(c[M]=s[M])}else c=s;return h&&l(c,typeof e=="function"?e.displayName||e.name||"Unknown":e),v(e,h,c,i(),P,j)}function f(e){b(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===D&&(e._payload.status==="fulfilled"?b(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function b(e){return typeof e=="object"&&e!==null&&e.$$typeof===y}var p=g,y=Symbol.for("react.transitional.element"),k=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),E=Symbol.for("react.strict_mode"),C=Symbol.for("react.profiler"),ee=Symbol.for("react.consumer"),te=Symbol.for("react.context"),ne=Symbol.for("react.forward_ref"),re=Symbol.for("react.suspense"),ie=Symbol.for("react.suspense_list"),oe=Symbol.for("react.memo"),D=Symbol.for("react.lazy"),se=Symbol.for("react.activity"),ae=Symbol.for("react.client.reference"),L=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,le=Array.isArray,I=console.createTask?console.createTask:function(){return null};p={react_stack_bottom_frame:function(e){return e()}};var K,Y={},$=p.react_stack_bottom_frame.bind(p,o)(),H=I(r(o)),B={};R.Fragment=w,R.jsx=function(e,s,c){var m=1e4>L.recentlyCreatedOwnerStacks++;return u(e,s,c,!1,m?Error("react-stack-top-frame"):$,m?I(r(e)):H)},R.jsxs=function(e,s,c){var m=1e4>L.recentlyCreatedOwnerStacks++;return u(e,s,c,!0,m?Error("react-stack-top-frame"):$,m?I(r(e)):H)}}()),R}process.env.NODE_ENV==="production"?A.exports=V():A.exports=G();var z=A.exports;class J{constructor(t){if(this.iframe=null,this.messageListener=null,this.containerElement=null,this.config=t,this.iframeUrl=t.iframeUrl||"http://localhost:3000/iframe/checkout",this.environment=this.getEnvironmentFromApiKey(t.apiKey||""),this.usePopup=!t.container,t.container)if(typeof t.container=="string"){if(this.containerElement=document.querySelector(t.container),!this.containerElement)throw new Error(`Container not found: ${t.container}`)}else this.containerElement=t.container}init(){this.iframe||(this.createIframe(),this.addMessageListener())}createIframe(){const t=new URL(this.iframeUrl);this.config.apiKey&&t.searchParams.set("apiKey",this.config.apiKey),this.config.config?.paymentId&&t.searchParams.set("paymentId",this.config.config.paymentId);const n=t.toString();if(this.usePopup){const r=document.createElement("div");r.id="inflowpay-sdk-overlay",r.style.cssText=`
         position: fixed;
         top: 0;
         left: 0;
@@ -54,19 +54,109 @@ React keys must be passed directly to JSX without using spread:
         display: flex;
         align-items: center;
         justify-content: center;
-      `,o.onclick=()=>this.close(),this.iframe=document.createElement("iframe"),this.iframe.src=r,this.iframe.style.cssText=`
+      `,o.onclick=()=>this.close(),this.iframe=document.createElement("iframe"),this.iframe.src=n,this.iframe.style.cssText=`
         width: 100%;
         height: 100%;
         border: none;
         border-radius: 8px;
-      `,this.iframe.setAttribute("allow","payment"),i.appendChild(o),i.appendChild(this.iframe),n.appendChild(i),document.body.appendChild(n),n.addEventListener("click",c=>{c.target===n&&this.close()})}else{if(!this.containerElement)throw new Error("Container element is required for inline mode");if(this.containerElement.innerHTML="",this.containerElement instanceof HTMLElement){const o=this.containerElement.getAttribute("style")||"";o.includes("min-height")||(this.containerElement.style.minHeight="175px"),o.includes("position")||(this.containerElement.style.position="relative"),o.includes("overflow")||(this.containerElement.style.overflow="hidden")}this.iframe=document.createElement("iframe"),this.iframe.src=r;const n=this.config.config?.style?.fillParent?"100%":"344px",i=this.config.config?.style?.fillParent?"none":"100%";this.iframe.style.cssText=`
-        width: ${n};
+      `,this.iframe.setAttribute("allow","payment"),i.appendChild(o),i.appendChild(this.iframe),r.appendChild(i),document.body.appendChild(r),this.showLoader(i),r.addEventListener("click",a=>{a.target===r&&this.close()})}else{if(!this.containerElement)throw new Error("Container element is required for inline mode");if(this.containerElement.innerHTML="",this.containerElement instanceof HTMLElement){const o=this.containerElement.getAttribute("style")||"";o.includes("min-height")||(this.containerElement.style.minHeight="196px"),o.includes("position")||(this.containerElement.style.position="relative"),o.includes("overflow")||(this.containerElement.style.overflow="hidden")}this.iframe=document.createElement("iframe"),this.iframe.src=n;const r=this.config.config?.style?.fillParent?"100%":"344px",i=this.config.config?.style?.fillParent?"none":"100%";this.iframe.style.cssText=`
+        width: ${r};
         max-width: ${i};
-        height: 100%;
-        min-height: 175px;
+        height: 196px;
+        min-height: 196px;
         border: none;
         display: block;
-      `,this.iframe.setAttribute("allow","payment"),this.containerElement.appendChild(this.iframe)}}addMessageListener(){this.messageListener=t=>{const r=new URL(this.iframeUrl).origin;let i=t.origin===r;if(i||((this.environment==="sandbox"||this.environment==="development")&&(i=(t.origin.includes("localhost")||t.origin.includes("127.0.0.1"))&&(r.includes("localhost")||r.includes("127.0.0.1"))),i||(i=t.origin==="https://dev.api.inflowpay.com"||t.origin==="https://pre-prod.api.inflowpay.xyz"||t.origin==="https://api.inflowpay.xyz")),!i){this.config.debug&&console.warn("[SDK] Rejected message from unauthorized origin:",t.origin);return}const o=t.data;if(!(!o||!o.type))switch(o.type){case"iframe-ready":this.sendConfigToIframe();break;case"close":this.close();break;case"success":this.config.onSuccess&&this.config.onSuccess(o.data);break;case"error":this.config.onError&&this.config.onError(o.data);break;case"3ds-required":this.config.debug&&console.log("[SDK] Received 3DS request:",o.threeDsSessionUrl),o.threeDsSessionUrl?(this.config.debug&&console.log("[SDK] Opening 3DS modal..."),this.open3DSModal(o.threeDsSessionUrl).then(c=>{if(this.config.debug&&console.log("[SDK] 3DS modal closed, result:",c),this.iframe&&this.iframe.contentWindow){const f=this.getTargetOrigin();this.iframe.contentWindow.postMessage({type:"3ds-result",success:c,paymentId:o.paymentId||this.config.config?.paymentId},f)}})):this.config.debug&&console.error("[SDK] 3DS required but no threeDsSessionUrl provided");break;default:this.config.debug&&console.log("SDK: Received message:",o)}},window.addEventListener("message",this.messageListener)}sendConfigToIframe(){if(!this.iframe||!this.iframe.contentWindow){this.iframe&&(this.iframe.onload=()=>{this.sendConfigToIframe()});return}const t={type:"sdkData",config:{...this.config.config||{},paymentId:this.config.config?.paymentId},data:{apiKey:this.config.apiKey}},r=this.getTargetOrigin();this.iframe.contentWindow.postMessage(t,r)}close(){if(this.config.onClose&&this.config.onClose(),this.messageListener&&(window.removeEventListener("message",this.messageListener),this.messageListener=null),this.usePopup){const t=document.getElementById("inflowpay-sdk-overlay");t&&t.remove()}else this.containerElement&&this.iframe&&this.containerElement.removeChild(this.iframe);this.iframe=null}open3DSModal(t){return this.config.debug&&console.log("[SDK] open3DSModal called with URL:",t),new Promise(r=>{const n=document.createElement("div");n.id="inflowpay-3ds-overlay",n.style.cssText=`
+        transition: height 0.2s ease;
+      `,this.iframe.setAttribute("allow","payment"),this.containerElement.appendChild(this.iframe),this.showLoader(this.containerElement)}}addMessageListener(){this.messageListener=t=>{const n=new URL(this.iframeUrl).origin;let i=t.origin===n;if(i||((this.environment==="sandbox"||this.environment==="development")&&(i=(t.origin.includes("localhost")||t.origin.includes("127.0.0.1"))&&(n.includes("localhost")||n.includes("127.0.0.1"))),i||(i=t.origin==="https://dev.api.inflowpay.com"||t.origin==="https://pre-prod.api.inflowpay.xyz"||t.origin==="https://api.inflowpay.xyz")),!i){this.config.debug&&console.warn("[SDK] Rejected message from unauthorized origin:",t.origin);return}const o=t.data;if(!(!o||!o.type))switch(o.type){case"iframe-ready":this.hideLoader(),this.sendConfigToIframe();break;case"content-height":if(o.height&&this.iframe){const a=Math.max(o.height,196);this.iframe.style.height=`${a}px`,this.containerElement&&(this.containerElement.style.minHeight=`${a}px`)}break;case"close":this.close();break;case"success":this.config.onSuccess&&this.config.onSuccess(o.data);break;case"error":this.config.onError&&this.config.onError(o.data);break;case"3ds-required":this.config.debug&&console.log("[SDK] Received 3DS request:",o.threeDsSessionUrl),o.threeDsSessionUrl?(this.config.debug&&console.log("[SDK] Opening 3DS modal..."),this.open3DSModal(o.threeDsSessionUrl).then(a=>{if(this.config.debug&&console.log("[SDK] 3DS modal closed, result:",a),this.iframe&&this.iframe.contentWindow){const l=this.getTargetOrigin();this.iframe.contentWindow.postMessage({type:"3ds-result",success:a,paymentId:o.paymentId||this.config.config?.paymentId},l)}})):this.config.debug&&console.error("[SDK] 3DS required but no threeDsSessionUrl provided");break;default:this.config.debug&&console.log("SDK: Received message:",o)}},window.addEventListener("message",this.messageListener)}sendConfigToIframe(){if(!this.iframe||!this.iframe.contentWindow){this.iframe&&(this.iframe.onload=()=>{this.sendConfigToIframe()});return}const t={type:"sdkData",config:{...this.config.config||{},paymentId:this.config.config?.paymentId},data:{apiKey:this.config.apiKey}},n=this.getTargetOrigin();this.iframe.contentWindow.postMessage(t,n)}showLoader(t){this.iframe&&(this.iframe.style.display="none");const n=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches,r=n?"#2d2d2d":"#F5F5F5",i=n?"#3d3d3d":"#E5E5E5",a=`linear-gradient(90deg, ${i} 25%, ${n?"#4d4d4d":"#F0F0F0"} 50%, ${i} 75%)`,l=document.createElement("div");l.id="inflowpay-loader";const x=this.config.config?.style?.fillParent?"100%":"344px";l.style.cssText=`
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1000;
+      padding: 20px;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    `;const v=document.createElement("div");v.style.cssText=`
+      width: ${x};
+      max-width: 100%;
+      margin: 0 auto;
+      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    `;const u=document.createElement("div");u.style.cssText=`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      background-color: ${r};
+      padding: 8px;
+      border-radius: 8px;
+      margin-bottom: 20px;
+    `;const f=document.createElement("div");f.className="inflowpay-skeleton",f.style.cssText=`
+      flex: 1;
+      min-width: 0;
+      height: 32px;
+      border-radius: 6px;
+      background: ${a};
+      background-size: 200% 100%;
+      animation: inflowpay-shimmer 1.5s infinite;
+    `;const b=document.createElement("div");b.className="inflowpay-skeleton",b.style.cssText=`
+      width: 21.5%;
+      flex-shrink: 0;
+      height: 32px;
+      border-radius: 6px;
+      background: ${a};
+      background-size: 200% 100%;
+      animation: inflowpay-shimmer 1.5s infinite;
+    `;const p=document.createElement("div");p.className="inflowpay-skeleton",p.style.cssText=`
+      width: 17.5%;
+      flex-shrink: 0;
+      height: 32px;
+      border-radius: 6px;
+      background: ${a};
+      background-size: 200% 100%;
+      animation: inflowpay-shimmer 1.5s infinite;
+    `,u.appendChild(f),u.appendChild(b),u.appendChild(p);const y=document.createElement("div");y.className="inflowpay-skeleton",y.style.cssText=`
+      width: 100%;
+      height: 42px;
+      border-radius: 8px;
+      background: ${a};
+      background-size: 200% 100%;
+      animation: inflowpay-shimmer 1.5s infinite;
+      margin-bottom: 16px;
+    `;const k=document.createElement("div");k.style.cssText=`
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+      width: 100%;
+      margin-top: 16px;
+    `;const w=document.createElement("div");w.className="inflowpay-skeleton",w.style.cssText=`
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: ${a};
+      background-size: 200% 100%;
+      animation: inflowpay-shimmer 1.5s infinite;
+    `;const E=document.createElement("div");if(E.className="inflowpay-skeleton",E.style.cssText=`
+      width: 80%;
+      height: 16px;
+      border-radius: 4px;
+      background: ${a};
+      background-size: 200% 100%;
+      animation: inflowpay-shimmer 1.5s infinite;
+    `,k.appendChild(w),k.appendChild(E),v.appendChild(u),v.appendChild(y),v.appendChild(k),l.appendChild(v),!document.getElementById("inflowpay-loader-styles")){const C=document.createElement("style");C.id="inflowpay-loader-styles",C.textContent=`
+        @keyframes inflowpay-shimmer {
+          0% {
+            background-position: -200% 0;
+          }
+          100% {
+            background-position: 200% 0;
+          }
+        }
+      `,document.head.appendChild(C)}t.appendChild(l)}hideLoader(){const t=document.getElementById("inflowpay-loader");t&&t.remove(),this.iframe&&(this.iframe.style.display="")}close(){if(this.config.onClose&&this.config.onClose(),this.hideLoader(),this.messageListener&&(window.removeEventListener("message",this.messageListener),this.messageListener=null),this.usePopup){const t=document.getElementById("inflowpay-sdk-overlay");t&&t.remove()}else this.containerElement&&(this.containerElement.innerHTML="");this.iframe=null}open3DSModal(t){return this.config.debug&&console.log("[SDK] open3DSModal called with URL:",t),new Promise(n=>{const r=document.createElement("div");r.id="inflowpay-3ds-overlay",r.style.cssText=`
         position: fixed;
         top: 0;
         left: 0;
@@ -97,13 +187,13 @@ React keys must be passed directly to JSX without using spread:
       `,o.innerHTML=`
         <h3 style="margin: 0; font-size: 18px; font-weight: 600;">Secure Payment Authentication</h3>
         <button id="inflowpay-3ds-close" style="background: none; border: none; font-size: 24px; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: #333;">×</button>
-      `;const c=document.createElement("div");c.style.cssText=`
+      `;const a=document.createElement("div");a.style.cssText=`
         flex: 1;
         position: relative;
         overflow: hidden;
-      `;const f=document.createElement("iframe");f.src=t,f.style.cssText=`
+      `;const l=document.createElement("iframe");l.src=t,l.style.cssText=`
         width: 100%;
         height: 100%;
         border: none;
-      `,f.setAttribute("allow","payment"),f.setAttribute("sandbox","allow-forms allow-scripts allow-same-origin allow-popups"),c.appendChild(f),i.appendChild(o),i.appendChild(c),n.appendChild(i),document.body.appendChild(n);const w=n.querySelector("#inflowpay-3ds-close"),R=()=>{n.remove(),window.removeEventListener("message",p),r(!1)};w?.addEventListener("click",R);const p=m=>{if(!m.data)return;const b=["https://dev.api.inflowpay.com","https://pre-prod.api.inflowpay.xyz","https://api.inflowpay.xyz"];if(this.environment==="sandbox"||this.environment==="development"){if(!(m.origin.includes("localhost")||m.origin.includes("127.0.0.1"))){if(!b.includes(m.origin)){this.config.debug&&console.warn("[SDK] Rejected 3DS message from unauthorized origin:",m.origin);return}}}else if(!b.includes(m.origin)){this.config.debug&&console.warn("[SDK] Rejected 3DS message from unauthorized origin:",m.origin);return}const g=m.data,y=g.type==="THREE_DS_COMPLETE"||g.type==="3ds-complete",_=g.status==="success",v=g.status==="failed"||g.status==="failure";if(y&&_){n.remove(),window.removeEventListener("message",p),r(!0);return}if(_&&!y){n.remove(),window.removeEventListener("message",p),r(!0);return}if(y&&v||g.type==="3ds-failed"||v){n.remove(),window.removeEventListener("message",p),r(!1);return}};window.addEventListener("message",p)})}getTargetOrigin(){return this.environment==="production"||this.environment==="preprod"?new URL(this.iframeUrl).origin:"*"}getEnvironmentFromApiKey(t){return!t||t.includes("_local_")||t.startsWith("inflow_local_")?"sandbox":t.includes("_prod_")&&!t.includes("_preprod_")?"production":t.includes("_preprod_")||t.startsWith("inflow_preprod_")?"preprod":t.includes("_dev_")?"development":"sandbox"}destroy(){this.close()}}let B=class{constructor(t,r){this.mounted=!1;let n;if(typeof r.container=="string"){if(n=document.querySelector(r.container),!n)throw new Error(`Container not found: ${r.container}`)}else n=r.container;this.container=n,this.sdk=new q({iframeUrl:t.iframeUrl,apiKey:t.apiKey,container:this.container,config:{paymentId:r.paymentId,...r.style&&{style:r.style},...r.buttonText&&{buttonText:r.buttonText},...r.placeholders&&{placeholders:r.placeholders}},onSuccess:i=>{r.onComplete&&r.onComplete({status:i?.data?.transaction?.status||"CHECKOUT_SUCCESS",data:i})},onError:i=>{r.onError?r.onError(i):r.onComplete&&r.onComplete({status:"PAYMENT_FAILED",error:i})},onClose:()=>{r.onClose&&r.onClose()}})}mount(){if(this.mounted)throw new Error("CardElement is already mounted");this.sdk.init(),this.mounted=!0}destroy(){this.mounted&&(this.sdk.destroy(),this.mounted=!1)}};class z{constructor(t){if(!t.apiKey||typeof t.apiKey!="string")throw new Error("API key is required");let r=t.iframeUrl;const n=this.getEnvironmentFromApiKey(t.apiKey);r||(n==="production"?r="https://api.inflowpay.xyz/iframe/checkout":n==="preprod"?r="https://pre-prod.api.inflowpay.xyz/iframe/checkout":n==="development"?r="https://dev.api.inflowpay.com/iframe/checkout":r="http://localhost:3000/iframe/checkout");const i=t.debug??!1;i&&(n==="production"||n==="preprod")&&console.warn("[InflowPay SDK] Debug mode is not allowed in production/pre-prod environments. Debug mode disabled.");const o=i&&(n==="sandbox"||n==="development");this.config={apiKey:t.apiKey,iframeUrl:r,timeout:t.timeout??3e4,debug:o}}createCardElement(t){return new B(this.config,t)}getIframeUrl(){return this.config.iframeUrl}getApiKey(){return this.config.apiKey}getEnvironmentFromApiKey(t){return t.includes("_local_")||t.startsWith("inflow_local_")?"sandbox":t.includes("_prod_")&&!t.includes("_preprod_")?"production":t.includes("_preprod_")||t.startsWith("inflow_preprod_")?"preprod":t.includes("_dev_")?"development":"sandbox"}}const C=h.createContext(null);function X({config:l,children:t}){const[r]=h.useState(()=>{const n={apiKey:l.apiKey,iframeUrl:l.iframeUrl,timeout:l.timeout,debug:l.debug};return new z(n)});return M.jsx(C.Provider,{value:{sdk:r},children:t})}function Z(){const l=h.useContext(C);if(!l)throw new Error("useInflowPay must be used within InflowPayProvider");return l.sdk}function Q({paymentId:l,onReady:t,onChange:r,onComplete:n,onError:i,style:o,buttonText:c,placeholders:f,config:w}){const R=h.useContext(C),p=h.useRef(null),m=h.useRef(null),[b,g]=h.useState(!1),y=R?.sdk||(w?new z({apiKey:w.apiKey,iframeUrl:w.iframeUrl,timeout:w.timeout,debug:w.debug}):null);if(!y)throw new Error("CardElement must be used within InflowPayProvider or have a config prop");return h.useEffect(()=>{if(!p.current)return;p.current.id||(p.current.id=`inflowpay-card-element-${Date.now()}`);const _={container:p.current,paymentId:l,...o&&{style:o},...c&&{buttonText:c},...f&&{placeholders:f},onComplete:x=>{n&&n(x)},onError:x=>{i?i(x):n&&n({status:"PAYMENT_FAILED",error:x})},onClose:()=>{}},v=y.createCardElement(_);if(m.current=v,v.mount(),g(!0),t){const x=setTimeout(()=>{t()},100);return()=>clearTimeout(x)}},[l,y,b,n,i,t,o,c,f]),h.useEffect(()=>{r&&b&&r({complete:!1})},[b,r]),h.useEffect(()=>()=>{m.current&&(m.current.destroy(),m.current=null)},[]),M.jsx("div",{ref:p,style:{width:o?.fillParent?"100%":"344px"}})}E.CardElement=Q,E.InflowPayProvider=X,E.useInflowPay=Z,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});
+      `,l.setAttribute("allow","payment"),l.setAttribute("sandbox","allow-forms allow-scripts allow-same-origin allow-popups"),a.appendChild(l),i.appendChild(o),i.appendChild(a),r.appendChild(i),document.body.appendChild(r);const x=r.querySelector("#inflowpay-3ds-close"),v=()=>{r.remove(),window.removeEventListener("message",u),n(!1)};x?.addEventListener("click",v);const u=f=>{if(!f.data)return;const b=["https://dev.api.inflowpay.com","https://pre-prod.api.inflowpay.xyz","https://api.inflowpay.xyz"];if(this.environment==="sandbox"||this.environment==="development"){if(!(f.origin.includes("localhost")||f.origin.includes("127.0.0.1"))){if(!b.includes(f.origin)){this.config.debug&&console.warn("[SDK] Rejected 3DS message from unauthorized origin:",f.origin);return}}}else if(!b.includes(f.origin)){this.config.debug&&console.warn("[SDK] Rejected 3DS message from unauthorized origin:",f.origin);return}const p=f.data,y=p.type==="THREE_DS_COMPLETE"||p.type==="3ds-complete",k=p.status==="success",w=p.status==="failed"||p.status==="failure";if(y&&k){r.remove(),window.removeEventListener("message",u),n(!0);return}if(k&&!y){r.remove(),window.removeEventListener("message",u),n(!0);return}if(y&&w||p.type==="3ds-failed"||w){r.remove(),window.removeEventListener("message",u),n(!1);return}};window.addEventListener("message",u)})}getTargetOrigin(){return this.environment==="production"||this.environment==="preprod"?new URL(this.iframeUrl).origin:"*"}getEnvironmentFromApiKey(t){return!t||t.includes("_local_")||t.startsWith("inflow_local_")?"sandbox":t.includes("_prod_")&&!t.includes("_preprod_")?"production":t.includes("_preprod_")||t.startsWith("inflow_preprod_")?"preprod":t.includes("_dev_")?"development":"sandbox"}destroy(){this.close()}}let q=class{constructor(t,n){this.mounted=!1;let r;if(typeof n.container=="string"){if(r=document.querySelector(n.container),!r)throw new Error(`Container not found: ${n.container}`)}else r=n.container;this.container=r,this.sdk=new J({iframeUrl:t.iframeUrl,apiKey:t.apiKey,container:this.container,config:{paymentId:n.paymentId,...n.style&&{style:n.style},...n.buttonText&&{buttonText:n.buttonText},...n.placeholders&&{placeholders:n.placeholders}},onSuccess:i=>{n.onComplete&&n.onComplete({status:i?.data?.transaction?.status||"CHECKOUT_SUCCESS",data:i})},onError:i=>{n.onError?n.onError(i):n.onComplete&&n.onComplete({status:"PAYMENT_FAILED",error:i})},onClose:()=>{n.onClose&&n.onClose()}})}mount(){if(this.mounted)throw new Error("CardElement is already mounted");this.sdk.init(),this.mounted=!0}destroy(){this.mounted&&(this.sdk.destroy(),this.mounted=!1)}};class F{constructor(t){if(!t.apiKey||typeof t.apiKey!="string")throw new Error("API key is required");let n=t.iframeUrl;const r=this.getEnvironmentFromApiKey(t.apiKey);n||(r==="production"?n="https://api.inflowpay.xyz/iframe/checkout":r==="preprod"?n="https://pre-prod.api.inflowpay.xyz/iframe/checkout":r==="development"?n="https://dev.api.inflowpay.com/iframe/checkout":n="http://localhost:3000/iframe/checkout");const i=t.debug??!1;i&&(r==="production"||r==="preprod")&&console.warn("[InflowPay SDK] Debug mode is not allowed in production/pre-prod environments. Debug mode disabled.");const o=i&&(r==="sandbox"||r==="development");this.config={apiKey:t.apiKey,iframeUrl:n,timeout:t.timeout??3e4,debug:o}}createCardElement(t){return new q(this.config,t)}getIframeUrl(){return this.config.iframeUrl}getApiKey(){return this.config.apiKey}getEnvironmentFromApiKey(t){return t.includes("_local_")||t.startsWith("inflow_local_")?"sandbox":t.includes("_prod_")&&!t.includes("_preprod_")?"production":t.includes("_preprod_")||t.startsWith("inflow_preprod_")?"preprod":t.includes("_dev_")?"development":"sandbox"}}const O=g.createContext(null);function X({config:d,children:t}){const[n]=g.useState(()=>{const r={apiKey:d.apiKey,iframeUrl:d.iframeUrl,timeout:d.timeout,debug:d.debug};return new F(r)});return z.jsx(O.Provider,{value:{sdk:n},children:t})}function Z(){const d=g.useContext(O);if(!d)throw new Error("useInflowPay must be used within InflowPayProvider");return d.sdk}function Q({paymentId:d,onReady:t,onChange:n,onComplete:r,onError:i,style:o,buttonText:a,placeholders:l,config:x}){const v=g.useContext(O),u=g.useRef(null),f=g.useRef(null),[b,p]=g.useState(!1),y=v?.sdk||(x?new F({apiKey:x.apiKey,iframeUrl:x.iframeUrl,timeout:x.timeout,debug:x.debug}):null);if(!y)throw new Error("CardElement must be used within InflowPayProvider or have a config prop");return g.useEffect(()=>{if(!u.current)return;u.current.id||(u.current.id=`inflowpay-card-element-${Date.now()}`);const k={container:u.current,paymentId:d,...o&&{style:o},...a&&{buttonText:a},...l&&{placeholders:l},onComplete:E=>{r&&r(E)},onError:E=>{i?i(E):r&&r({status:"PAYMENT_FAILED",error:E})},onClose:()=>{}},w=y.createCardElement(k);if(f.current=w,w.mount(),p(!0),t){const E=setTimeout(()=>{t()},100);return()=>clearTimeout(E)}},[d,y,r,i,t,o,a,l]),g.useEffect(()=>{n&&b&&n({complete:!1})},[b,n]),g.useEffect(()=>()=>{f.current&&(f.current.destroy(),f.current=null)},[]),z.jsx("div",{ref:u,style:{width:o?.fillParent?"100%":"344px"}})}_.CardElement=Q,_.InflowPayProvider=X,_.useInflowPay=Z,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=react.umd.js.map