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: PaymentResult) => 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;
    };
    /** Show default success UI after payment (default true). If false, only unmount iframe. */
    showDefaultSuccessUI?: boolean;
}

export declare interface CardElementProps {
    paymentId: string;
    container?: string | HTMLElement;
    onComplete?: (result: PaymentResult) => 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 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;
    dark?: ThemeStyles;
}

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;
}

/**
 * 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 {
    publicKey: string;
    locale?: Locale;
}

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 {
    publicKey: string;
    iframeUrl: string;
    timeout: number;
    debug: boolean;
    locale?: Locale;
}

/**
 * Type definitions for SDK v2
 */
declare type Locale = 'en' | 'de' | 'es' | 'fr' | 'it' | 'nl' | 'pl' | 'pt';

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;
    };
    /** Show default success UI after payment (default true). If false, only unmount iframe. */
    showDefaultSuccessUI?: boolean;
    [key: string]: any;
}

export declare interface PaymentError {
    code: PaymentResultErrorCode;
    message: string;
    retryable: boolean;
}

export declare interface PaymentResult {
    status: PaymentResultStatus;
    paymentId: string;
    error?: PaymentError;
}

export declare enum PaymentResultErrorCode {
    THREE_DS_FAILED = "THREE_DS_FAILED",
    PAYMENT_PROCESSING_ERROR = "PAYMENT_PROCESSING_ERROR"
}

export declare enum PaymentResultStatus {
    SUCCESS = "SUCCESS",
    FAILED = "FAILED"
}

export declare class PaymentSDK {
    private config;
    private iframeUrl;
    private timeout;
    private debug;
    /**
     * 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: PaymentResult) => void;
        onError?: (error: any) => void;
        onClose?: () => void;
    }): CardElement;
    /**
     * Get the iframe URL being used
     */
    getIframeUrl(): string;
    /**
     * Get the API key
     */
    getApiKey(): string;
}

export declare interface PaymentSDKConfig {
    /** Public API key */
    publicKey: string;
    /** Locale for the UI. Defaults to 'en' */
    locale?: Locale;
}

declare interface ThemeStyles {
    inputContainer?: InputContainerStyles;
    input?: InputStyles;
    button?: ButtonStyles;
    disclaimerColor?: string;
    fieldErrorColor?: string;
    generalError?: GeneralMessageStyles;
    generalSuccess?: GeneralMessageStyles;
}

export declare const VERSION = "0.8.0";

export { }