pesafy 0.1.0

package/README.md

@@ -0,0 +1,177 @@
+# Pesafy 💳
+
+> A powerful, type-safe payment gateway library for African payment systems, starting with M-Pesa Daraja API
+
+[![npm version](https://img.shields.io/npm/v/pesafy.svg)](https://www.npmjs.com/package/pesafy)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.7-blue.svg)](https://www.typescriptlang.org/)
+
+Pesafy simplifies payment processing for Kenyan merchants by providing a clean, well-documented, and easy-to-use interface for M-Pesa transactions. Built with TypeScript, following industry best practices inspired by Stripe.
+
+## ✨ Features
+
+- 🚀 **Easy Integration**: Simple, intuitive API design
+- 🔒 **Type-Safe**: Full TypeScript support with comprehensive types
+- 🎯 **Complete M-Pesa Coverage**: STK Push, B2C, B2B, C2B, QR Codes, and more
+- 🔐 **Secure**: Built-in security credential encryption and webhook verification
+- 🎨 **Dashboard Ready**: Payment monitoring and webhook management dashboard
+- 🧩 **Component Library**: Reusable payment components for React/Vue
+- 📚 **Well Documented**: Comprehensive documentation and examples
+- ⚡ **Fast**: Built with Bun for optimal performance
+
+## 📦 Installation
+
+```bash
+# Using npm
+npm install pesafy
+
+# Using yarn
+yarn add pesafy
+
+# Using pnpm
+pnpm add pesafy
+
+# Using bun
+bun add pesafy
+```
+
+## 🚀 Quick Start
+
+```typescript
+import { Mpesa } from "pesafy";
+
+const mpesa = new Mpesa({
+  consumerKey: "your-consumer-key",
+  consumerSecret: "your-consumer-secret",
+  environment: "sandbox",
+  lipaNaMpesaShortCode: "174379",
+  lipaNaMpesaPassKey: "your-passkey",
+});
+
+// STK Push (M-Pesa Express)
+const result = await mpesa.stkPush({
+  amount: 100,
+  phoneNumber: "254712345678",
+  callbackUrl: "https://yoursite.com/callback",
+  accountReference: "ORDER-123",
+  transactionDesc: "Payment for order",
+});
+```
+
+## 📚 Documentation
+
+- **[Getting Started Guide](./docs/guides/getting-started.md)** - Learn how to set up Pesafy
+- **[API Reference](./docs/api/)** - Complete API documentation
+- **[Examples](./docs/examples/)** - Code examples for different frameworks
+- **[Architecture](./ARCHITECTURE.md)** - System architecture overview
+- **[Project Plan](./PROJECT_PLAN.md)** - Development roadmap
+
+## 🎯 Supported APIs
+
+### ✅ Available
+
+- **STK Push (M-Pesa Express)** - Initiate payments via STK Push
+- **STK Query** - Check STK Push transaction status
+- **B2C** - Business to Customer payments
+- **B2B** - Business to Business payments
+- **C2B** - Register URLs & simulate (sandbox)
+- **Dynamic QR Codes** - Generate LIPA NA M-PESA QR codes
+- **Transaction Status** - Query transaction status
+- **Reversal** - Reverse transactions
+
+### 📦 Components
+
+- **PaymentButton** - Simple button to trigger payments
+- **PaymentForm** - Complete form for collecting payment details
+- **QRCode** - Display M-Pesa dynamic QR codes
+- **PaymentStatus** - Show payment status with visual feedback
+
+## 🏗️ Project Structure
+
+```
+pesafy/
+├── src/              # Source code
+├── docs/             # Documentation
+├── tests/            # Test files
+├── examples/         # Example projects
+└── components/       # Payment components (coming soon)
+```
+
+See [FOLDER_STRUCTURE.md](./FOLDER_STRUCTURE.md) for detailed structure.
+
+## 🧪 Development
+
+```bash
+# Install dependencies
+bun install
+
+# Run tests
+bun test
+
+# Build the library
+bun run build
+
+# Run type checking
+bun run typecheck
+
+# Format code
+bun run format
+
+# Lint code
+bun run lint
+```
+
+## 📊 Dashboard (SaaS)
+
+Run the payment monitoring dashboard:
+
+```bash
+cd dashboard
+bun install
+bun run dev
+```
+
+Open http://localhost:3000 to view the dashboard. See [RUNNING.md](./RUNNING.md) for full instructions.
+
+## 📝 Contributing
+
+Contributions are welcome! Please read our contributing guidelines before submitting PRs.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## 🔐 Security
+
+For security concerns, please email [lewisodero27@gmail.com](mailto:lewisodero27@gmail.com) instead of using the issue tracker.
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+- [Safaricom Daraja API](https://developer.safaricom.co.ke/) - For providing the M-Pesa API
+- Inspired by payment gateway patterns from Stripe and other industry leaders
+
+## 📞 Support
+
+- 📧 Email: [lewisodero27@gmail.com](mailto:lewisodero27@gmail.com)
+- 🐛 Issues: [GitHub Issues](https://github.com/levos-snr/pesafy/issues)
+- 📖 Documentation: [Full Documentation](./docs/)
+
+## 🗺️ Roadmap
+
+See [PROJECT_PLAN.md](./PROJECT_PLAN.md) for the complete development roadmap.
+
+**Phase 1** (Current): Core library foundation ✅  
+**Phase 2**: Payment processing implementation 🚧  
+**Phase 3**: Webhook management system 📅  
+**Phase 4**: Dashboard development 📅  
+**Phase 5**: Payment components 📅
+
+---
+
+Made with ❤️ for the African developer community

package/dist/components/react/index.cjs

@@ -0,0 +1,230 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/react/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  PaymentButton: () => PaymentButton,
+  PaymentForm: () => PaymentForm,
+  PaymentStatus: () => PaymentStatus,
+  QRCode: () => QRCode
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/react/PaymentButton.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function PaymentButton({
+  amount,
+  onPay,
+  disabled = false,
+  loading = false,
+  children,
+  className = ""
+}) {
+  const handleClick = async () => {
+    if (disabled || loading) return;
+    await onPay({ amount });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: disabled || loading,
+      className: `pesafy-payment-btn ${className}`,
+      "aria-busy": loading,
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pesafy-payment-btn-loading", children: "Processing..." }) : children ?? `Pay KES ${amount.toLocaleString()}`
+    }
+  );
+}
+
+// src/components/react/PaymentForm.tsx
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function PaymentForm({
+  onSubmit,
+  defaultAmount = 0,
+  defaultReference = "",
+  disabled = false,
+  loading = false,
+  className = ""
+}) {
+  const [amount, setAmount] = (0, import_react.useState)(defaultAmount.toString());
+  const [phone, setPhone] = (0, import_react.useState)("");
+  const [reference, setReference] = (0, import_react.useState)(defaultReference);
+  const [desc, setDesc] = (0, import_react.useState)("Payment");
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (disabled || loading) return;
+    const amt = Number.parseFloat(amount);
+    if (Number.isNaN(amt) || amt <= 0) return;
+    const cleaned = phone.replace(/\D/g, "");
+    if (cleaned.length < 9) return;
+    await onSubmit({
+      amount: amt,
+      phoneNumber: phone,
+      accountReference: reference || `REF-${Date.now()}`,
+      transactionDesc: desc
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: `pesafy-payment-form ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "pesafy-payment-form-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "pesafy-amount", children: "Amount (KES)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              id: "pesafy-amount",
+              type: "number",
+              min: "1",
+              step: "0.01",
+              value: amount,
+              onChange: (e) => setAmount(e.target.value),
+              placeholder: "100",
+              disabled,
+              required: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "pesafy-payment-form-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "pesafy-phone", children: "M-Pesa Phone Number" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              id: "pesafy-phone",
+              type: "tel",
+              value: phone,
+              onChange: (e) => setPhone(e.target.value),
+              placeholder: "07XX XXX XXX or 2547XX XXX XXX",
+              disabled,
+              required: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "pesafy-payment-form-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "pesafy-reference", children: "Reference" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              id: "pesafy-reference",
+              type: "text",
+              value: reference,
+              onChange: (e) => setReference(e.target.value),
+              placeholder: "ORDER-123",
+              disabled,
+              maxLength: 12
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "pesafy-payment-form-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "pesafy-desc", children: "Description" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              id: "pesafy-desc",
+              type: "text",
+              value: desc,
+              onChange: (e) => setDesc(e.target.value),
+              placeholder: "Payment",
+              disabled,
+              maxLength: 13
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "submit",
+            disabled: disabled || loading,
+            className: "pesafy-payment-form-submit",
+            "aria-busy": loading,
+            children: loading ? "Processing..." : "Pay with M-Pesa"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/react/PaymentStatus.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function PaymentStatus({
+  status,
+  message,
+  transactionId,
+  children,
+  className = ""
+}) {
+  if (status === "idle" && !children) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: `pesafy-payment-status pesafy-payment-status--${status} ${className}`,
+      role: "status",
+      "aria-live": "polite",
+      children: [
+        status === "pending" && (children ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Waiting for payment..." })),
+        status === "success" && (children ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+          "Payment successful",
+          transactionId && ` (${transactionId})`,
+          message && ` - ${message}`
+        ] })),
+        status === "error" && (children ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+          "Payment failed",
+          message && ` - ${message}`
+        ] })),
+        status === "idle" && children
+      ]
+    }
+  );
+}
+
+// src/components/react/QRCode.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function QRCode({
+  base64,
+  alt = "M-Pesa QR Code",
+  size = 300,
+  className = ""
+}) {
+  const src = base64.startsWith("data:") ? base64 : `data:image/png;base64,${base64}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "img",
+    {
+      src,
+      alt,
+      width: size,
+      height: size,
+      className: `pesafy-qrcode ${className}`,
+      loading: "lazy"
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PaymentButton,
+  PaymentForm,
+  PaymentStatus,
+  QRCode
+});
+//# sourceMappingURL=index.cjs.map

package/dist/components/react/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/react/index.tsx","../../../src/components/react/PaymentButton.tsx","../../../src/components/react/PaymentForm.tsx","../../../src/components/react/PaymentStatus.tsx","../../../src/components/react/QRCode.tsx"],"sourcesContent":["/**\n * Pesafy React Components\n * Use with your backend API - never expose Daraja credentials in the browser\n *\n * Import styles: import \"pesafy/components/react/styles.css\"\n */\n\nexport type { PaymentButtonProps } from \"./PaymentButton\";\nexport { PaymentButton } from \"./PaymentButton\";\nexport type { PaymentFormData, PaymentFormProps } from \"./PaymentForm\";\nexport { PaymentForm } from \"./PaymentForm\";\nexport type { PaymentStatusProps, PaymentStatusState } from \"./PaymentStatus\";\nexport { PaymentStatus } from \"./PaymentStatus\";\nexport type { QRCodeProps } from \"./QRCode\";\nexport { QRCode } from \"./QRCode\";\n","/**\n * PaymentButton - Trigger M-Pesa STK Push payment\n * Call onPay with payment details; parent handles API call (credentials stay server-side)\n */\n\nimport type { ReactNode } from \"react\";\n\nexport interface PaymentButtonProps {\n  amount: number;\n  /** Called when user clicks pay. Parent should call your backend which uses Pesafy */\n  onPay: (params: { amount: number }) => void | Promise<void>;\n  disabled?: boolean;\n  loading?: boolean;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function PaymentButton({\n  amount,\n  onPay,\n  disabled = false,\n  loading = false,\n  children,\n  className = \"\",\n}: PaymentButtonProps) {\n  const handleClick = async () => {\n    if (disabled || loading) return;\n    await onPay({ amount });\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={disabled || loading}\n      className={`pesafy-payment-btn ${className}`}\n      aria-busy={loading}\n    >\n      {loading ? (\n        <span className=\"pesafy-payment-btn-loading\">Processing...</span>\n      ) : (\n        (children ?? `Pay KES ${amount.toLocaleString()}`)\n      )}\n    </button>\n  );\n}\n","/**\n * PaymentForm - Collect payment details for M-Pesa STK Push\n * Parent receives form data and handles API call (credentials stay server-side)\n */\n\nimport { type FormEvent, useState } from \"react\";\n\nexport interface PaymentFormData {\n  amount: number;\n  phoneNumber: string;\n  accountReference: string;\n  transactionDesc: string;\n}\n\nexport interface PaymentFormProps {\n  /** Called on submit. Parent should call your backend which uses Pesafy stkPush */\n  onSubmit: (data: PaymentFormData) => void | Promise<void>;\n  defaultAmount?: number;\n  defaultReference?: string;\n  disabled?: boolean;\n  loading?: boolean;\n  className?: string;\n}\n\nexport function PaymentForm({\n  onSubmit,\n  defaultAmount = 0,\n  defaultReference = \"\",\n  disabled = false,\n  loading = false,\n  className = \"\",\n}: PaymentFormProps) {\n  const [amount, setAmount] = useState(defaultAmount.toString());\n  const [phone, setPhone] = useState(\"\");\n  const [reference, setReference] = useState(defaultReference);\n  const [desc, setDesc] = useState(\"Payment\");\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    if (disabled || loading) return;\n\n    const amt = Number.parseFloat(amount);\n    if (Number.isNaN(amt) || amt <= 0) return;\n\n    const cleaned = phone.replace(/\\D/g, \"\");\n    if (cleaned.length < 9) return;\n\n    await onSubmit({\n      amount: amt,\n      phoneNumber: phone,\n      accountReference: reference || `REF-${Date.now()}`,\n      transactionDesc: desc,\n    });\n  };\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className={`pesafy-payment-form ${className}`}\n    >\n      <div className=\"pesafy-payment-form-field\">\n        <label htmlFor=\"pesafy-amount\">Amount (KES)</label>\n        <input\n          id=\"pesafy-amount\"\n          type=\"number\"\n          min=\"1\"\n          step=\"0.01\"\n          value={amount}\n          onChange={(e) => setAmount((e.target as HTMLInputElement).value)}\n          placeholder=\"100\"\n          disabled={disabled}\n          required\n        />\n      </div>\n      <div className=\"pesafy-payment-form-field\">\n        <label htmlFor=\"pesafy-phone\">M-Pesa Phone Number</label>\n        <input\n          id=\"pesafy-phone\"\n          type=\"tel\"\n          value={phone}\n          onChange={(e) => setPhone((e.target as HTMLInputElement).value)}\n          placeholder=\"07XX XXX XXX or 2547XX XXX XXX\"\n          disabled={disabled}\n          required\n        />\n      </div>\n      <div className=\"pesafy-payment-form-field\">\n        <label htmlFor=\"pesafy-reference\">Reference</label>\n        <input\n          id=\"pesafy-reference\"\n          type=\"text\"\n          value={reference}\n          onChange={(e) => setReference((e.target as HTMLInputElement).value)}\n          placeholder=\"ORDER-123\"\n          disabled={disabled}\n          maxLength={12}\n        />\n      </div>\n      <div className=\"pesafy-payment-form-field\">\n        <label htmlFor=\"pesafy-desc\">Description</label>\n        <input\n          id=\"pesafy-desc\"\n          type=\"text\"\n          value={desc}\n          onChange={(e) => setDesc((e.target as HTMLInputElement).value)}\n          placeholder=\"Payment\"\n          disabled={disabled}\n          maxLength={13}\n        />\n      </div>\n      <button\n        type=\"submit\"\n        disabled={disabled || loading}\n        className=\"pesafy-payment-form-submit\"\n        aria-busy={loading}\n      >\n        {loading ? \"Processing...\" : \"Pay with M-Pesa\"}\n      </button>\n    </form>\n  );\n}\n","/**\n * PaymentStatus - Display payment state (pending, success, failed)\n */\n\nimport type { ReactNode } from \"react\";\n\nexport type PaymentStatusState = \"idle\" | \"pending\" | \"success\" | \"error\";\n\nexport interface PaymentStatusProps {\n  status: PaymentStatusState;\n  /** Optional message for success/error states */\n  message?: string;\n  /** Optional transaction/callback data */\n  transactionId?: string;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function PaymentStatus({\n  status,\n  message,\n  transactionId,\n  children,\n  className = \"\",\n}: PaymentStatusProps) {\n  if (status === \"idle\" && !children) return null;\n\n  return (\n    <div\n      className={`pesafy-payment-status pesafy-payment-status--${status} ${className}`}\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      {status === \"pending\" &&\n        (children ?? <span>Waiting for payment...</span>)}\n      {status === \"success\" &&\n        (children ?? (\n          <span>\n            Payment successful\n            {transactionId && ` (${transactionId})`}\n            {message && ` - ${message}`}\n          </span>\n        ))}\n      {status === \"error\" &&\n        (children ?? (\n          <span>\n            Payment failed\n            {message && ` - ${message}`}\n          </span>\n        ))}\n      {status === \"idle\" && children}\n    </div>\n  );\n}\n","/**\n * QRCode - Display M-Pesa Dynamic QR code\n * Pass base64 image from mpesa.qrCode() response\n */\n\nexport interface QRCodeProps {\n  /** Base64 QR code image from Dynamic QR API */\n  base64: string;\n  alt?: string;\n  size?: number;\n  className?: string;\n}\n\nexport function QRCode({\n  base64,\n  alt = \"M-Pesa QR Code\",\n  size = 300,\n  className = \"\",\n}: QRCodeProps) {\n  const src = base64.startsWith(\"data:\")\n    ? base64\n    : `data:image/png;base64,${base64}`;\n\n  return (\n    <img\n      src={src}\n      alt={alt}\n      width={size}\n      height={size}\n      className={`pesafy-qrcode ${className}`}\n      loading=\"lazy\"\n    />\n  );\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/components/react/index.d.cts

@@ -0,0 +1,63 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface PaymentButtonProps {
+    amount: number;
+    /** Called when user clicks pay. Parent should call your backend which uses Pesafy */
+    onPay: (params: {
+        amount: number;
+    }) => void | Promise<void>;
+    disabled?: boolean;
+    loading?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+declare function PaymentButton({ amount, onPay, disabled, loading, children, className, }: PaymentButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * PaymentForm - Collect payment details for M-Pesa STK Push
+ * Parent receives form data and handles API call (credentials stay server-side)
+ */
+interface PaymentFormData {
+    amount: number;
+    phoneNumber: string;
+    accountReference: string;
+    transactionDesc: string;
+}
+interface PaymentFormProps {
+    /** Called on submit. Parent should call your backend which uses Pesafy stkPush */
+    onSubmit: (data: PaymentFormData) => void | Promise<void>;
+    defaultAmount?: number;
+    defaultReference?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+}
+declare function PaymentForm({ onSubmit, defaultAmount, defaultReference, disabled, loading, className, }: PaymentFormProps): react_jsx_runtime.JSX.Element;
+
+type PaymentStatusState = "idle" | "pending" | "success" | "error";
+interface PaymentStatusProps {
+    status: PaymentStatusState;
+    /** Optional message for success/error states */
+    message?: string;
+    /** Optional transaction/callback data */
+    transactionId?: string;
+    children?: ReactNode;
+    className?: string;
+}
+declare function PaymentStatus({ status, message, transactionId, children, className, }: PaymentStatusProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * QRCode - Display M-Pesa Dynamic QR code
+ * Pass base64 image from mpesa.qrCode() response
+ */
+interface QRCodeProps {
+    /** Base64 QR code image from Dynamic QR API */
+    base64: string;
+    alt?: string;
+    size?: number;
+    className?: string;
+}
+declare function QRCode({ base64, alt, size, className, }: QRCodeProps): react_jsx_runtime.JSX.Element;
+
+export { PaymentButton, type PaymentButtonProps, PaymentForm, type PaymentFormData, type PaymentFormProps, PaymentStatus, type PaymentStatusProps, type PaymentStatusState, QRCode, type QRCodeProps };

package/dist/components/react/index.d.ts

@@ -0,0 +1,63 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface PaymentButtonProps {
+    amount: number;
+    /** Called when user clicks pay. Parent should call your backend which uses Pesafy */
+    onPay: (params: {
+        amount: number;
+    }) => void | Promise<void>;
+    disabled?: boolean;
+    loading?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+declare function PaymentButton({ amount, onPay, disabled, loading, children, className, }: PaymentButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * PaymentForm - Collect payment details for M-Pesa STK Push
+ * Parent receives form data and handles API call (credentials stay server-side)
+ */
+interface PaymentFormData {
+    amount: number;
+    phoneNumber: string;
+    accountReference: string;
+    transactionDesc: string;
+}
+interface PaymentFormProps {
+    /** Called on submit. Parent should call your backend which uses Pesafy stkPush */
+    onSubmit: (data: PaymentFormData) => void | Promise<void>;
+    defaultAmount?: number;
+    defaultReference?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+}
+declare function PaymentForm({ onSubmit, defaultAmount, defaultReference, disabled, loading, className, }: PaymentFormProps): react_jsx_runtime.JSX.Element;
+
+type PaymentStatusState = "idle" | "pending" | "success" | "error";
+interface PaymentStatusProps {
+    status: PaymentStatusState;
+    /** Optional message for success/error states */
+    message?: string;
+    /** Optional transaction/callback data */
+    transactionId?: string;
+    children?: ReactNode;
+    className?: string;
+}
+declare function PaymentStatus({ status, message, transactionId, children, className, }: PaymentStatusProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * QRCode - Display M-Pesa Dynamic QR code
+ * Pass base64 image from mpesa.qrCode() response
+ */
+interface QRCodeProps {
+    /** Base64 QR code image from Dynamic QR API */
+    base64: string;
+    alt?: string;
+    size?: number;
+    className?: string;
+}
+declare function QRCode({ base64, alt, size, className, }: QRCodeProps): react_jsx_runtime.JSX.Element;
+
+export { PaymentButton, type PaymentButtonProps, PaymentForm, type PaymentFormData, type PaymentFormProps, PaymentStatus, type PaymentStatusProps, type PaymentStatusState, QRCode, type QRCodeProps };