@inflow_pay/sdk 1.1.0 → 1.2.0-beta.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"payment-sdk-DqfuWSo1.mjs","names":[],"sources":["../src/types.ts","../src/react/index.tsx","../src/constants/sdk-constants.ts","../src/ui/styles.ts","../src/ui/loader-manager.ts","../src/ui/modal-manager.ts","../src/ui/overlay-manager.ts","../src/utils.ts","../src/sdk.ts","../src/card-element.ts","../src/payment-sdk.ts"],"sourcesContent":["/**\n * Type definitions for SDK v2\n */\n\n// ============================================================================\n// Locale Types\n// ============================================================================\n\nexport type Locale = 'en' | 'de' | 'es' | 'fr' | 'it' | 'nl' | 'pl' | 'pt';\n\n// ============================================================================\n// Style Types\n// ============================================================================\n\nexport type FontFamily =\n  | 'DM Sans'\n  | 'Inter'\n  | 'Poppins'\n  | 'Nunito'\n  | 'Work Sans'\n  | 'Manrope'\n  | 'Rubik'\n  | 'Karla'\n  | 'Figtree'\n  | 'Outfit'\n  | 'Space Grotesk'\n  | 'Urbanist';\n\nexport type FontWeight =\n  | 100\n  | 200\n  | 300\n  | 400\n  | 500\n  | 600\n  | 700\n  | 800\n  | 900\n  | 'normal'\n  | 'bold'\n  | 'lighter'\n  | 'bolder';\n\nexport type Opacity = number | string; \n\nexport interface InputContainerStyles {\n  backgroundColor?: string;\n  borderColor?: string;\n  borderEnabled?: boolean;\n  borderRadius?: string;\n}\n\nexport interface InputStyles {\n  backgroundColor?: string;\n  borderColor?: string;\n  borderEnabled?: boolean;\n  borderRadius?: string;\n  textColor?: string;\n  placeholderColor?: string;\n}\n\nexport interface ButtonBaseStyles {\n  backgroundColor?: string;\n  textColor?: string;\n  borderRadius?: string;\n  borderColor?: string;\n  borderEnabled?: boolean;\n  fontSize?: string;\n  fontWeight?: FontWeight;\n  opacity?: Opacity;\n}\n\nexport interface ButtonStyles extends ButtonBaseStyles {\n  hover?: ButtonBaseStyles;\n  disabled?: ButtonBaseStyles;\n  loaderColor?: string;\n}\n\nexport interface GeneralMessageStyles {\n  textColor?: string;\n  backgroundColor?: string;\n  borderEnabled?: boolean;\n  borderRadius?: string;\n  borderColor?: string;\n}\n\nexport interface SuccessUIStyles {\n  backgroundColor?: string;\n  primaryTextColor?: string;\n  secondaryTextColor?: string;\n}\n\nexport interface ThemeStyles {\n  inputContainer?: InputContainerStyles;\n  input?: InputStyles;\n  button?: ButtonStyles;\n  disclaimerColor?: string;\n  fieldErrorColor?: string;\n  generalError?: GeneralMessageStyles;\n  /** @deprecated generalSuccess was removed from the sdk; this has no effect. Will be removed in the next major version. */\n  generalSuccess?: GeneralMessageStyles;\n  successUI?: SuccessUIStyles;\n}\n\nexport interface CSSProperties {\n  fontFamily?: FontFamily;\n  fillParent?: boolean;\n  inputContainer?: InputContainerStyles;\n  input?: InputStyles;\n  button?: ButtonStyles;\n  disclaimerColor?: string;\n  fieldErrorColor?: string;\n  generalError?: GeneralMessageStyles;\n  /** @deprecated generalSuccess was removed from the sdk; this has no effect. Will be removed in the next major version. */\n  generalSuccess?: GeneralMessageStyles;\n  successUI?: SuccessUIStyles;\n  // Theme-specific overrides\n  dark?: ThemeStyles;\n}\n\n// ============================================================================\n// SDK Config Types\n// ============================================================================\n\nexport interface SDKConfig {\n  /** Public API key */\n  publicKey?: string;\n  /** Payment configuration */\n  config?: PaymentConfig;\n  /** Container element or selector where to mount the iframe (if not provided, creates a popup) */\n  container?: string | HTMLElement;\n  /** Locale for the UI. Defaults to 'en' */\n  locale?: Locale;\n  /** Callback when payment succeeds */\n  onSuccess?: (data: TransactionData) => void;\n  /** Callback when payment fails */\n  onError?: (error: any) => void;\n  /** Callback when user closes the payment modal */\n  onClose?: () => void;\n  /** Show default success UI after payment (default true). If false, only unmount iframe. */\n  showDefaultSuccessUI?: boolean;\n}\n\nexport interface PaymentConfig {\n  name?: string;\n  amount?: number;\n  currency?: string;\n  paymentId?: string;\n  /** ID of a CustomerPaymentMethodRequest – activates save-card mode in the iframe */\n  setupId?: string;\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  /** Show default success UI after payment (default true). If false, only unmount iframe. */\n  showDefaultSuccessUI?: boolean;\n  [key: string]: any;\n}\n\nexport interface IframeMessage {\n  type: 'sdkData' | 'success' | 'error' | 'close' | '3ds-required' | 'iframe-ready' | 'content-height' | '3ds-failed' | '3ds-success';\n  data?: any;\n  config?: PaymentConfig;\n  threeDsSessionUrl?: string; // URL for 3DS challenge when type is '3ds-required'\n  paymentId?: string; // Payment ID for payment flow\n  setupId?: string; // CustomerPaymentMethodRequest ID for save-card flow\n  sessionId?: string; // 3DS session ID when type is '3ds-completed'\n  success?: boolean; // 3DS result when type is '3ds-result'\n  height?: number; // Content height when type is 'content-height'\n}\n\nexport interface TransactionData {\n  transaction?: {\n    id: string;\n    amount: number;\n    currency: string;\n    status: string;\n    created_at: string;\n    [key: string]: any;\n  };\n  [key: string]: any;\n}\n\n// ============================================================================\n// Payment Result Types\n// ============================================================================\n\nexport enum PaymentResultStatus {\n  SUCCESS = 'SUCCESS',\n  FAILED = 'FAILED',\n}\n\nexport enum PaymentResultErrorCode {\n  THREE_DS_FAILED = 'THREE_DS_FAILED',\n  PAYMENT_PROCESSING_ERROR = 'PAYMENT_PROCESSING_ERROR',\n}\n\nexport interface PaymentError {\n  code: PaymentResultErrorCode;\n  message: string;\n  retryable: boolean;\n}\n\nexport interface PaymentResult {\n  status: PaymentResultStatus;\n  paymentId: string;\n  error?: PaymentError;\n}\n\nexport interface SaveCardResult {\n  status: PaymentResultStatus;\n  setupId: string;\n  error?: PaymentError;\n}\n\nexport interface CardElementState {\n  complete: boolean;\n}\n\n","/**\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 type { ReactNode } from 'react';\nimport { createContext, useContext, useEffect, useRef, useState } from 'react';\nimport type { CardElement as CardElementClass, CardElementOptions } from '../card-element';\nimport type { PaymentSDKConfig } from '../payment-sdk';\nimport { PaymentSDK } from '../payment-sdk';\nimport type {\n  CardElementState,\n  CSSProperties,\n  Locale,\n  PaymentError,\n  PaymentResult,\n  SaveCardResult,\n} from '../types';\nimport { PaymentResultStatus } from '../types';\n\nexport interface SDKConfig {\n  publicKey: string;\n  /** Locale for the payment UI. Defaults to 'en' */\n  locale?: Locale;\n}\n\nexport type {\n  CardElementState, PaymentError,\n  PaymentResult,\n  SaveCardResult,\n} from '../types';\n\nexport { PaymentResultErrorCode, PaymentResultStatus } from '../types';\n\nexport interface CardElementProps {\n  /** Payment ID for a payment transaction. Mutually exclusive with setupId. */\n  paymentId?: string;\n  /** CustomerPaymentMethodRequest ID for a save-card session. Mutually exclusive with paymentId. */\n  setupId?: string;\n  onReady?: () => void;\n  onChange?: (state: CardElementState) => void;\n  onComplete?: (result: PaymentResult | SaveCardResult) => 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  /** Show default success UI after completion (default true). If false, only unmount iframe. */\n  showDefaultSuccessUI?: boolean;\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      publicKey: config.publicKey,\n      locale: config.locale,\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(props: CardElementProps & { config?: SDKConfig }) {\n  const {\n    paymentId,\n    setupId,\n    onReady,\n    onChange,\n    onComplete,\n    onError,\n    style,\n    buttonText,\n    placeholders,\n    showDefaultSuccessUI,\n    config: propConfig,\n  } = props;\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    publicKey: propConfig.publicKey,\n    locale: propConfig.locale,\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      ...(setupId && { setupId }),\n      ...(style && { style }),\n      ...(buttonText && { buttonText }),\n      ...(placeholders && { placeholders }),\n      ...(showDefaultSuccessUI !== undefined && { showDefaultSuccessUI }),\n      onComplete: (result: PaymentResult | SaveCardResult) => {\n        if (onComplete) {\n          onComplete(result);\n        }\n      },\n      onError: (error) => {\n        if (onError) {\n          onError(error);\n        } else if (onComplete) {\n          if (setupId) {\n            onComplete({\n              status: PaymentResultStatus.FAILED,\n              setupId,\n              error,\n            });\n          } else {\n            onComplete({\n              status: PaymentResultStatus.FAILED,\n              paymentId: paymentId as string,\n              error,\n            });\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, setupId, sdk, onComplete, onError, onReady, style, buttonText, placeholders, showDefaultSuccessUI]);\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","/**\n * SDK Constants\n * Centralized constants for z-indices, dimensions, and configuration values\n */\n\nexport const Z_INDEX = {\n  OVERLAY: 999999,\n  MODAL: 1000000,\n  LOADER: 1000,\n} as const;\n\nexport const DIMENSIONS = {\n  MIN_HEIGHT: 196,\n  CONTAINER_MAX_WIDTH: '500px',\n  CONTAINER_WIDTH_PERCENT: '90%',\n  CONTAINER_HEIGHT_PERCENT: '90%',\n  CONTAINER_MAX_HEIGHT: '600px',\n  BUTTON_SIZE: 30,\n  DEFAULT_IFRAME_WIDTH: '344px',\n} as const;\n\nexport const ALLOWED_3DS_ORIGINS = [\n  'https://dev.api.inflowpay.xyz',\n  'https://pre-prod.api.inflowpay.xyz',\n  'https://api.inflowpay.xyz',\n] as const;\n\nexport const ELEMENT_IDS = {\n  OVERLAY: 'inflowpay-sdk-overlay',\n  LOADER: 'inflowpay-loader',\n  LOADER_STYLES: 'inflowpay-loader-styles',\n  THREE_DS_OVERLAY: 'inflowpay-3ds-overlay',\n  THREE_DS_CLOSE: 'inflowpay-3ds-close',\n} as const;\n\nexport const IFRAME_URLS = {\n  PRODUCTION: 'https://iframe.inflowpay.com/iframe/checkout',\n  PREPROD: 'https://preprod.iframe.inflowpay.com/iframe/checkout',\n  DEVELOPMENT: 'https://dev.iframe.inflowpay.com/iframe/checkout',\n  LOCAL: 'http://localhost:3010/iframe/checkout',\n} as const;\n","/**\n * UI Styles\n * Centralized CSS styles for SDK components\n */\n\nimport { Z_INDEX, DIMENSIONS } from '../constants/sdk-constants';\n\n/**\n * Color scheme for dark mode support\n */\nexport interface ColorScheme {\n  inputBgColor: string;\n  shimmerBase: string;\n  shimmerLight: string;\n}\n\n/**\n * Get color scheme based on dark mode preference\n */\nexport function getColorScheme(isDarkMode: boolean): ColorScheme {\n  return {\n    inputBgColor: isDarkMode ? '#2d2d2d' : '#F5F5F5',\n    shimmerBase: isDarkMode ? '#3d3d3d' : '#E5E5E5',\n    shimmerLight: isDarkMode ? '#4d4d4d' : '#F0F0F0',\n  };\n}\n\n/**\n * Get shimmer gradient for skeleton loader\n */\nexport function getShimmerGradient(colors: ColorScheme): string {\n  return `linear-gradient(90deg, ${colors.shimmerBase} 25%, ${colors.shimmerLight} 50%, ${colors.shimmerBase} 75%)`;\n}\n\n/**\n * Overlay styles for popup mode\n */\nexport function getOverlayStyles(): string {\n  return `\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: ${Z_INDEX.OVERLAY};\n  `;\n}\n\n/**\n * Container styles for popup mode\n */\nexport function getContainerStyles(): string {\n  return `\n    position: relative;\n    width: ${DIMENSIONS.CONTAINER_WIDTH_PERCENT};\n    max-width: ${DIMENSIONS.CONTAINER_MAX_WIDTH};\n    height: ${DIMENSIONS.CONTAINER_HEIGHT_PERCENT};\n    max-height: ${DIMENSIONS.CONTAINER_MAX_HEIGHT};\n    background: white;\n    border-radius: 8px;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  `;\n}\n\n/**\n * Close button styles\n */\nexport function getCloseButtonStyles(): string {\n  return `\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    width: ${DIMENSIONS.BUTTON_SIZE}px;\n    height: ${DIMENSIONS.BUTTON_SIZE}px;\n    border: none;\n    background: transparent;\n    font-size: 24px;\n    cursor: pointer;\n    z-index: ${Z_INDEX.MODAL};\n    color: #333;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `;\n}\n\n/**\n * Iframe styles for popup mode\n */\nexport function getPopupIframeStyles(): string {\n  return `\n    width: 100%;\n    height: 100%;\n    border: none;\n    border-radius: 8px;\n  `;\n}\n\n/**\n * Iframe styles for inline mode\n */\nexport function getInlineIframeStyles(fillParent: boolean): string {\n  const width = fillParent ? '100%' : DIMENSIONS.DEFAULT_IFRAME_WIDTH;\n  const maxWidth = fillParent ? 'none' : '100%';\n  \n  return `\n    width: ${width};\n    max-width: ${maxWidth};\n    height: ${DIMENSIONS.MIN_HEIGHT}px;\n    min-height: ${DIMENSIONS.MIN_HEIGHT}px;\n    border: none;\n    display: block;\n    transition: height 0.2s ease;\n  `;\n}\n\n/**\n * Loader container styles\n */\nexport function getLoaderContainerStyles(): string {\n  return `\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: ${Z_INDEX.LOADER};\n    padding: 20px;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  `;\n}\n\n/**\n * Skeleton card element styles\n */\nexport function getSkeletonCardStyles(fillParent: boolean): string {\n  const width = fillParent ? '100%' : DIMENSIONS.DEFAULT_IFRAME_WIDTH;\n  \n  return `\n    width: ${width};\n    max-width: 100%;\n    margin: 0 auto;\n  `;\n}\n\n/**\n * Input wrapper styles for skeleton loader\n */\nexport function getInputWrapStyles(bgColor: string): string {\n  return `\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    background-color: ${bgColor};\n    padding: 8px;\n    border-radius: 8px;\n    margin-bottom: 20px;\n  `;\n}\n\n/**\n * Skeleton element base styles\n */\nexport function getSkeletonBaseStyles(shimmerGradient: string): string {\n  return `\n    background: ${shimmerGradient};\n    background-size: 200% 100%;\n    animation: inflowpay-shimmer 1.5s infinite;\n  `;\n}\n\n/**\n * Card number skeleton styles\n */\nexport function getCardNumberSkeletonStyles(shimmerGradient: string): string {\n  return `\n    flex: 1;\n    min-width: 0;\n    height: 32px;\n    border-radius: 6px;\n    ${getSkeletonBaseStyles(shimmerGradient)}\n  `;\n}\n\n/**\n * Expiry skeleton styles\n */\nexport function getExpirySkeletonStyles(shimmerGradient: string): string {\n  return `\n    width: 21.5%;\n    flex-shrink: 0;\n    height: 32px;\n    border-radius: 6px;\n    ${getSkeletonBaseStyles(shimmerGradient)}\n  `;\n}\n\n/**\n * CVC skeleton styles\n */\nexport function getCvcSkeletonStyles(shimmerGradient: string): string {\n  return `\n    width: 17.5%;\n    flex-shrink: 0;\n    height: 32px;\n    border-radius: 6px;\n    ${getSkeletonBaseStyles(shimmerGradient)}\n  `;\n}\n\n/**\n * Button skeleton styles\n */\nexport function getButtonSkeletonStyles(shimmerGradient: string): string {\n  return `\n    width: 100%;\n    height: 42px;\n    border-radius: 8px;\n    ${getSkeletonBaseStyles(shimmerGradient)}\n    margin-bottom: 16px;\n  `;\n}\n\n/**\n * Disclaimer skeleton container styles\n */\nexport function getDisclaimerSkeletonStyles(): string {\n  return `\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    width: 100%;\n    margin-top: 16px;\n  `;\n}\n\n/**\n * Disclaimer icon skeleton styles\n */\nexport function getDisclaimerIconSkeletonStyles(shimmerGradient: string): string {\n  return `\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    ${getSkeletonBaseStyles(shimmerGradient)}\n  `;\n}\n\n/**\n * Disclaimer text skeleton styles\n */\nexport function getDisclaimerTextSkeletonStyles(shimmerGradient: string): string {\n  return `\n    width: 80%;\n    height: 16px;\n    border-radius: 4px;\n    ${getSkeletonBaseStyles(shimmerGradient)}\n  `;\n}\n\n/**\n * Shimmer animation keyframes\n */\nexport const SHIMMER_ANIMATION = `\n  @keyframes inflowpay-shimmer {\n    0% {\n      background-position: -200% 0;\n    }\n    100% {\n      background-position: 200% 0;\n    }\n  }\n`;\n\n/**\n * 3DS overlay styles\n */\nexport function get3DSOverlayStyles(): string {\n  return `\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: ${Z_INDEX.OVERLAY};\n  `;\n}\n\n/**\n * 3DS modal styles\n */\nexport function get3DSModalStyles(): string {\n  return `\n    position: relative;\n    width: ${DIMENSIONS.CONTAINER_WIDTH_PERCENT};\n    max-width: ${DIMENSIONS.CONTAINER_MAX_WIDTH};\n    height: ${DIMENSIONS.CONTAINER_HEIGHT_PERCENT};\n    max-height: ${DIMENSIONS.CONTAINER_MAX_HEIGHT};\n    background: white;\n    border-radius: 16px;\n    overflow: hidden;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n    display: flex;\n    flex-direction: column;\n  `;\n}\n\n/**\n * 3DS header styles\n */\nexport function get3DSHeaderStyles(): string {\n  return `\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 15px 20px;\n    border-bottom: 1px solid #e5e5e5;\n  `;\n}\n\n/**\n * 3DS content styles\n */\nexport function get3DSContentStyles(): string {\n  return `\n    flex: 1;\n    position: relative;\n    overflow-y: auto;\n    overflow-x: hidden;\n  `;\n}\n\n/**\n * 3DS iframe styles\n */\nexport function get3DSIframeStyles(): string {\n  return `\n    width: 100%;\n    height: 100%;\n    border: none;\n  `;\n}\n","/**\n * Loader Manager\n * Handles skeleton loading UI while iframe is initializing\n */\n\nimport { ELEMENT_IDS } from '../constants/sdk-constants';\nimport {\n  getColorScheme,\n  getShimmerGradient,\n  getLoaderContainerStyles,\n  getSkeletonCardStyles,\n  getInputWrapStyles,\n  getCardNumberSkeletonStyles,\n  getExpirySkeletonStyles,\n  getCvcSkeletonStyles,\n  getButtonSkeletonStyles,\n  getDisclaimerSkeletonStyles,\n  getDisclaimerIconSkeletonStyles,\n  getDisclaimerTextSkeletonStyles,\n  SHIMMER_ANIMATION,\n} from './styles';\n\nexport interface LoaderConfig {\n  fillParent?: boolean;\n}\n\nexport class LoaderManager {\n  private container: HTMLElement;\n  private config: LoaderConfig;\n  private loaderElement: HTMLElement | null = null;\n\n  constructor(container: HTMLElement, config: LoaderConfig = {}) {\n    this.container = container;\n    this.config = config;\n  }\n\n  /**\n   * Show skeleton loader\n   */\n  show(iframe?: HTMLIFrameElement): void {\n    // Hide iframe while loader is showing\n    if (iframe) {\n      iframe.style.display = 'none';\n    }\n\n    // Detect dark mode\n    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n    // Get color scheme\n    const colors = getColorScheme(isDarkMode);\n    const shimmerGradient = getShimmerGradient(colors);\n\n    // Create loader container\n    const loader = document.createElement('div');\n    loader.id = ELEMENT_IDS.LOADER;\n    loader.style.cssText = getLoaderContainerStyles();\n\n    // Create skeleton card element\n    const skeletonCard = document.createElement('div');\n    skeletonCard.style.cssText = getSkeletonCardStyles(this.config.fillParent || false);\n\n    // Create input wrapper\n    const inputWrap = document.createElement('div');\n    inputWrap.style.cssText = getInputWrapStyles(colors.inputBgColor);\n\n    // Create card number skeleton\n    const cardNumberSkeleton = document.createElement('div');\n    cardNumberSkeleton.className = 'inflowpay-skeleton';\n    cardNumberSkeleton.style.cssText = getCardNumberSkeletonStyles(shimmerGradient);\n\n    // Create expiry skeleton\n    const expirySkeleton = document.createElement('div');\n    expirySkeleton.className = 'inflowpay-skeleton';\n    expirySkeleton.style.cssText = getExpirySkeletonStyles(shimmerGradient);\n\n    // Create CVC skeleton\n    const cvcSkeleton = document.createElement('div');\n    cvcSkeleton.className = 'inflowpay-skeleton';\n    cvcSkeleton.style.cssText = getCvcSkeletonStyles(shimmerGradient);\n\n    // Assemble input wrapper\n    inputWrap.appendChild(cardNumberSkeleton);\n    inputWrap.appendChild(expirySkeleton);\n    inputWrap.appendChild(cvcSkeleton);\n\n    // Create button skeleton\n    const buttonSkeleton = document.createElement('div');\n    buttonSkeleton.className = 'inflowpay-skeleton';\n    buttonSkeleton.style.cssText = getButtonSkeletonStyles(shimmerGradient);\n\n    // Create disclaimer skeleton\n    const disclaimerSkeleton = document.createElement('div');\n    disclaimerSkeleton.style.cssText = getDisclaimerSkeletonStyles();\n\n    const disclaimerIconSkeleton = document.createElement('div');\n    disclaimerIconSkeleton.className = 'inflowpay-skeleton';\n    disclaimerIconSkeleton.style.cssText = getDisclaimerIconSkeletonStyles(shimmerGradient);\n\n    const disclaimerTextSkeleton = document.createElement('div');\n    disclaimerTextSkeleton.className = 'inflowpay-skeleton';\n    disclaimerTextSkeleton.style.cssText = getDisclaimerTextSkeletonStyles(shimmerGradient);\n\n    disclaimerSkeleton.appendChild(disclaimerIconSkeleton);\n    disclaimerSkeleton.appendChild(disclaimerTextSkeleton);\n\n    // Assemble skeleton card\n    skeletonCard.appendChild(inputWrap);\n    skeletonCard.appendChild(buttonSkeleton);\n    skeletonCard.appendChild(disclaimerSkeleton);\n\n    // Add to loader\n    loader.appendChild(skeletonCard);\n\n    // Inject shimmer animation styles if not already present\n    this.injectShimmerStyles();\n\n    // Add loader to container\n    this.container.appendChild(loader);\n    this.loaderElement = loader;\n  }\n\n  /**\n   * Hide loader\n   */\n  hide(iframe?: HTMLIFrameElement): void {\n    const loader = document.getElementById(ELEMENT_IDS.LOADER);\n    if (loader) {\n      loader.remove();\n    }\n    this.loaderElement = null;\n\n    // Show iframe again when loader is hidden\n    if (iframe) {\n      iframe.style.display = '';\n    }\n  }\n\n  /**\n   * Inject shimmer animation styles into document head\n   */\n  private injectShimmerStyles(): void {\n    if (!document.getElementById(ELEMENT_IDS.LOADER_STYLES)) {\n      const style = document.createElement('style');\n      style.id = ELEMENT_IDS.LOADER_STYLES;\n      style.textContent = SHIMMER_ANIMATION;\n      document.head.appendChild(style);\n    }\n  }\n}\n","/**\n * Modal Manager\n * Handles 3DS authentication modal\n */\n\nimport { ALLOWED_3DS_ORIGINS, DIMENSIONS, ELEMENT_IDS } from '../constants/sdk-constants';\nimport {\n  get3DSContentStyles,\n  get3DSHeaderStyles,\n  get3DSIframeStyles,\n  get3DSModalStyles,\n  get3DSOverlayStyles,\n  getCloseButtonStyles,\n} from './styles';\n\nexport interface ModalConfig {\n  environment: 'sandbox' | 'production' | 'development' | 'preprod';\n  debug?: boolean;\n}\n\nexport class ModalManager {\n  private config: ModalConfig;\n  private static activeModal: {\n    overlay: HTMLElement;\n    sessionId: string;\n    paymentId: string;\n  } | null = null;\n\n  constructor(config: ModalConfig) {\n    this.config = config;\n  }\n\n  /**\n   * Open 3DS authentication modal\n   * Returns a Promise that resolves with the authentication result\n   */\n  open(challengeUrl: string, sessionId: string, paymentId: string): Promise<boolean> {\n    if (this.config.debug) {\n      console.log('[SDK] open3DSModal called with URL:', challengeUrl);\n      console.log('[SDK] Session ID:', sessionId, 'Payment ID:', paymentId);\n    }\n\n    // If there's already a modal open, close it first\n    if (ModalManager.activeModal) {\n      console.warn('[SDK] Closing existing modal before opening new one');\n      ModalManager.activeModal.overlay.remove();\n      ModalManager.activeModal = null;\n    }\n\n    return new Promise((resolve) => {\n      // Create overlay\n      const overlay = document.createElement('div');\n      overlay.id = ELEMENT_IDS.THREE_DS_OVERLAY;\n      overlay.style.cssText = get3DSOverlayStyles();\n\n      // Create modal\n      const modal = document.createElement('div');\n      modal.style.cssText = get3DSModalStyles();\n\n      // Create header\n      const header = document.createElement('div');\n      header.style.cssText = get3DSHeaderStyles();\n      header.innerHTML = `\n        <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Secure Payment Authentication</h3>\n      `;\n\n      // Create content with iframe\n      const content = document.createElement('div');\n      content.style.cssText = get3DSContentStyles();\n      \n      const iframe = document.createElement('iframe');\n      iframe.src = challengeUrl;\n      iframe.style.cssText = get3DSIframeStyles();\n      iframe.setAttribute('allow', 'payment');\n      iframe.setAttribute('sandbox', 'allow-forms allow-scripts allow-same-origin allow-popups');\n      content.appendChild(iframe);\n\n      // Assemble modal\n      modal.appendChild(header);\n      modal.appendChild(content);\n      overlay.appendChild(modal);\n      document.body.appendChild(overlay);\n\n      // Store as THE active modal\n      ModalManager.activeModal = {\n        overlay,\n        sessionId,\n        paymentId\n      };\n\n      // Message handler for 3DS completion\n      const messageHandler = (event: MessageEvent) => {\n        if (!event.data) return;\n\n        // Validate origin\n        if (!this.isAllowedOrigin(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        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   * Close 3DS modal (called from external events like WebSocket)\n   * @param sessionId - Optional session ID to validate before closing\n   */\n  static close(sessionId?: string): void {\n    if (!ModalManager.activeModal) {\n      // No modal is open - nothing to do\n      console.log('[SDK] No active modal to close');\n      return;\n    }\n\n    // If sessionId is provided, validate it matches the current modal\n    if (sessionId && ModalManager.activeModal.sessionId !== sessionId) {\n      console.warn(\n        `[SDK] Session ID mismatch: webhook for ${sessionId}, but modal is for ${ModalManager.activeModal.sessionId}. Ignoring close request.`\n      );\n      return;\n    }\n\n    // Close the modal\n    console.log('[SDK] Closing modal for session:', sessionId || ModalManager.activeModal.sessionId);\n    ModalManager.activeModal.overlay.remove();\n    ModalManager.activeModal = null;\n  }\n\n  /**\n   * Check if a modal is currently open\n   */\n  static isModalOpen(): boolean {\n    return ModalManager.activeModal !== null;\n  }\n\n  /**\n   * Get current session ID\n   */\n  static getCurrentSessionId(): string | null {\n    return ModalManager.activeModal?.sessionId || null;\n  }\n\n  /**\n   * Check if origin is allowed for 3DS messages\n   */\n  private isAllowedOrigin(origin: string): boolean {\n    // Check exact match with allowed origins\n    if ((ALLOWED_3DS_ORIGINS as readonly string[]).includes(origin)) {\n      return true;\n    }\n\n    // Allow localhost in dev/sandbox environments\n    if (this.config.environment === 'sandbox' || this.config.environment === 'development') {\n      if (origin.includes('localhost') || origin.includes('127.0.0.1')) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n}\n","/**\n * Overlay Manager\n * Handles popup overlay UI for payment iframe\n */\n\nimport { ELEMENT_IDS } from '../constants/sdk-constants';\nimport {\n  getOverlayStyles,\n  getContainerStyles,\n  getCloseButtonStyles,\n  getPopupIframeStyles,\n} from './styles';\n\nexport interface OverlayElements {\n  overlay: HTMLElement;\n  container: HTMLElement;\n  iframe: HTMLIFrameElement;\n}\n\nexport class OverlayManager {\n  /**\n   * Create popup overlay with iframe\n   */\n  static createOverlay(\n    iframeSrc: string,\n    onClose: () => void\n  ): OverlayElements {\n    // Create overlay\n    const overlay = document.createElement('div');\n    overlay.id = ELEMENT_IDS.OVERLAY;\n    overlay.style.cssText = getOverlayStyles();\n\n    // Create iframe container\n    const container = document.createElement('div');\n    container.style.cssText = getContainerStyles();\n\n    // Create close button\n    const closeButton = document.createElement('button');\n    closeButton.innerHTML = '×';\n    closeButton.style.cssText = getCloseButtonStyles();\n    closeButton.onclick = onClose;\n\n    // Create iframe\n    const iframe = document.createElement('iframe');\n    iframe.src = iframeSrc;\n    iframe.style.cssText = getPopupIframeStyles();\n    iframe.setAttribute('allow', 'payment');\n\n    // Assemble structure\n    container.appendChild(closeButton);\n    container.appendChild(iframe);\n    overlay.appendChild(container);\n\n    // Close on overlay click (but not on container click)\n    overlay.addEventListener('click', (e) => {\n      if (e.target === overlay) {\n        onClose();\n      }\n    });\n\n    return { overlay, container, iframe };\n  }\n\n  /**\n   * Remove overlay from DOM\n   */\n  static removeOverlay(): void {\n    const overlay = document.getElementById(ELEMENT_IDS.OVERLAY);\n    if (overlay) {\n      overlay.remove();\n    }\n  }\n}\n","/**\n * Utility functions\n */\n\nimport { IFRAME_URLS } from './constants/sdk-constants';\nimport type { Locale } from './types';\n\nexport const SUPPORTED_LOCALES: Locale[] = ['en', 'de', 'es', 'fr', 'it', 'nl', 'pl', 'pt'];\n\n/**\n * Detects the browser's language and returns a supported locale if available.\n * Falls back to 'en' if the browser language is not supported.\n */\nexport function detectBrowserLocale(): Locale {\n  if (typeof window === 'undefined') {\n    return 'en';\n  }\n\n  try {\n    const browserLang =\n      navigator.language ||\n      (navigator as { userLanguage?: string }).userLanguage ||\n      '';\n\n    const primaryLang = browserLang.split('-')[0].toLowerCase();\n\n    if (SUPPORTED_LOCALES.includes(primaryLang as Locale)) {\n      return primaryLang as Locale;\n    }\n  } catch {\n    // If detection fails, fall back to default\n  }\n\n  return 'en';\n}\n\n/**\n * Determines the environment from the API key format\n */\nexport function getEnvironmentFromApiKey(publicKey: string): 'sandbox' | 'production' | 'development' | 'preprod' {\n  if (publicKey.includes('_local_') || publicKey.startsWith('inflow_local_')) {\n    return 'sandbox';\n  } else if (publicKey.includes('_prod_') && !publicKey.includes('_preprod_')) {\n    return 'production';\n  } else if (publicKey.includes('_preprod_') || publicKey.startsWith('inflow_preprod_')) {\n    return 'preprod';\n  } else if (publicKey.includes('_dev_')) {\n    return 'development';\n  }\n  return 'sandbox';\n}\n\n/**\n * Gets the iframe URL based on the API key environment\n * This function auto-detects the correct iframe URL from the API key format\n * \n * @param publicKey - The public API key\n * @returns The iframe URL for the detected environment\n * \n * @example\n * ```typescript\n * const url = getIframeUrlFromApiKey('inflow_pub_prod_xxx');\n * // Returns: 'https://api.inflowpay.xyz/iframe/checkout'\n * \n * const url = getIframeUrlFromApiKey('inflow_pub_local_xxx');\n * // Returns: 'http://localhost:3000/iframe/checkout'\n * ```\n */\nexport function getIframeUrlFromApiKey(publicKey: string): string {\n  const environment = getEnvironmentFromApiKey(publicKey);\n  \n  switch (environment) {\n    case 'production':\n      return IFRAME_URLS.PRODUCTION;\n    case 'preprod':\n      return IFRAME_URLS.PREPROD;\n    case 'development':\n      return IFRAME_URLS.DEVELOPMENT;\n    case 'sandbox':\n    default:\n      return IFRAME_URLS.LOCAL;\n  }\n}\n","/**\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 { DIMENSIONS } from './constants/sdk-constants';\nimport type { IframeMessage, SDKConfig, TransactionData } from './types';\nimport { LoaderManager } from './ui/loader-manager';\nimport { ModalManager } from './ui/modal-manager';\nimport { OverlayManager } from './ui/overlay-manager';\nimport { getInlineIframeStyles } from './ui/styles';\nimport { getEnvironmentFromApiKey, getIframeUrlFromApiKey } from './utils';\nexport class SDK {\n  private iframe: HTMLIFrameElement | null = null;\n  private iframeUrl: string;\n  private config: SDKConfig & { iframeUrl?: string; debug?: boolean };\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  private loaderManager: LoaderManager | null = null;\n  private modalManager: ModalManager;\n\n  constructor(config: SDKConfig & { iframeUrl?: string; debug?: boolean }) {\n    this.config = config;\n\n    // Auto-detect iframe URL from API key, or use provided iframeUrl (internal use only)\n    this.iframeUrl = config.iframeUrl || getIframeUrlFromApiKey(config.publicKey || '');\n    this.environment = getEnvironmentFromApiKey(config.publicKey || '');\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    // Initialize modal manager\n    this.modalManager = new ModalManager({\n      environment: this.environment,\n      debug: this.config.debug,\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 and locale as query parameters\n    const url = new URL(this.iframeUrl);\n    if (this.config.publicKey) {\n      url.searchParams.set('publicKey', this.config.publicKey);\n    }\n    if (this.config.config?.paymentId) {\n      url.searchParams.set('paymentId', this.config.config.paymentId);\n    }\n    if (this.config.config?.setupId) {\n      url.searchParams.set('setupId', this.config.config.setupId);\n    }\n    if (this.config.locale) {\n      url.searchParams.set('locale', this.config.locale);\n    }\n    const iframeSrc = url.toString();\n\n    if (this.usePopup) {\n      // Use OverlayManager to create popup UI\n      const { overlay, container, iframe } = OverlayManager.createOverlay(\n        iframeSrc,\n        () => this.close()\n      );\n\n      this.iframe = iframe;\n      document.body.appendChild(overlay);\n\n      // Show loader\n      this.loaderManager = new LoaderManager(container, {\n        fillParent: this.config.config?.style?.fillParent,\n      });\n      this.loaderManager.show(this.iframe);\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 = `${DIMENSIONS.MIN_HEIGHT}px`;\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      this.iframe.style.cssText = getInlineIframeStyles(\n        this.config.config?.style?.fillParent || false\n      );\n      this.iframe.setAttribute('allow', 'payment');\n\n      // Append to container\n      this.containerElement.appendChild(this.iframe);\n\n      // Show loader\n      this.loaderManager = new LoaderManager(this.containerElement, {\n        fillParent: this.config.config?.style?.fillParent,\n      });\n      this.loaderManager.show(this.iframe);\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.iframe.inflowpay.com' ||\n            event.origin === 'https://pre-prod.iframe.inflowpay.xyz' ||\n            event.origin === 'https://iframe.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          if (this.loaderManager) {\n            this.loaderManager.hide(this.iframe || undefined);\n          }\n          this.sendConfigToIframe();\n          break;\n\n        case 'content-height':\n          // Adjust iframe height based on content\n          if (data.height && this.iframe) {\n            this.iframe.style.height = `${data.height}px`;\n            if (this.containerElement) {\n              this.containerElement.style.minHeight = `${data.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            console.log('[SDK] Session ID:', data.sessionId);\n          }\n          if (data.threeDsSessionUrl) {\n            const sessionId = data.sessionId;\n            const requestId =\n              data.paymentId ||\n              data.setupId ||\n              this.config.config?.paymentId ||\n              this.config.config?.setupId ||\n              '';\n\n            if (!data.sessionId) {\n              console.warn('[SDK] No session ID provided by iframe');\n            }\n\n            if (this.config.debug) {\n              console.log('[SDK] Opening 3DS modal with session ID:', sessionId);\n            }\n\n            this.modalManager.open(data.threeDsSessionUrl, sessionId as string, requestId).then((success) => {\n              if (this.config.debug) {\n                console.log('[SDK] 3DS modal closed, result:', success);\n              }\n              // No longer send message back to iframe - unidirectional flow\n            });\n          } else {\n            if (this.config.debug) {\n              console.error('[SDK] 3DS required but no threeDsSessionUrl provided');\n            }\n          }\n          break;\n\n        case '3ds-success':\n          // 3DS challenge completed via WebSocket, close modal automatically\n          if (this.config.debug) {\n            console.log('[SDK] 3DS completed, closing modal...');\n            console.log('[SDK] Session ID from webhook:', data.sessionId);\n          }\n          // Pass session ID to validate before closing\n          ModalManager.close(data.sessionId);\n          break;\n\n        case '3ds-failed':\n          // 3DS challenge completed via WebSocket, close modal automatically\n          if (this.config.debug) {\n            console.log('[SDK] 3DS failed, closing modal...');\n            console.log('[SDK] Session ID from webhook:', data.sessionId);\n          }\n          // Pass session ID to validate before closing\n          ModalManager.close(data.sessionId);\n          break;\n\n        default:\n          if (this.config.debug) {\n            console.log('SDK: Received message:', data);\n          }\n\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        setupId: this.config.config?.setupId,\n      },\n      data: {\n        publicKey: this.config.publicKey,\n      },\n    };\n\n    const targetOrigin = this.getTargetOrigin();\n    this.iframe.contentWindow.postMessage(message, targetOrigin);\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    if (this.loaderManager) {\n      this.loaderManager.hide(this.iframe || undefined);\n      this.loaderManager = null;\n    }\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      OverlayManager.removeOverlay();\n    } else {\n      // Clear container\n      if (this.containerElement) {\n        this.containerElement.innerHTML = '';\n      }\n    }\n\n    this.iframe = null;\n  }\n\n  /**\n   * Handle success state: when showDefaultSuccessUI is true, iframe shows success UI\n   * and we keep it mounted; when false, we unmount so the parent can render their own.\n   */\n  public switchToSuccessState(_result: TransactionData): void {\n    // Hide loader\n    if (this.loaderManager) {\n      this.loaderManager.hide(this.iframe || undefined);\n      this.loaderManager = null;\n    }\n\n    if (this.usePopup) {\n      if (this.messageListener) {\n        window.removeEventListener('message', this.messageListener);\n        this.messageListener = null;\n      }\n      OverlayManager.removeOverlay();\n      this.iframe = null;\n      return;\n    }\n\n    const showDefault = this.config.config?.showDefaultSuccessUI ?? true;\n\n    if (!showDefault && this.containerElement) {\n      this.containerElement.innerHTML = '';\n      this.iframe = null;\n    }\n    // When showDefault is true, keep iframe mounted (success UI is shown inside iframe)\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   * 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 { PaymentResult, PaymentResultStatus } from './react';\nimport { SDK } from './sdk';\n\nimport type { CSSProperties, Locale, SaveCardResult } from './types';\nimport { detectBrowserLocale } from './utils';\n\nexport interface CardElementOptions {\n  /** Container element or CSS selector where the iframe will be mounted */\n  container: string | HTMLElement;\n  /** Payment ID for a payment transaction. Mutually exclusive with setupId. */\n  paymentId?: string;\n  /** CustomerPaymentMethodRequest ID for a save-card session. Mutually exclusive with paymentId. */\n  setupId?: string;\n  /** Callback when the operation completes (payment or card setup) */\n  onComplete?: (result: PaymentResult | SaveCardResult) => void;\n  /** Callback when the operation fails */\n  onError?: (error: any) => void;\n  /** Callback when user closes the element */\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  /** Show default success UI after completion (default true). If false, only unmount iframe. */\n  showDefaultSuccessUI?: boolean;\n}\n\ninterface InternalSDKConfig {\n  publicKey: string;\n  iframeUrl: string;\n  timeout: number;\n  debug: boolean;\n  locale?: Locale;\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    if (!options.paymentId && !options.setupId) {\n      throw new Error('CardElement: paymentId or setupId is required');\n    }\n    if (options.paymentId && options.setupId) {\n      throw new Error('CardElement: paymentId and setupId are mutually exclusive');\n    }\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    const isSaveCardMode = Boolean(options.setupId);\n\n    this.sdk = new SDK({\n      publicKey: config.publicKey,\n      container: this.container,\n      locale: config.locale ?? detectBrowserLocale(),\n      config: {\n        ...(options.paymentId && { paymentId: options.paymentId }),\n        ...(options.setupId && { setupId: options.setupId }),\n        ...(options.style && { style: options.style }),\n        ...(options.buttonText && { buttonText: options.buttonText }),\n        ...(options.placeholders && { placeholders: options.placeholders }),\n        ...(options.showDefaultSuccessUI !== undefined && {\n          showDefaultSuccessUI: options.showDefaultSuccessUI,\n        }),\n      },\n      onSuccess: (data) => {\n        if (options.onComplete) {\n          if (isSaveCardMode) {\n            options.onComplete({\n              status: PaymentResultStatus.SUCCESS,\n              setupId: options.setupId as string,\n            } satisfies SaveCardResult);\n          } else {\n            options.onComplete({\n              status: PaymentResultStatus.SUCCESS,\n              paymentId: options.paymentId as string,\n            } satisfies PaymentResult);\n          }\n        }\n        this.sdk.switchToSuccessState(data);\n      },\n      onError: (error) => {\n        if (options.onError) {\n          options.onError(error);\n        } else if (options.onComplete) {\n          if (isSaveCardMode) {\n            options.onComplete({\n              status: PaymentResultStatus.FAILED,\n              setupId: options.setupId as string,\n              error,\n            } satisfies SaveCardResult);\n          } else {\n            options.onComplete({\n              status: PaymentResultStatus.FAILED,\n              paymentId: options.paymentId as string,\n              error,\n            } satisfies PaymentResult);\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","/**\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 { CardElement } from './card-element';\nimport type { PaymentResult } from './react';\nimport type { CSSProperties, Locale, SaveCardResult } from './types';\nimport { getEnvironmentFromApiKey, getIframeUrlFromApiKey } from './utils';\n\nexport interface PaymentSDKConfig {\n  /** Public API key */\n  publicKey: string;\n  /** Locale for the UI. Defaults to 'en' */\n  locale?: Locale;\n}\n\nexport class PaymentSDK {\n  private config: PaymentSDKConfig;\n  private iframeUrl: string;\n  private timeout: number;\n  private 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.publicKey || typeof config.publicKey !== 'string') {\n      throw new Error('API key is required');\n    }\n\n    this.config = config;\n    this.timeout = 30000;\n\n    // Auto-detect iframe URL from API key using utility function\n    this.iframeUrl = getIframeUrlFromApiKey(config.publicKey);\n\n    // Auto-enable debug in development and sandbox environments\n    const environment = getEnvironmentFromApiKey(config.publicKey);\n    this.debug = environment === 'sandbox' || environment === 'development';\n  }\n\n  /**\n   * Create a CardElement for iframe-based payment or save-card UI.\n   *\n   * Pass `paymentId` for a payment transaction, or `setupId` to save\n   * a card without charging. The two options are mutually exclusive.\n   *\n   * @param options - CardElement configuration\n   * @returns CardElement instance\n   *\n   * @example – payment\n   * ```typescript\n   * const cardElement = sdk.createCardElement({\n   *   container: '#card-container',\n   *   paymentId: 'pay_123',\n   *   onComplete: (result) => { ... }\n   * });\n   * cardElement.mount();\n   * ```\n   *\n   * @example – save card\n   * ```typescript\n   * const cardElement = sdk.createCardElement({\n   *   container: '#card-container',\n   *   setupId: 'cus_pm_req_123',\n   *   onComplete: (result) => { ... }\n   * });\n   * cardElement.mount();\n   * ```\n   */\n  createCardElement(options: {\n    container: string | HTMLElement;\n    /** Payment ID – use for payment flow */\n    paymentId?: string;\n    /** CustomerPaymentMethodRequest ID – use for save-card flow */\n    setupId?: string;\n    style?: CSSProperties;\n    buttonText?: string;\n    placeholders?: {\n      cardNumber?: string;\n      expiry?: string;\n      cvc?: string;\n    };\n    onComplete?: (result: PaymentResult | SaveCardResult) => void;\n    onError?: (error: any) => void;\n    onClose?: () => void;\n    showDefaultSuccessUI?: boolean;\n  }): CardElement {\n    return new CardElement(\n      {\n        publicKey: this.config.publicKey,\n        iframeUrl: this.iframeUrl,\n        timeout: this.timeout,\n        debug: this.debug,\n        locale: this.config.locale,\n      },\n      options,\n    );\n  }\n\n  /**\n   * Get the iframe URL being used\n   */\n  getIframeUrl(): string {\n    return this.iframeUrl;\n  }\n\n  /**\n   * Get the API key\n   */\n  getApiKey(): string {\n    return this.config.publicKey;\n  }\n}\n\n"],"mappings":"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"}

package/dist/react/index.d.ts

@@ -58,13 +58,15 @@ declare class CardElement_2 {
 declare interface CardElementOptions {
     /** Container element or CSS selector where the iframe will be mounted */
     container: string | HTMLElement;
-    /** Payment ID for this transaction */
-    paymentId: string;
-    /** Callback when payment completes */
-    onComplete?: (result: PaymentResult) => void;
-    /** Callback when payment fails */
+    /** Payment ID for a payment transaction. Mutually exclusive with setupId. */
+    paymentId?: string;
+    /** CustomerPaymentMethodRequest ID for a save-card session. Mutually exclusive with paymentId. */
+    setupId?: string;
+    /** Callback when the operation completes (payment or card setup) */
+    onComplete?: (result: PaymentResult | SaveCardResult) => void;
+    /** Callback when the operation fails */
     onError?: (error: any) => void;
-    /** Callback when user closes the payment */
+    /** Callback when user closes the element */
     onClose?: () => void;
     /** Custom styling for the card element */
     style?: CSSProperties;
@@ -76,15 +78,18 @@ declare interface CardElementOptions {
         expiry?: string;
         cvc?: string;
     };
-    /** Show default success UI after payment (default true). If false, only unmount iframe. */
+    /** Show default success UI after completion (default true). If false, only unmount iframe. */
     showDefaultSuccessUI?: boolean;
 }
 
 export declare interface CardElementProps {
-    paymentId: string;
+    /** Payment ID for a payment transaction. Mutually exclusive with setupId. */
+    paymentId?: string;
+    /** CustomerPaymentMethodRequest ID for a save-card session. Mutually exclusive with paymentId. */
+    setupId?: string;
     onReady?: () => void;
     onChange?: (state: CardElementState) => void;
-    onComplete?: (result: PaymentResult) => void;
+    onComplete?: (result: PaymentResult | SaveCardResult) => void;
     onError?: (error: PaymentError) => void;
     style?: CSSProperties;
     buttonText?: string;
@@ -93,7 +98,7 @@ export declare interface CardElementProps {
         expiry?: string;
         cvc?: string;
     };
-    /** Show default success UI after payment (default true). If false, only unmount iframe. */
+    /** Show default success UI after completion (default true). If false, only unmount iframe. */
     showDefaultSuccessUI?: boolean;
 }
 
@@ -110,7 +115,9 @@ declare interface CSSProperties {
     disclaimerColor?: string;
     fieldErrorColor?: string;
     generalError?: GeneralMessageStyles;
+    /** @deprecated generalSuccess was removed from the sdk; this has no effect. Will be removed in the next major version. */
     generalSuccess?: GeneralMessageStyles;
+    successUI?: SuccessUIStyles;
     dark?: ThemeStyles;
 }
 
@@ -222,29 +229,40 @@ declare class PaymentSDK {
      */
     constructor(config: PaymentSDKConfig);
     /**
-     * Create a CardElement for iframe-based payment UI
+     * Create a CardElement for iframe-based payment or save-card UI.
+     *
+     * Pass `paymentId` for a payment transaction, or `setupId` to save
+     * a card without charging. The two options are mutually exclusive.
      *
      * @param options - CardElement configuration
      * @returns CardElement instance
      *
-     * @example
+     * @example – payment
      * ```typescript
      * const cardElement = sdk.createCardElement({
      *   container: '#card-container',
      *   paymentId: 'pay_123',
-     *   onComplete: (result) => {
-     *     if (result.status === 'CHECKOUT_SUCCESS') {
-     *       window.location.href = '/success';
-     *     }
-     *   }
+     *   onComplete: (result) => { ... }
      * });
+     * cardElement.mount();
+     * ```
      *
+     * @example – save card
+     * ```typescript
+     * const cardElement = sdk.createCardElement({
+     *   container: '#card-container',
+     *   setupId: 'cus_pm_req_123',
+     *   onComplete: (result) => { ... }
+     * });
      * cardElement.mount();
      * ```
      */
     createCardElement(options: {
         container: string | HTMLElement;
-        paymentId: string;
+        /** Payment ID – use for payment flow */
+        paymentId?: string;
+        /** CustomerPaymentMethodRequest ID – use for save-card flow */
+        setupId?: string;
         style?: CSSProperties;
         buttonText?: string;
         placeholders?: {
@@ -252,9 +270,10 @@ declare class PaymentSDK {
             expiry?: string;
             cvc?: string;
         };
-        onComplete?: (result: PaymentResult) => void;
+        onComplete?: (result: PaymentResult | SaveCardResult) => void;
         onError?: (error: any) => void;
         onClose?: () => void;
+        showDefaultSuccessUI?: boolean;
     }): CardElement_2;
     /**
      * Get the iframe URL being used
@@ -273,12 +292,24 @@ declare interface PaymentSDKConfig {
     locale?: Locale;
 }
 
+export declare interface SaveCardResult {
+    status: PaymentResultStatus;
+    setupId: string;
+    error?: PaymentError;
+}
+
 export declare interface SDKConfig {
     publicKey: string;
     /** Locale for the payment UI. Defaults to 'en' */
     locale?: Locale;
 }
 
+declare interface SuccessUIStyles {
+    backgroundColor?: string;
+    primaryTextColor?: string;
+    secondaryTextColor?: string;
+}
+
 declare interface ThemeStyles {
     inputContainer?: InputContainerStyles;
     input?: InputStyles;
@@ -286,7 +317,9 @@ declare interface ThemeStyles {
     disclaimerColor?: string;
     fieldErrorColor?: string;
     generalError?: GeneralMessageStyles;
+    /** @deprecated generalSuccess was removed from the sdk; this has no effect. Will be removed in the next major version. */
     generalSuccess?: GeneralMessageStyles;
+    successUI?: SuccessUIStyles;
 }
 
 /**

package/dist/react.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("react");const e=require("./payment-sdk-CC-mm-nt.js");exports.CardElement=e.CardElement$1;exports.InflowPayProvider=e.InflowPayProvider;exports.PaymentResultErrorCode=e.PaymentResultErrorCode;exports.PaymentResultStatus=e.PaymentResultStatus;exports.useInflowPay=e.useInflowPay;
-//# sourceMappingURL=react.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./payment-sdk-DhJS0NRo.js`);exports.CardElement=e.r,exports.InflowPayProvider=e.i,exports.PaymentResultErrorCode=e.o,exports.PaymentResultStatus=e.s,exports.useInflowPay=e.a;

package/dist/react.esm.js

@@ -1,11 +1,2 @@
-import "react/jsx-runtime";
-import "react";
-import { c as o, I as s, a as m, b as l, u as n } from "./payment-sdk-oRqgQSx5.mjs";
-export {
-  o as CardElement,
-  s as InflowPayProvider,
-  m as PaymentResultErrorCode,
-  l as PaymentResultStatus,
-  n as useInflowPay
-};
-//# sourceMappingURL=react.esm.js.map
+import { a as e, i as t, o as n, r, s as i } from "./payment-sdk-DqfuWSo1.mjs";
+export { r as CardElement, t as InflowPayProvider, n as PaymentResultErrorCode, i as PaymentResultStatus, e as useInflowPay };