@zahlen/checkout 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,257 @@
+# @zahlen/checkout
+
+<p align="center">
+  <img src="https://img.shields.io/npm/v/@zahlen/checkout?style=flat-square" alt="npm version" />
+  <img src="https://img.shields.io/npm/l/@zahlen/checkout?style=flat-square" alt="license" />
+  <img src="https://img.shields.io/bundlephobia/minzip/@zahlen/checkout?style=flat-square" alt="bundle size" />
+</p>
+
+<p align="center">
+  <strong>A modern, Gen Z-friendly payment checkout modal for the web.</strong>
+  <br />
+  Beautiful • Fast • Easy to integrate
+</p>
+
+---
+
+## ✨ Features
+
+- 🎨 **Modern UI** - Glassmorphism design with dark mode by default
+- ⚡ **Lightweight** - Under 10KB gzipped
+- 🔒 **Secure** - PCI-compliant, no card data touches your servers
+- 📱 **Responsive** - Works beautifully on all devices
+- 🌍 **Multi-currency** - Supports NGN, USD, EUR, GBP, and more
+- 🎭 **Customizable** - Theming via CSS variables
+- 💳 **Smart Detection** - Auto-detects card brands (Visa, Mastercard, Verve, etc.)
+
+---
+
+## 🚀 Quick Start
+
+### CDN (Recommended for quick setup)
+
+```html
+<!-- Add the script -->
+<script src="https://unpkg.com/@zahlen/checkout"></script>
+
+<!-- Add a pay button -->
+<button id="pay-btn">Pay ₦4,999</button>
+
+<script>
+  // Initialize
+  Zahlen.init({ apiKey: 'pk_live_your_api_key' });
+
+  // Handle click
+  document.getElementById('pay-btn').onclick = () => {
+    Zahlen.checkout({
+      amount: 499900,          // Amount in kobo (₦4,999)
+      currency: 'NGN',
+      description: 'Premium Plan',
+      onSuccess: (result) => {
+        console.log('Payment successful!', result);
+        // Redirect to success page
+      },
+      onError: (error) => {
+        console.error('Payment failed:', error.message);
+      }
+    });
+  };
+</script>
+```
+
+### npm / yarn
+
+```bash
+npm install @zahlen/checkout
+# or
+yarn add @zahlen/checkout
+```
+
+```typescript
+import { Zahlen } from '@zahlen/checkout';
+
+Zahlen.init({ apiKey: 'pk_live_your_api_key' });
+
+function handlePayment() {
+  Zahlen.checkout({
+    amount: 499900,
+    currency: 'NGN',
+    description: 'Premium Plan',
+    customerEmail: 'user@example.com',
+    onSuccess: (result) => {
+      console.log('Paid!', result);
+    },
+    onError: (error) => {
+      console.error('Failed:', error);
+    },
+    onClose: () => {
+      console.log('Modal closed');
+    }
+  });
+}
+```
+
+---
+
+## 📖 API Reference
+
+### `Zahlen.init(config)`
+
+Initialize the SDK. Call this once when your app loads.
+
+```typescript
+interface ZahlenConfig {
+  apiKey: string;                    // Required: Your API key
+  theme?: 'dark' | 'light' | 'auto'; // Default: 'dark'
+  locale?: string;                   // Default: 'en-US'
+  customStyles?: Partial<ZahlenTheme>;
+}
+```
+
+### `Zahlen.checkout(options)`
+
+Open the checkout modal.
+
+```typescript
+interface CheckoutOptions {
+  amount: number;           // Required: Amount in smallest unit (kobo/cents)
+  currency: string;         // Required: ISO currency code
+  description?: string;     // Optional: Payment description
+  customerEmail?: string;   // Optional: For receipts
+  metadata?: object;        // Optional: Custom data
+  onSuccess: (result: PaymentResult) => void;
+  onError: (error: PaymentError) => void;
+  onClose?: () => void;
+}
+```
+
+### `Zahlen.setTheme(theme)`
+
+Change the theme dynamically.
+
+```typescript
+Zahlen.setTheme('light');  // or 'dark' or 'auto'
+```
+
+### `Zahlen.closeModal()`
+
+Programmatically close the modal.
+
+---
+
+## 🎨 Customization
+
+### Custom Colors
+
+```typescript
+Zahlen.init({
+  apiKey: 'pk_live_xxx',
+  customStyles: {
+    '--zahlen-primary': '#FF6B6B',
+    '--zahlen-secondary': '#4ECDC4',
+    '--zahlen-bg': '#1A1A2E',
+  }
+});
+```
+
+### Available CSS Variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--zahlen-primary` | `#7C3AED` | Primary brand color |
+| `--zahlen-secondary` | `#4F46E5` | Secondary/gradient color |
+| `--zahlen-bg` | `#0F0F23` | Modal background |
+| `--zahlen-surface` | `rgba(255,255,255,0.05)` | Input backgrounds |
+| `--zahlen-border` | `rgba(255,255,255,0.1)` | Border color |
+| `--zahlen-text` | `#FFFFFF` | Primary text |
+| `--zahlen-text-muted` | `#A0A0B0` | Muted text |
+| `--zahlen-border-radius` | `12px` | Border radius |
+
+---
+
+## 📱 Framework Integrations
+
+### React
+
+```bash
+npm install @zahlen/checkout-react
+```
+
+```tsx
+import { ZahlenButton, ZahlenProvider } from '@zahlen/checkout-react';
+
+function App() {
+  return (
+    <ZahlenProvider apiKey="pk_live_xxx">
+      <ZahlenButton
+        amount={499900}
+        currency="NGN"
+        onSuccess={(result) => console.log('Paid!', result)}
+        onError={(error) => console.error(error)}
+      >
+        Pay ₦4,999
+      </ZahlenButton>
+    </ZahlenProvider>
+  );
+}
+```
+
+### Angular
+
+```bash
+npm install @zahlen/checkout-angular
+```
+
+```typescript
+// app.module.ts
+import { ZahlenModule } from '@zahlen/checkout-angular';
+
+@NgModule({
+  imports: [ZahlenModule.forRoot({ apiKey: 'pk_live_xxx' })]
+})
+export class AppModule {}
+```
+
+```html
+<!-- component.html -->
+<button zahlenCheckout
+  [amount]="499900"
+  [currency]="'NGN'"
+  (success)="onSuccess($event)"
+  (error)="onError($event)">
+  Pay ₦4,999
+</button>
+```
+
+---
+
+## 💳 Supported Cards
+
+| Card Brand | Supported |
+|------------|-----------|
+| Visa | ✅ |
+| Mastercard | ✅ |
+| Verve | ✅ |
+| American Express | ✅ |
+| Discover | ✅ |
+
+---
+
+## 🔒 Security
+
+- All card data is encrypted and processed securely
+- PCI DSS compliant
+- No sensitive data stored on your servers
+- Tokenized payments
+
+---
+
+## 📄 License
+
+MIT © Zahlen
+
+---
+
+<p align="center">
+  Made with 💜 by the Zahlen team
+</p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zahlen/checkout",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Modern, Gen Z-friendly payment checkout modal for the web",
   "author": "Zahlen",
   "license": "MIT",
@@ -31,7 +31,8 @@
     "index.cjs.js",
     "index.esm.js",
     "index.d.ts",
-    "src/**/*.d.ts"
+    "src/**/*.d.ts",
+    "README.md"
   ],
   "dependencies": {}
 }