@voxepay/checkout 0.0.1-security → 0.5.19

package/src/utils/formatter.ts

@@ -0,0 +1,91 @@
+/**
+ * Input formatting utilities for VoxePay Checkout
+ */
+
+/**
+ * Format card number with spaces every 4 digits
+ */
+export function formatCardNumber(value: string): string {
+    const cleaned = value.replace(/\D/g, '');
+    const groups = cleaned.match(/.{1,4}/g) || [];
+    return groups.join(' ').slice(0, 23); // Max: 19 digits + 4 spaces
+}
+
+/**
+ * Format expiry date as MM/YY
+ */
+export function formatExpiry(value: string): string {
+    const cleaned = value.replace(/\D/g, '');
+
+    if (cleaned.length === 0) return '';
+    if (cleaned.length === 1) {
+        return parseInt(cleaned) > 1 ? `0${cleaned}` : cleaned;
+    }
+    if (cleaned.length === 2) {
+        const month = parseInt(cleaned);
+        if (month > 12) return '12';
+        if (month === 0) return '01';
+        return cleaned;
+    }
+
+    const month = cleaned.slice(0, 2);
+    const year = cleaned.slice(2, 4);
+    return `${month}/${year}`;
+}
+
+/**
+ * Format CVV (numbers only, max 4 digits)
+ */
+export function formatCVV(value: string): string {
+    return value.replace(/\D/g, '').slice(0, 4);
+}
+
+/**
+ * Format currency amount
+ */
+export function formatAmount(amount: number, currency: string): string {
+    const formatter = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: currency,
+        minimumFractionDigits: 2,
+    });
+
+    // Convert from smallest unit (cents/kobo) to main unit
+    return formatter.format(amount / 100);
+}
+
+/**
+ * Format currency amount when already in main unit
+ */
+export function formatMainUnitAmount(amount: number, currency: string): string {
+    const formatter = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: currency,
+        minimumFractionDigits: 2,
+    });
+
+    return formatter.format(amount);
+}
+
+/**
+ * Get currency symbol
+ */
+export function getCurrencySymbol(currency: string): string {
+    const symbols: Record<string, string> = {
+        NGN: '₦',
+        USD: '$',
+        EUR: '€',
+        GBP: '£',
+        GHS: '₵',
+        KES: 'KSh',
+        ZAR: 'R',
+    };
+    return symbols[currency.toUpperCase()] || currency;
+}
+
+/**
+ * Format card PIN (numbers only, max 4 digits)
+ */
+export function formatPIN(value: string): string {
+    return value.replace(/\D/g, '').slice(0, 4);
+}

package/src/voxepay.ts

@@ -0,0 +1,200 @@
+/**
+ * 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 required organizationId and optional settings
+     */
+    init(config: VoxePayConfig): void {
+        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,
+                paymentLinkSlug: this.config!.paymentLinkSlug,
+                simulateWebhook: this.config!.simulateWebhook,
+                bypassKey: this.config!.bypassKey,
+            },
+            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.5.7';
+    }
+
+    /**
+     * 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;
+}