pesafy 0.1.0

package/dist/components/react/index.js

@@ -0,0 +1,200 @@
+// src/components/react/PaymentButton.tsx
+import { jsx } from "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__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: disabled || loading,
+      className: `pesafy-payment-btn ${className}`,
+      "aria-busy": loading,
+      children: loading ? /* @__PURE__ */ jsx("span", { className: "pesafy-payment-btn-loading", children: "Processing..." }) : children ?? `Pay KES ${amount.toLocaleString()}`
+    }
+  );
+}
+
+// src/components/react/PaymentForm.tsx
+import { useState } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function PaymentForm({
+  onSubmit,
+  defaultAmount = 0,
+  defaultReference = "",
+  disabled = false,
+  loading = false,
+  className = ""
+}) {
+  const [amount, setAmount] = useState(defaultAmount.toString());
+  const [phone, setPhone] = useState("");
+  const [reference, setReference] = useState(defaultReference);
+  const [desc, setDesc] = 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__ */ jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: `pesafy-payment-form ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "pesafy-payment-form-field", children: [
+          /* @__PURE__ */ jsx2("label", { htmlFor: "pesafy-amount", children: "Amount (KES)" }),
+          /* @__PURE__ */ jsx2(
+            "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__ */ jsxs("div", { className: "pesafy-payment-form-field", children: [
+          /* @__PURE__ */ jsx2("label", { htmlFor: "pesafy-phone", children: "M-Pesa Phone Number" }),
+          /* @__PURE__ */ jsx2(
+            "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__ */ jsxs("div", { className: "pesafy-payment-form-field", children: [
+          /* @__PURE__ */ jsx2("label", { htmlFor: "pesafy-reference", children: "Reference" }),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              id: "pesafy-reference",
+              type: "text",
+              value: reference,
+              onChange: (e) => setReference(e.target.value),
+              placeholder: "ORDER-123",
+              disabled,
+              maxLength: 12
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "pesafy-payment-form-field", children: [
+          /* @__PURE__ */ jsx2("label", { htmlFor: "pesafy-desc", children: "Description" }),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              id: "pesafy-desc",
+              type: "text",
+              value: desc,
+              onChange: (e) => setDesc(e.target.value),
+              placeholder: "Payment",
+              disabled,
+              maxLength: 13
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "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
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function PaymentStatus({
+  status,
+  message,
+  transactionId,
+  children,
+  className = ""
+}) {
+  if (status === "idle" && !children) return null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: `pesafy-payment-status pesafy-payment-status--${status} ${className}`,
+      role: "status",
+      "aria-live": "polite",
+      children: [
+        status === "pending" && (children ?? /* @__PURE__ */ jsx3("span", { children: "Waiting for payment..." })),
+        status === "success" && (children ?? /* @__PURE__ */ jsxs2("span", { children: [
+          "Payment successful",
+          transactionId && ` (${transactionId})`,
+          message && ` - ${message}`
+        ] })),
+        status === "error" && (children ?? /* @__PURE__ */ jsxs2("span", { children: [
+          "Payment failed",
+          message && ` - ${message}`
+        ] })),
+        status === "idle" && children
+      ]
+    }
+  );
+}
+
+// src/components/react/QRCode.tsx
+import { jsx as jsx4 } from "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__ */ jsx4(
+    "img",
+    {
+      src,
+      alt,
+      width: size,
+      height: size,
+      className: `pesafy-qrcode ${className}`,
+      loading: "lazy"
+    }
+  );
+}
+export {
+  PaymentButton,
+  PaymentForm,
+  PaymentStatus,
+  QRCode
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/react/PaymentButton.tsx","../../../src/components/react/PaymentForm.tsx","../../../src/components/react/PaymentStatus.tsx","../../../src/components/react/QRCode.tsx"],"sourcesContent":["/**\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":["jsx","jsx","jsxs","jsx"]}

package/dist/components/react/styles.css

@@ -0,0 +1,90 @@
+/* src/components/react/styles.css */
+.pesafy-payment-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  background: #00a651;
+  color: white;
+  transition: background 0.2s, opacity 0.2s;
+}
+.pesafy-payment-btn:hover:not(:disabled) {
+  background: #008f45;
+}
+.pesafy-payment-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.pesafy-payment-btn-loading {
+  opacity: 0.9;
+}
+.pesafy-payment-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 24rem;
+}
+.pesafy-payment-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.pesafy-payment-form-field label {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.pesafy-payment-form-field input {
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+}
+.pesafy-payment-form-field input:focus {
+  outline: none;
+  border-color: #00a651;
+  box-shadow: 0 0 0 2px rgba(0, 166, 81, 0.2);
+}
+.pesafy-payment-form-submit {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  background: #00a651;
+  color: white;
+  margin-top: 0.5rem;
+}
+.pesafy-payment-form-submit:hover:not(:disabled) {
+  background: #008f45;
+}
+.pesafy-payment-form-submit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.pesafy-qrcode {
+  display: block;
+}
+.pesafy-payment-status {
+  padding: 0.75rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+}
+.pesafy-payment-status--pending {
+  background: #fef3c7;
+  color: #92400e;
+}
+.pesafy-payment-status--success {
+  background: #d1fae5;
+  color: #065f46;
+}
+.pesafy-payment-status--error {
+  background: #fee2e2;
+  color: #991b1b;
+}
+/*# sourceMappingURL=styles.css.map */

package/dist/components/react/styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/react/styles.css"],"sourcesContent":["/* Pesafy React Components - Base styles */\n\n.pesafy-payment-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.75rem 1.5rem;\n  font-size: 1rem;\n  font-weight: 600;\n  border: none;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  background: #00a651;\n  color: white;\n  transition:\n    background 0.2s,\n    opacity 0.2s;\n}\n\n.pesafy-payment-btn:hover:not(:disabled) {\n  background: #008f45;\n}\n\n.pesafy-payment-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.pesafy-payment-btn-loading {\n  opacity: 0.9;\n}\n\n.pesafy-payment-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  max-width: 24rem;\n}\n\n.pesafy-payment-form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.pesafy-payment-form-field label {\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n\n.pesafy-payment-form-field input {\n  padding: 0.5rem 0.75rem;\n  font-size: 1rem;\n  border: 1px solid #d1d5db;\n  border-radius: 0.375rem;\n}\n\n.pesafy-payment-form-field input:focus {\n  outline: none;\n  border-color: #00a651;\n  box-shadow: 0 0 0 2px rgba(0, 166, 81, 0.2);\n}\n\n.pesafy-payment-form-submit {\n  padding: 0.75rem 1.5rem;\n  font-size: 1rem;\n  font-weight: 600;\n  border: none;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  background: #00a651;\n  color: white;\n  margin-top: 0.5rem;\n}\n\n.pesafy-payment-form-submit:hover:not(:disabled) {\n  background: #008f45;\n}\n\n.pesafy-payment-form-submit:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.pesafy-qrcode {\n  display: block;\n}\n\n.pesafy-payment-status {\n  padding: 0.75rem 1rem;\n  border-radius: 0.375rem;\n  font-size: 0.875rem;\n}\n\n.pesafy-payment-status--pending {\n  background: #fef3c7;\n  color: #92400e;\n}\n\n.pesafy-payment-status--success {\n  background: #d1fae5;\n  color: #065f46;\n}\n\n.pesafy-payment-status--error {\n  background: #fee2e2;\n  color: #991b1b;\n}\n"],"mappings":";AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,WAAS,QAAQ;AACjB,aAAW;AACX,eAAa;AACb,UAAQ;AACR,iBAAe;AACf,UAAQ;AACR,cAAY;AACZ,SAAO;AACP,cACE,WAAW,IAAI,EACf,QAAQ;AACZ;AAEA,CAjBC,kBAiBkB,MAAM,KAAK;AAC5B,cAAY;AACd;AAEA,CArBC,kBAqBkB;AACjB,WAAS;AACT,UAAQ;AACV;AAEA,CAAC;AACC,WAAS;AACX;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACL,aAAW;AACb;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AAEA,CANC,0BAM0B;AACzB,aAAW;AACX,eAAa;AACf;AAEA,CAXC,0BAW0B;AACzB,WAAS,OAAO;AAChB,aAAW;AACX,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACjB;AAEA,CAlBC,0BAkB0B,KAAK;AAC9B,WAAS;AACT,gBAAc;AACd,cAAY,EAAE,EAAE,EAAE,IAAI,KAAK,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;AACzC;AAEA,CAAC;AACC,WAAS,QAAQ;AACjB,aAAW;AACX,eAAa;AACb,UAAQ;AACR,iBAAe;AACf,UAAQ;AACR,cAAY;AACZ,SAAO;AACP,cAAY;AACd;AAEA,CAZC,0BAY0B,MAAM,KAAK;AACpC,cAAY;AACd;AAEA,CAhBC,0BAgB0B;AACzB,WAAS;AACT,UAAQ;AACV;AAEA,CAAC;AACC,WAAS;AACX;AAEA,CAAC;AACC,WAAS,QAAQ;AACjB,iBAAe;AACf,aAAW;AACb;AAEA,CAAC;AACC,cAAY;AACZ,SAAO;AACT;AAEA,CAAC;AACC,cAAY;AACZ,SAAO;AACT;AAEA,CAAC;AACC,cAAY;AACZ,SAAO;AACT;","names":[]}

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

@@ -0,0 +1,2 @@
+
+export {  }

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

@@ -0,0 +1,2 @@
+
+export {  }