@inflow_pay/sdk 0.0.1 → 0.1.0

package/dist/react/index.d.ts

@@ -0,0 +1,310 @@
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+declare interface ButtonBaseStyles {
+    backgroundColor?: string;
+    textColor?: string;
+    borderRadius?: string;
+    borderColor?: string;
+    borderEnabled?: boolean;
+    fontSize?: string;
+    fontWeight?: string;
+    opacity?: string;
+}
+
+declare interface ButtonStyles extends ButtonBaseStyles {
+    hover?: ButtonBaseStyles;
+    disabled?: ButtonBaseStyles;
+    loaderColor?: string;
+}
+
+/**
+ * CardElement - React component
+ *
+ * Same API as the original React SDK
+ *
+ * @example
+ * ```tsx
+ * <CardElement
+ *   paymentId="pay_xxx"
+ *   onComplete={(result) => {
+ *     if (result.status === 'CHECKOUT_SUCCESS') {
+ *       window.location.href = '/success';
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+export declare function CardElement({ paymentId, onReady, onChange, onComplete, onError, style, buttonText, placeholders, config: propConfig, }: CardElementProps & {
+    config?: SDKConfig;
+}): JSX_2.Element;
+
+declare class CardElement_2 {
+    private sdk;
+    private container;
+    private mounted;
+    constructor(config: InternalSDKConfig, options: CardElementOptions);
+    /**
+     * Mount the CardElement to the DOM
+     * This will create and display the iframe
+     */
+    mount(): void;
+    /**
+     * Destroy the CardElement and cleanup
+     */
+    destroy(): void;
+}
+
+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: {
+        status: string;
+        data?: any;
+        error?: any;
+    }) => void;
+    /** Callback when payment fails */
+    onError?: (error: any) => void;
+    /** Callback when user closes the payment */
+    onClose?: () => void;
+    /** Custom styling for the card element */
+    style?: CSSProperties;
+    /** Custom button text (default: "Complete Payment") */
+    buttonText?: string;
+    /** Custom placeholder text for inputs */
+    placeholders?: {
+        cardNumber?: string;
+        expiry?: string;
+        cvc?: string;
+    };
+}
+
+export declare interface CardElementProps {
+    paymentId: string;
+    onReady?: () => void;
+    onChange?: (state: CardElementState) => void;
+    onComplete?: (result: PaymentResult) => void;
+    onError?: (error: PaymentError) => void;
+    style?: CSSProperties;
+    buttonText?: string;
+    placeholders?: {
+        cardNumber?: string;
+        expiry?: string;
+        cvc?: string;
+    };
+}
+
+export declare interface CardElementState {
+    complete: boolean;
+}
+
+declare interface CSSProperties {
+    fontFamily?: FontFamily;
+    fillParent?: boolean;
+    inputContainer?: InputContainerStyles;
+    input?: InputStyles;
+    button?: ButtonStyles;
+    disclaimerColor?: string;
+    fieldErrorColor?: string;
+    generalError?: GeneralMessageStyles;
+    generalSuccess?: GeneralMessageStyles;
+    light?: ThemeStyles;
+    dark?: ThemeStyles;
+}
+
+/**
+ * Type definitions for SDK v2
+ */
+declare type FontFamily = 'DM Sans' | 'Inter' | 'Poppins' | 'Nunito' | 'Work Sans' | 'Manrope' | 'Rubik' | 'Karla' | 'Figtree' | 'Outfit' | 'Space Grotesk' | 'Urbanist';
+
+declare interface GeneralMessageStyles {
+    textColor?: string;
+    backgroundColor?: string;
+    borderEnabled?: boolean;
+    borderRadius?: string;
+    borderColor?: string;
+}
+
+/**
+ * InflowPayProvider - React component
+ *
+ * Same API as the original React SDK
+ *
+ * @example
+ * ```tsx
+ * <InflowPayProvider config={{ apiKey: 'inflow_pub_xxx' }}>
+ *   <CardElement
+ *     paymentId="pay_xxx"
+ *     onComplete={(result) => {
+ *       if (result.status === 'CHECKOUT_SUCCESS') {
+ *         window.location.href = '/success';
+ *       }
+ *     }}
+ *   />
+ * </InflowPayProvider>
+ * ```
+ */
+export declare function InflowPayProvider({ config, children, }: {
+    config: SDKConfig;
+    children: ReactNode;
+}): JSX_2.Element;
+
+declare interface InputContainerStyles {
+    backgroundColor?: string;
+    borderColor?: string;
+    borderEnabled?: boolean;
+    borderRadius?: string;
+}
+
+declare interface InputStyles {
+    backgroundColor?: string;
+    borderColor?: string;
+    borderEnabled?: boolean;
+    borderRadius?: string;
+    textColor?: string;
+    placeholderColor?: string;
+}
+
+declare interface InternalSDKConfig {
+    apiKey: string;
+    iframeUrl: string;
+    timeout: number;
+    debug: boolean;
+}
+
+export declare interface PaymentError {
+    code: string;
+    message: string;
+    retryable: boolean;
+}
+
+export declare interface PaymentResult {
+    status: string;
+    data?: any;
+    error?: {
+        code: string;
+        message: string;
+        retryable: boolean;
+    };
+}
+
+declare class PaymentSDK {
+    private config;
+    /**
+     * Initialize the InflowPay Payment SDK
+     *
+     * @param config - SDK configuration
+     *
+     * @example
+     * ```typescript
+     * const sdk = new PaymentSDK({
+     *   apiKey: 'inflow_pub_local_xxx'
+     * });
+     * ```
+     */
+    constructor(config: PaymentSDKConfig);
+    /**
+     * Create a CardElement for iframe-based payment UI
+     *
+     * @param options - CardElement configuration
+     * @returns CardElement instance
+     *
+     * @example
+     * ```typescript
+     * const cardElement = sdk.createCardElement({
+     *   container: '#card-container',
+     *   paymentId: 'pay_123',
+     *   onComplete: (result) => {
+     *     if (result.status === 'CHECKOUT_SUCCESS') {
+     *       window.location.href = '/success';
+     *     }
+     *   }
+     * });
+     *
+     * cardElement.mount();
+     * ```
+     */
+    createCardElement(options: {
+        container: string | HTMLElement;
+        paymentId: string;
+        style?: CSSProperties;
+        buttonText?: string;
+        placeholders?: {
+            cardNumber?: string;
+            expiry?: string;
+            cvc?: string;
+        };
+        onComplete?: (result: {
+            status: string;
+            data?: any;
+            error?: any;
+        }) => void;
+        onError?: (error: any) => void;
+        onClose?: () => void;
+    }): CardElement_2;
+    /**
+     * Get the iframe URL being used
+     */
+    getIframeUrl(): string;
+    /**
+     * Get the API key
+     */
+    getApiKey(): string;
+    /**
+     * Auto-detect environment from API key
+     */
+    private getEnvironmentFromApiKey;
+}
+
+declare interface PaymentSDKConfig {
+    /** Public API key */
+    apiKey: string;
+    /** Backend API URL (optional, auto-detected from API key) */
+    iframeUrl?: string;
+    /** Request timeout in milliseconds (default: 30000) */
+    timeout?: number;
+    /** Enable debug logging (default: false, only allowed in local/dev environments) */
+    debug?: boolean;
+}
+
+export declare interface SDKConfig {
+    apiKey: string;
+    iframeUrl?: string;
+    timeout?: number;
+    /** Enable debug logging (default: false, only allowed in local/dev environments) */
+    debug?: boolean;
+}
+
+declare interface ThemeStyles {
+    inputContainer?: InputContainerStyles;
+    input?: InputStyles;
+    button?: ButtonStyles;
+    disclaimerColor?: string;
+    fieldErrorColor?: string;
+    generalError?: GeneralMessageStyles;
+    generalSuccess?: GeneralMessageStyles;
+}
+
+/**
+ * useInflowPay - Hook to access InflowPay SDK instance
+ *
+ * @example
+ * ```tsx
+ * function CustomComponent() {
+ *   const inflow = useInflowPay();
+ *
+ *   const checkStatus = async () => {
+ *     const status = await inflow.getPaymentStatus('pay_xxx');
+ *     console.log(status);
+ *   };
+ *
+ *   return <button onClick={checkStatus}>Check Status</button>;
+ * }
+ * ```
+ */
+export declare function useInflowPay(): PaymentSDK;
+
+export { }

package/dist/react.cjs

@@ -0,0 +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;
+//# sourceMappingURL=react.cjs.map

package/dist/react.cjs.map

@@ -0,0 +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"}