{"version":3,"file":"index.cjs","sources":["../../src/react/context/InflowPayContext.tsx","../../src/react/components/CardElement.tsx"],"sourcesContent":["/**\n * InflowPay React Context\n * Provides InflowPay instance to child components\n */\n\nimport React, { createContext, useContext, useMemo, ReactNode } from 'react';\nimport { PaymentSDK } from '../../core/payment-sdk';\nimport type { SDKConfig } from '../../types';\n\ninterface InflowPayContextValue {\n  inflow: PaymentSDK;\n}\n\nexport const InflowPayContext = createContext<InflowPayContextValue | null>(null);\n\nexport interface InflowPayProviderProps {\n  /** InflowPay configuration */\n  config: SDKConfig;\n  /** Child components */\n  children: ReactNode;\n}\n\n/**\n * InflowPay Provider Component\n * \n * Wraps your app and provides InflowPay instance to child components\n * \n * @example\n * ```tsx\n * <InflowPayProvider config={{ apiKey: 'inflow_pub_xxx' }}>\n *   <App />\n * </InflowPayProvider>\n * ```\n */\nexport function InflowPayProvider({ config, children }: InflowPayProviderProps) {\n  const inflow = useMemo(() => {\n    return new PaymentSDK(config);\n  }, [config.apiKey, config.timeout, config.debug]);\n\n  const value = useMemo(() => ({ inflow }), [inflow]);\n\n  return (\n    <InflowPayContext.Provider value={value}>\n      {children}\n    </InflowPayContext.Provider>\n  );\n}\n\n/**\n * Hook to access InflowPay instance from context\n * \n * @throws {Error} If used outside InflowPayProvider\n * \n * @example\n * ```tsx\n * const inflow = useInflowPay();\n * ```\n */\nexport function useInflowPay(): PaymentSDK {\n  const context = useContext(InflowPayContext);\n  \n  if (!context) {\n    throw new Error(\n      'useInflowPay must be used within an InflowPayProvider. ' +\n      'Wrap your app with <InflowPayProvider> component.'\n    );\n  }\n\n  return context.inflow;\n}\n\n","/**\n * CardElement React Component\n * \n * React wrapper for the InflowPay CardElement\n */\n\nimport React, { useEffect, useRef, useImperativeHandle, forwardRef, useContext, useMemo } from 'react';\nimport { CardElement as CardElementClass } from '../../ui/card-element';\nimport { PaymentSDK } from '../../core/payment-sdk';\nimport { InflowPayContext } from '../context/InflowPayContext';\nimport type {\n  CardElementOptions,\n  PaymentResult,\n  SDKConfig,\n} from '../../types';\n\nexport interface CardElementProps\n  extends Omit<CardElementOptions, 'container'> {  // Only omit container!\n    \n  /** InflowPay config (required if not using InflowPayProvider) */\n  config?: SDKConfig;\n\n  /** Callback when the card element is mounted and ready */\n  onReady?: () => void;\n}\n\nexport interface CardElementRef {\n  /** Submit the payment */\n  submit: () => Promise<PaymentResult>;\n  /** Destroy the card element */\n  destroy: () => void;\n}\n\n/**\n * CardElement React Component\n * \n * A self-contained card payment form component.\n * \n * @example\n * ```tsx\n * // With InflowPayProvider\n * <InflowPayProvider config={{ apiKey: 'inflow_pub_xxx' }}>\n *   <CardElement \n *     paymentId=\"pay_123\"\n *     onReady={() => console.log('Card element is ready')}\n *     onComplete={(result) => console.log(result)}\n *   />\n * </InflowPayProvider>\n * \n * // Without provider (standalone)\n * <CardElement \n *   config={{ apiKey: 'inflow_pub_xxx' }}\n *   paymentId=\"pay_123\"\n *   onReady={() => console.log('Card element is ready')}\n *   onComplete={(result) => console.log(result)}\n * />\n * ```\n */\nexport const CardElement = forwardRef<CardElementRef, CardElementProps>(\n  function CardElement(\n    {\n      paymentId,\n      config,\n      onChange,\n      onComplete,\n      onError,\n      onReady,\n      buttonText,\n      buttonStyle,\n      style,\n      placeholders,\n    },\n    ref\n  ) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const cardElementRef = useRef<CardElementClass | null>(null);\n    \n    // Get InflowPay from context (if inside provider) - returns null if not in provider\n    const context = useContext(InflowPayContext);\n    const contextInflow = context?.inflow || null;\n\n    // Memoize InflowPay instance when config is provided (priority: config > context)\n    const inflow = useMemo(() => {\n      if (config) {\n        return new PaymentSDK(config);\n      }\n      return contextInflow;\n    }, [config?.apiKey, config?.timeout, config?.debug, contextInflow]);\n\n    if (!inflow) {\n      throw new Error(\n        'CardElement requires either a `config` prop ' +\n        'or must be used within an InflowPayProvider'\n      );\n    }\n\n    // Mount and unmount CardElement\n    useEffect(() => {\n      if (!containerRef.current || !inflow) {\n        return;\n      }\n\n      // Create CardElement instance\n      cardElementRef.current = inflow.createCardElement({\n        container: containerRef.current,\n        paymentId,\n        buttonText,\n        buttonStyle,\n        style,\n        placeholders,\n        onChange: (state) => {\n          onChange?.(state);\n        },\n        onComplete: (result) => {\n          onComplete?.(result);\n        },\n        onError: (error) => {\n          onError?.(error);\n        },\n      });\n\n      // Mount the element\n      cardElementRef.current.mount();\n\n      // Call onReady callback after mount completes\n      onReady?.();\n\n      // Cleanup on unmount\n      return () => {\n        if (cardElementRef.current) {\n          cardElementRef.current.destroy();\n          cardElementRef.current = null;\n        }\n      };\n    }, [inflow, paymentId]);\n\n    // Expose methods via ref\n    useImperativeHandle(ref, () => ({\n      submit: async () => {\n        if (!cardElementRef.current) {\n          throw new Error('CardElement is not mounted');\n        }\n        return cardElementRef.current.submit();\n      },\n      destroy: () => {\n        if (cardElementRef.current) {\n          cardElementRef.current.destroy();\n          cardElementRef.current = null;\n        }\n      },\n    }), []);\n\n    return <div ref={containerRef} />;\n  }\n);\n\n"],"names":["InflowPayContext","createContext","InflowPayProvider","config","children","inflow","useMemo","PaymentSDK","value","React","useInflowPay","context","useContext","CardElement","forwardRef","paymentId","onChange","onComplete","onError","onReady","buttonText","buttonStyle","style","placeholders","ref","containerRef","useRef","cardElementRef","contextInflow","useEffect","state","result","error","useImperativeHandle"],"mappings":"iJAaaA,EAAmBC,EAAAA,cAA4C,IAAI,EAqBzE,SAASC,EAAkB,CAAE,OAAAC,EAAQ,SAAAC,GAAoC,CAC9E,MAAMC,EAASC,EAAAA,QAAQ,IACd,IAAIC,EAAAA,WAAWJ,CAAM,EAC3B,CAACA,EAAO,OAAQA,EAAO,QAASA,EAAO,KAAK,CAAC,EAE1CK,EAAQF,EAAAA,QAAQ,KAAO,CAAE,OAAAD,IAAW,CAACA,CAAM,CAAC,EAElD,OACEI,EAAA,cAACT,EAAiB,SAAjB,CAA0B,MAAAQ,GACxBJ,CACH,CAEJ,CAYO,SAASM,GAA2B,CACzC,MAAMC,EAAUC,EAAAA,WAAWZ,CAAgB,EAE3C,GAAI,CAACW,EACH,MAAM,IAAI,MACR,0GAAA,EAKJ,OAAOA,EAAQ,MACjB,CCXO,MAAME,EAAcC,EAAAA,WACzB,SACE,CACE,UAAAC,EACA,OAAAZ,EACA,SAAAa,EACA,WAAAC,EACA,QAAAC,EACA,QAAAC,EACA,WAAAC,EACA,YAAAC,EACA,MAAAC,EACA,aAAAC,CAAA,EAEFC,EACA,CACA,MAAMC,EAAeC,EAAAA,OAAuB,IAAI,EAC1CC,EAAiBD,EAAAA,OAAgC,IAAI,EAIrDE,EADUhB,EAAAA,WAAWZ,CAAgB,GACZ,QAAU,KAGnCK,EAASC,EAAAA,QAAQ,IACjBH,EACK,IAAII,EAAAA,WAAWJ,CAAM,EAEvByB,EACN,CAACzB,GAAQ,OAAQA,GAAQ,QAASA,GAAQ,MAAOyB,CAAa,CAAC,EAElE,GAAI,CAACvB,EACH,MAAM,IAAI,MACR,yFAAA,EAMJwB,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,GAACJ,EAAa,SAAW,CAACpB,GAK9B,OAAAsB,EAAe,QAAUtB,EAAO,kBAAkB,CAChD,UAAWoB,EAAa,QACxB,UAAAV,EACA,WAAAK,EACA,YAAAC,EACA,MAAAC,EACA,aAAAC,EACA,SAAWO,GAAU,CACnBd,IAAWc,CAAK,CAClB,EACA,WAAaC,GAAW,CACtBd,IAAac,CAAM,CACrB,EACA,QAAUC,GAAU,CAClBd,IAAUc,CAAK,CACjB,CAAA,CACD,EAGDL,EAAe,QAAQ,MAAA,EAGvBR,IAAA,EAGO,IAAM,CACPQ,EAAe,UACjBA,EAAe,QAAQ,QAAA,EACvBA,EAAe,QAAU,KAE7B,CACF,EAAG,CAACtB,EAAQU,CAAS,CAAC,EAGtBkB,EAAAA,oBAAoBT,EAAK,KAAO,CAC9B,OAAQ,SAAY,CAClB,GAAI,CAACG,EAAe,QAClB,MAAM,IAAI,MAAM,4BAA4B,EAE9C,OAAOA,EAAe,QAAQ,OAAA,CAChC,EACA,QAAS,IAAM,CACTA,EAAe,UACjBA,EAAe,QAAQ,QAAA,EACvBA,EAAe,QAAU,KAE7B,CAAA,GACE,CAAA,CAAE,EAEClB,EAAA,cAAC,MAAA,CAAI,IAAKgB,CAAA,CAAc,CACjC,CACF"}