@voxepay/checkout 0.3.2 → 0.3.3

package/src/voxepay.ts

@@ -0,0 +1,202 @@
+/**
+ * VoxePay - Modern Payment Checkout SDK
+ * 
+ * A beautiful, modern payment modal for the web.
+ * 
+ * @example
+ * ```javascript
+ * // Initialize VoxePay
+ * VoxePay.init({ apiKey: 'pk_live_xxxxx' });
+ * 
+ * // Open checkout
+ * VoxePay.checkout({
+ *   amount: 4999,
+ *   currency: 'NGN',
+ *   description: 'Premium Plan',
+ *   onSuccess: (result) => console.log('Paid!', result),
+ *   onError: (error) => console.error('Failed', error),
+ * });
+ * ```
+ */
+
+import { VoxePayModal } from './components/modal';
+import type { VoxePayConfig, CheckoutOptions, VoxePayTheme } from './types';
+
+class VoxePaySDK {
+    private config: VoxePayConfig | null = null;
+    private currentModal: VoxePayModal | null = null;
+    private initialized = false;
+
+    /**
+     * Initialize VoxePay with your configuration
+     * @param config - Configuration object with API key and optional settings
+     */
+    init(config: VoxePayConfig): void {
+        if (!config.apiKey) {
+            console.error('[VoxePay] API key is required. Get your API key from the VoxePay dashboard: Settings > API Keys');
+            return;
+        }
+
+        if (!config.organizationId) {
+            console.error('[VoxePay] Organization ID is required. Find it in your VoxePay dashboard.');
+            return;
+        }
+
+        this.config = {
+            theme: 'dark',
+            locale: 'en-US',
+            ...config,
+        };
+        this.initialized = true;
+
+        // Apply theme
+        if (config.theme === 'auto') {
+            this.applyAutoTheme();
+        } else if (config.theme === 'light') {
+            document.documentElement.classList.add('voxepay-light');
+        }
+
+        // Apply custom styles
+        if (config.customStyles) {
+            this.applyCustomStyles(config.customStyles);
+        }
+
+        console.log('[VoxePay] Initialized successfully');
+    }
+
+    /**
+     * Open the checkout modal
+     * @param options - Checkout options including amount, currency, and callbacks
+     */
+    checkout(options: CheckoutOptions): void {
+        if (!this.initialized) {
+            console.error('[VoxePay] Not initialized. Call VoxePay.init() first.');
+            options.onError({
+                code: 'NOT_INITIALIZED',
+                message: 'VoxePay SDK not initialized. Call VoxePay.init() first.',
+                recoverable: false,
+            });
+            return;
+        }
+
+        if (!options.amount || options.amount <= 0) {
+            console.error('[VoxePay] Invalid amount');
+            options.onError({
+                code: 'INVALID_AMOUNT',
+                message: 'Payment amount must be greater than 0',
+                recoverable: false,
+            });
+            return;
+        }
+
+        if (!options.currency) {
+            console.error('[VoxePay] Currency is required');
+            options.onError({
+                code: 'INVALID_CURRENCY',
+                message: 'Currency code is required',
+                recoverable: false,
+            });
+            return;
+        }
+
+        // Close any existing modal
+        this.closeModal();
+
+        // Create and open new modal
+        this.currentModal = new VoxePayModal({
+            ...options,
+            _sdkConfig: {
+                apiKey: this.config!.apiKey,
+                organizationId: this.config!.organizationId,
+                baseUrl: this.config!.baseUrl,
+            },
+            onClose: () => {
+                this.currentModal = null;
+                options.onClose?.();
+            },
+        });
+
+        this.currentModal.open();
+    }
+
+    /**
+     * Close the current checkout modal
+     */
+    closeModal(): void {
+        if (this.currentModal) {
+            this.currentModal.close();
+            this.currentModal = null;
+        }
+    }
+
+    /**
+     * Set the theme
+     * @param theme - 'dark', 'light', or 'auto'
+     */
+    setTheme(theme: 'dark' | 'light' | 'auto'): void {
+        document.documentElement.classList.remove('voxepay-light');
+
+        if (theme === 'light') {
+            document.documentElement.classList.add('voxepay-light');
+        } else if (theme === 'auto') {
+            this.applyAutoTheme();
+        }
+
+        if (this.config) {
+            this.config.theme = theme;
+        }
+    }
+
+    /**
+     * Apply system theme preference
+     */
+    private applyAutoTheme(): void {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (!prefersDark) {
+            document.documentElement.classList.add('voxepay-light');
+        }
+
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            if (this.config?.theme === 'auto') {
+                document.documentElement.classList.toggle('voxepay-light', !e.matches);
+            }
+        });
+    }
+
+    /**
+     * Apply custom CSS variables
+     */
+    private applyCustomStyles(styles: Partial<VoxePayTheme>): void {
+        const root = document.documentElement;
+        for (const [key, value] of Object.entries(styles)) {
+            if (value) {
+                root.style.setProperty(key, value);
+            }
+        }
+    }
+
+    /**
+     * Get the SDK version
+     */
+    get version(): string {
+        return '0.3.0';
+    }
+
+    /**
+     * Check if SDK is initialized
+     */
+    get isInitialized(): boolean {
+        return this.initialized;
+    }
+}
+
+// Create singleton instance
+const VoxePay = new VoxePaySDK();
+
+// Export for different module systems
+export { VoxePay, VoxePaySDK };
+
+// Make available on window for script tag usage
+if (typeof window !== 'undefined') {
+    (window as unknown as { VoxePay: VoxePaySDK }).VoxePay = VoxePay;
+}