@inflow_pay/sdk 0.0.1 → 0.2.0

package/dist/sdk.d.ts

@@ -1,11 +1,327 @@
-declare interface PaymentConfig {
+declare interface ButtonBaseStyles {
+    backgroundColor?: string;
+    textColor?: string;
+    borderRadius?: string;
+    borderColor?: string;
+    borderEnabled?: boolean;
+    fontSize?: string;
+    fontWeight?: FontWeight;
+    opacity?: Opacity;
+}
+
+declare interface ButtonStyles extends ButtonBaseStyles {
+    hover?: ButtonBaseStyles;
+    disabled?: ButtonBaseStyles;
+    loaderColor?: string;
+}
+
+export declare class CardElement {
+    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;
+}
+
+export 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;
+    container?: string | HTMLElement;
+    onComplete?: (result: {
+        status: string;
+        data?: any;
+        error?: any;
+    }) => void;
+    onError?: (error: any) => void;
+    onClose?: () => void;
+    onReady?: () => void;
+    onChange?: (state: {
+        complete: boolean;
+    }) => void;
+    buttonText?: string;
+    buttonStyle?: any;
+    style?: any;
+    placeholders?: {
+        cardNumber?: string;
+        expiry?: string;
+        cvc?: string;
+    };
+}
+
+export declare type 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 type FontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'normal' | 'bold' | 'lighter' | 'bolder';
+
+declare interface GeneralMessageStyles {
+    textColor?: string;
+    backgroundColor?: string;
+    borderEnabled?: boolean;
+    borderRadius?: string;
+    borderColor?: string;
+}
+
+export declare interface IframeMessage {
+    type: 'sdkData' | 'success' | 'error' | 'close' | '3ds-required' | '3ds-result' | 'iframe-ready';
+    data?: any;
+    config?: PaymentConfig;
+    threeDsSessionUrl?: string;
+    paymentId?: string;
+    success?: boolean;
+}
+
+/**
+ * InflowPayProvider - Global SDK configuration
+ *
+ * Similar to React's InflowPayProvider but for vanilla JS
+ *
+ * @example
+ * ```typescript
+ * const provider = new InflowPayProvider({
+ *   config: { apiKey: 'inflow_pub_xxx' }
+ * });
+ *
+ * const cardElement = provider.createCardElement({
+ *   paymentId: 'pay_xxx',
+ *   onComplete: (result) => {
+ *     if (result.status === 'CHECKOUT_SUCCESS') {
+ *       window.location.href = '/success';
+ *     }
+ *   }
+ * });
+ *
+ * cardElement.mount();
+ * ```
+ */
+export declare class InflowPayProvider {
+    private sdk;
+    constructor(options: {
+        config: InflowPayProviderConfig;
+    });
+    /**
+     * Create a CardElement (similar to React's <CardElement />)
+     *
+     * @param props - CardElement props (same as React SDK)
+     * @returns CardElement instance
+     */
+    createCardElement(props: CardElementProps): CardElement;
+    /**
+     * Get the underlying PaymentSDK instance
+     */
+    getSDK(): PaymentSDK;
+}
+
+export declare interface InflowPayProviderConfig {
+    apiKey: string;
+    iframeUrl?: string;
+    timeout?: number;
+    /** Enable debug logging (default: false, only allowed in local/dev environments) */
+    debug?: boolean;
+}
+
+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;
+}
+
+declare type Opacity = number | string;
+
+export declare interface PaymentConfig {
     name?: string;
     amount?: number;
     currency?: string;
     paymentId?: string;
+    /** 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;
+    };
     [key: string]: any;
 }
 
+export declare type PaymentError = {
+    code: string;
+    message: string;
+    retryable: boolean;
+};
+
+export declare type PaymentResult = {
+    status: string;
+    data?: any;
+    error?: {
+        code: string;
+        message: string;
+        retryable: boolean;
+    };
+};
+
+export 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;
+    /**
+     * Get the iframe URL being used
+     */
+    getIframeUrl(): string;
+    /**
+     * Get the API key
+     */
+    getApiKey(): string;
+    /**
+     * Auto-detect environment from API key
+     */
+    private getEnvironmentFromApiKey;
+}
+
+export 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 enum PaymentStatus {
+    INITIATION = "INITIATION",
+    CHECKOUT_PENDING = "CHECKOUT_PENDING",
+    CHECKOUT_SUCCESS = "CHECKOUT_SUCCESS",
+    CHECKOUT_CANCELED = "CHECKOUT_CANCELED",
+    CANCELED = "CANCELED",
+    PAYMENT_RECEIVED = "PAYMENT_RECEIVED",
+    PAYMENT_SUCCESS = "PAYMENT_SUCCESS",
+    PAYMENT_FAILED = "PAYMENT_FAILED"
+}
+
 export declare class SDK {
     private iframe;
     private iframeUrl;
@@ -31,6 +347,14 @@ export declare class SDK {
      * Send configuration to the iframe
      */
     private sendConfigToIframe;
+    /**
+     * Show skeleton loader while iframe is connecting
+     */
+    private showLoader;
+    /**
+     * Hide loader
+     */
+    private hideLoader;
     /**
      * Close the iframe and cleanup
      */
@@ -56,9 +380,6 @@ export declare class SDK {
     destroy(): void;
 }
 
-/**
- * Type definitions for SDK v2
- */
 declare interface SDKConfig {
     /** URL of the payment application to load in iframe */
     iframeUrl?: string;
@@ -78,7 +399,17 @@ declare interface SDKConfig {
     debug?: boolean;
 }
 
-declare interface TransactionData {
+declare interface ThemeStyles {
+    inputContainer?: InputContainerStyles;
+    input?: InputStyles;
+    button?: ButtonStyles;
+    disclaimerColor?: string;
+    fieldErrorColor?: string;
+    generalError?: GeneralMessageStyles;
+    generalSuccess?: GeneralMessageStyles;
+}
+
+export declare interface TransactionData {
     transaction?: {
         id: string;
         amount: number;
@@ -90,4 +421,6 @@ declare interface TransactionData {
     [key: string]: any;
 }
 
+export declare const VERSION = "0.0.1";
+
 export { }