@voxepay/checkout 0.1.0

package/README.md

@@ -0,0 +1,143 @@
+# @voxepay/checkout
+
+Modern, beautiful payment checkout modal for the web by **VoxePay**.
+
+## Installation
+
+```bash
+npm install @voxepay/checkout
+```
+
+## Quick Start
+
+### Via Script Tag (CDN)
+
+```html
+<script src="https://unpkg.com/@voxepay/checkout/dist/voxepay-checkout.min.js"></script>
+<script>
+  VoxePay.init({ apiKey: 'pk_live_xxxxx' });
+
+  document.getElementById('pay-btn').addEventListener('click', () => {
+    VoxePay.checkout({
+      amount: 500000, // ₦5,000 in kobo
+      currency: 'NGN',
+      description: 'Premium Plan',
+      customerEmail: 'customer@example.com',
+      onSuccess: (result) => {
+        console.log('Payment successful!', result);
+      },
+      onError: (error) => {
+        console.error('Payment failed:', error.message);
+      },
+    });
+  });
+</script>
+```
+
+### Via ES Modules
+
+```javascript
+import { VoxePay } from '@voxepay/checkout';
+
+// Initialize once
+VoxePay.init({
+  apiKey: 'pk_live_xxxxx',
+  theme: 'dark', // 'dark' | 'light' | 'auto'
+});
+
+// Open checkout
+VoxePay.checkout({
+  amount: 500000, // Amount in kobo (₦5,000)
+  currency: 'NGN',
+  description: 'Premium Plan',
+  customerEmail: 'customer@example.com',
+  onSuccess: (result) => {
+    console.log('Paid!', result);
+  },
+  onError: (error) => {
+    console.error('Failed:', error.message);
+  },
+  onClose: () => {
+    console.log('Modal closed');
+  },
+});
+```
+
+## API Reference
+
+### `VoxePay.init(config)`
+
+Initialize the SDK. Call this once before using `checkout()`.
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `apiKey` | `string` | ✅ | Your VoxePay API key |
+| `theme` | `'dark' \| 'light' \| 'auto'` | ❌ | Theme mode (default: `'dark'`) |
+| `locale` | `string` | ❌ | Locale for formatting (default: `'en-US'`) |
+| `customStyles` | `Partial<VoxePayTheme>` | ❌ | Custom CSS variables |
+
+### `VoxePay.checkout(options)`
+
+Open the checkout modal.
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `amount` | `number` | ✅ | Amount in smallest currency unit (kobo/cents) |
+| `currency` | `string` | ✅ | ISO 4217 currency code (e.g., `'NGN'`, `'USD'`) |
+| `description` | `string` | ❌ | Payment description shown in modal |
+| `customerEmail` | `string` | ❌ | Customer email for receipts |
+| `metadata` | `Record<string, unknown>` | ❌ | Additional metadata |
+| `onSuccess` | `(result: PaymentResult) => void` | ✅ | Success callback |
+| `onError` | `(error: PaymentError) => void` | ✅ | Error callback |
+| `onClose` | `() => void` | ❌ | Modal close callback |
+
+### `VoxePay.closeModal()`
+
+Programmatically close the checkout modal.
+
+### `VoxePay.setTheme(theme)`
+
+Change the theme dynamically.
+
+## Utilities
+
+```javascript
+import {
+  formatAmount,
+  getCurrencySymbol,
+  validateCardNumber,
+  detectCardBrand,
+} from '@voxepay/checkout';
+
+formatAmount(500000, 'NGN');        // "₦5,000.00"
+getCurrencySymbol('NGN');           // "₦"
+validateCardNumber('4111111111111111'); // { valid: true }
+detectCardBrand('4111111111111111');    // { name: 'Visa', code: 'visa', ... }
+```
+
+## Theming
+
+### Custom Colors
+
+```javascript
+VoxePay.init({
+  apiKey: 'pk_live_xxxxx',
+  customStyles: {
+    '--voxepay-primary': '#0061FF',
+    '--voxepay-secondary': '#0047CC',
+    '--voxepay-border-radius': '16px',
+  },
+});
+```
+
+## Supported Cards
+
+- Visa
+- Mastercard
+- Verve
+- American Express
+- Discover
+
+## License
+
+MIT © VoxePay

package/dist/components/modal.d.ts

@@ -0,0 +1,90 @@
+/**
+ * VoxePay Checkout Modal Component
+ * A modern, glassmorphism payment modal
+ */
+import type { CheckoutOptions } from '../types';
+export interface ModalState {
+    cardNumber: string;
+    expiry: string;
+    cvv: string;
+    otp: string;
+    errors: {
+        cardNumber?: string;
+        expiry?: string;
+        cvv?: string;
+        otp?: string;
+    };
+    isProcessing: boolean;
+    isSuccess: boolean;
+    isOtpStep: boolean;
+    otpTimer: number;
+    canResendOtp: boolean;
+    otpTimerInterval: number | null;
+}
+export declare class VoxePayModal {
+    private options;
+    private state;
+    private container;
+    private overlay;
+    constructor(options: CheckoutOptions);
+    /**
+     * Open the checkout modal
+     */
+    open(): void;
+    /**
+     * Close the checkout modal
+     */
+    close(): void;
+    /**
+     * Inject styles if not already present
+     */
+    private injectStyles;
+    /**
+     * Render the modal HTML
+     */
+    private render;
+    /**
+     * Get modal HTML
+     */
+    private getModalHTML;
+    /**
+     * Render success view
+     */
+    private renderSuccessView;
+    /**
+     * Render OTP verification view
+     */
+    private renderOTPView;
+    /**
+     * Attach OTP-specific event listeners
+     */
+    private attachOTPEventListeners;
+    private handleOTPInput;
+    private handleOTPKeydown;
+    private handleOTPPaste;
+    private updateOTPState;
+    private startOTPTimer;
+    private handleOTPSubmit;
+    private setOTPProcessing;
+    private verifyOTP;
+    private handleResendOTP;
+    private handleBackToCard;
+    /**
+     * Attach event listeners
+     */
+    private attachEventListeners;
+    private handleEscape;
+    private handleCardInput;
+    private handleExpiryInput;
+    private handleCVVInput;
+    private validateField;
+    private showError;
+    private clearError;
+    private handleSubmit;
+    private setProcessing;
+    private processPayment;
+    /**
+     * Get VoxePay branded styles
+     */
+    private getStyles;
+}