@mavunta/react 1.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Chainwaka Technologies
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,49 @@
+# @mavunta/react
+
+React components and hooks for **Mavunta Pay** checkout. Wraps [`@mavunta/checkout-js`](https://www.npmjs.com/package/@mavunta/checkout-js) (publishable key, browser only); your backend creates the payment intent with a secret key via [`@mavunta/sdk`](https://www.npmjs.com/package/@mavunta/sdk).
+
+## Install
+
+```bash
+npm install @mavunta/react react
+```
+
+## Checkout button
+
+```tsx
+import { MavuntaCheckoutButton } from '@mavunta/react'
+
+export function PayButton({ paymentIntentId }: { paymentIntentId: string }) {
+  return (
+    <MavuntaCheckoutButton
+      publicKey="cwk_test_pk_…"
+      paymentIntentId={paymentIntentId}
+      onError={(e) => console.error(e)}
+    >
+      Pay with Mavunta
+    </MavuntaCheckoutButton>
+  )
+}
+```
+
+Success is confirmed server-side via webhooks after the redirect, so there is no `onSuccess` on the button.
+
+## Hooks
+
+```tsx
+import { useMavuntaCheckout, useMavuntaPaymentStatus } from '@mavunta/react'
+
+// imperative checkout
+const { redirectToCheckout, loading, error } = useMavuntaCheckout('cwk_test_pk_…')
+
+// poll a payment's status inline (e.g. a "waiting for payment" screen)
+const { status, intent } = useMavuntaPaymentStatus('cwk_test_pk_…', paymentIntentId)
+```
+
+## Security
+
+Use your **publishable** key only. A publishable key can read a single payment intent and nothing else; keep secret keys on your server.
+
+## License
+
+MIT © Chainwaka Technologies. Not affiliated with CoinW or any similarly named exchange.

package/dist/index.cjs

@@ -0,0 +1,98 @@
+'use strict';
+
+var react = require('react');
+var checkoutJs = require('@mavunta/checkout-js');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/useMavuntaCheckout.ts
+function useMavuntaCheckout(publicKey, baseUrl) {
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const clientRef = react.useRef(null);
+  const getClient = react.useCallback(() => {
+    const cached = clientRef.current;
+    if (cached && cached.key === publicKey && cached.base === baseUrl) return cached.promise;
+    const promise = checkoutJs.loadMavunta(publicKey, { baseUrl });
+    clientRef.current = { key: publicKey, base: baseUrl, promise };
+    return promise;
+  }, [publicKey, baseUrl]);
+  const retrievePaymentIntent = react.useCallback(
+    async (id) => {
+      const client = await getClient();
+      return client.retrievePaymentIntent(id);
+    },
+    [getClient]
+  );
+  const redirectToCheckout = react.useCallback(
+    async (paymentIntentId) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const client = await getClient();
+        await client.redirectToCheckout({ paymentIntentId });
+      } catch (err) {
+        const e = err instanceof Error ? err : new Error(String(err));
+        setError(e);
+        setLoading(false);
+        throw e;
+      }
+    },
+    [getClient]
+  );
+  return { retrievePaymentIntent, redirectToCheckout, loading, error };
+}
+function MavuntaCheckoutButton({
+  publicKey,
+  paymentIntentId,
+  baseUrl,
+  onError,
+  className,
+  disabled,
+  children
+}) {
+  const { redirectToCheckout, loading } = useMavuntaCheckout(publicKey, baseUrl);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className,
+      disabled: disabled || loading,
+      onClick: () => {
+        void redirectToCheckout(paymentIntentId).catch((err) => {
+          onError?.(err instanceof Error ? err : new Error(String(err)));
+        });
+      },
+      children: children ?? "Pay with Mavunta"
+    }
+  );
+}
+function useMavuntaPaymentStatus(publicKey, paymentIntentId, options = {}) {
+  const [intent, setIntent] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const { baseUrl, intervalMs } = options;
+  react.useEffect(() => {
+    if (!paymentIntentId) return;
+    let active = true;
+    let stop = () => {
+    };
+    checkoutJs.loadMavunta(publicKey, { baseUrl }).then((client) => {
+      if (!active) return;
+      stop = client.onStatus(paymentIntentId, (next) => setIntent(next), { intervalMs });
+    }).catch((err) => setError(err instanceof Error ? err : new Error(String(err))));
+    return () => {
+      active = false;
+      stop();
+    };
+  }, [publicKey, paymentIntentId, baseUrl, intervalMs]);
+  return { intent, status: intent?.status ?? null, error };
+}
+
+Object.defineProperty(exports, "MavuntaCheckoutError", {
+  enumerable: true,
+  get: function () { return checkoutJs.MavuntaCheckoutError; }
+});
+exports.MavuntaCheckoutButton = MavuntaCheckoutButton;
+exports.useMavuntaCheckout = useMavuntaCheckout;
+exports.useMavuntaPaymentStatus = useMavuntaPaymentStatus;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useMavuntaCheckout.ts","../src/MavuntaCheckoutButton.tsx","../src/useMavuntaPaymentStatus.ts"],"names":["useState","useRef","useCallback","loadMavunta","jsx","useEffect"],"mappings":"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","file":"index.cjs","sourcesContent":["import { useCallback, useRef, useState } from 'react'\nimport { loadMavunta, type MavuntaCheckout, type PaymentIntentView } from '@mavunta/checkout-js'\n\nexport interface UseMavuntaCheckout {\n  /** Read the public view of a payment intent. */\n  retrievePaymentIntent: (id: string) => Promise<PaymentIntentView>\n  /** Send the customer to hosted checkout for an existing intent. */\n  redirectToCheckout: (paymentIntentId: string) => Promise<void>\n  /** True while a redirect is in flight. */\n  loading: boolean\n  /** The last error, if any. */\n  error: Error | null\n}\n\n/**\n * Browser checkout for React. Loads a publishable-key client once and exposes\n * redirect + retrieve helpers with loading/error state.\n */\nexport function useMavuntaCheckout(publicKey: string, baseUrl?: string): UseMavuntaCheckout {\n  const [loading, setLoading] = useState(false)\n  const [error, setError] = useState<Error | null>(null)\n  const clientRef = useRef<{ key: string; base?: string; promise: Promise<MavuntaCheckout> } | null>(null)\n\n  const getClient = useCallback((): Promise<MavuntaCheckout> => {\n    const cached = clientRef.current\n    if (cached && cached.key === publicKey && cached.base === baseUrl) return cached.promise\n    const promise = loadMavunta(publicKey, { baseUrl })\n    clientRef.current = { key: publicKey, base: baseUrl, promise }\n    return promise\n  }, [publicKey, baseUrl])\n\n  const retrievePaymentIntent = useCallback(\n    async (id: string): Promise<PaymentIntentView> => {\n      const client = await getClient()\n      return client.retrievePaymentIntent(id)\n    },\n    [getClient],\n  )\n\n  const redirectToCheckout = useCallback(\n    async (paymentIntentId: string): Promise<void> => {\n      setLoading(true)\n      setError(null)\n      try {\n        const client = await getClient()\n        await client.redirectToCheckout({ paymentIntentId })\n      } catch (err) {\n        const e = err instanceof Error ? err : new Error(String(err))\n        setError(e)\n        setLoading(false)\n        throw e\n      }\n    },\n    [getClient],\n  )\n\n  return { retrievePaymentIntent, redirectToCheckout, loading, error }\n}\n","import type { ReactNode } from 'react'\nimport { useMavuntaCheckout } from './useMavuntaCheckout.js'\n\nexport interface MavuntaCheckoutButtonProps {\n  /** Your publishable key (`cwk_…_pk_…`). */\n  publicKey: string\n  /** The payment intent your backend created (with a secret key). */\n  paymentIntentId: string\n  /** Override the API base URL. */\n  baseUrl?: string\n  /** Called if starting checkout fails (e.g. the intent is gone or expired). */\n  onError?: (error: Error) => void\n  className?: string\n  disabled?: boolean\n  /** Button label (default: \"Pay with Mavunta\"). */\n  children?: ReactNode\n}\n\n/**\n * A button that sends the customer to Mavunta hosted checkout. Success is\n * confirmed server-side via webhooks after the redirect, so there is no\n * onSuccess here; use {@link useMavuntaPaymentStatus} for an inline status.\n */\nexport function MavuntaCheckoutButton({\n  publicKey,\n  paymentIntentId,\n  baseUrl,\n  onError,\n  className,\n  disabled,\n  children,\n}: MavuntaCheckoutButtonProps) {\n  const { redirectToCheckout, loading } = useMavuntaCheckout(publicKey, baseUrl)\n\n  return (\n    <button\n      type=\"button\"\n      className={className}\n      disabled={disabled || loading}\n      onClick={() => {\n        void redirectToCheckout(paymentIntentId).catch((err) => {\n          onError?.(err instanceof Error ? err : new Error(String(err)))\n        })\n      }}\n    >\n      {children ?? 'Pay with Mavunta'}\n    </button>\n  )\n}\n","import { useEffect, useState } from 'react'\nimport { loadMavunta, type PaymentIntentView } from '@mavunta/checkout-js'\n\nexport interface UseMavuntaPaymentStatus {\n  intent: PaymentIntentView | null\n  status: string | null\n  error: Error | null\n}\n\n/**\n * Poll a payment intent's status while `paymentIntentId` is set, updating on\n * each change and stopping at a terminal status. Useful for an inline \"waiting\n * for payment\" view after redirecting away and back, or for a polled receipt.\n */\nexport function useMavuntaPaymentStatus(\n  publicKey: string,\n  paymentIntentId: string | null,\n  options: { baseUrl?: string; intervalMs?: number } = {},\n): UseMavuntaPaymentStatus {\n  const [intent, setIntent] = useState<PaymentIntentView | null>(null)\n  const [error, setError] = useState<Error | null>(null)\n  const { baseUrl, intervalMs } = options\n\n  useEffect(() => {\n    if (!paymentIntentId) return\n    let active = true\n    let stop: () => void = () => {}\n    loadMavunta(publicKey, { baseUrl })\n      .then((client) => {\n        if (!active) return\n        stop = client.onStatus(paymentIntentId, (next) => setIntent(next), { intervalMs })\n      })\n      .catch((err) => setError(err instanceof Error ? err : new Error(String(err))))\n    return () => {\n      active = false\n      stop()\n    }\n  }, [publicKey, paymentIntentId, baseUrl, intervalMs])\n\n  return { intent, status: intent?.status ?? null, error }\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { PaymentIntentView } from '@mavunta/checkout-js';
+export { CheckoutOptions, MavuntaCheckoutError, PaymentIntentView } from '@mavunta/checkout-js';
+
+interface MavuntaCheckoutButtonProps {
+    /** Your publishable key (`cwk_…_pk_…`). */
+    publicKey: string;
+    /** The payment intent your backend created (with a secret key). */
+    paymentIntentId: string;
+    /** Override the API base URL. */
+    baseUrl?: string;
+    /** Called if starting checkout fails (e.g. the intent is gone or expired). */
+    onError?: (error: Error) => void;
+    className?: string;
+    disabled?: boolean;
+    /** Button label (default: "Pay with Mavunta"). */
+    children?: ReactNode;
+}
+/**
+ * A button that sends the customer to Mavunta hosted checkout. Success is
+ * confirmed server-side via webhooks after the redirect, so there is no
+ * onSuccess here; use {@link useMavuntaPaymentStatus} for an inline status.
+ */
+declare function MavuntaCheckoutButton({ publicKey, paymentIntentId, baseUrl, onError, className, disabled, children, }: MavuntaCheckoutButtonProps): react.JSX.Element;
+
+interface UseMavuntaCheckout {
+    /** Read the public view of a payment intent. */
+    retrievePaymentIntent: (id: string) => Promise<PaymentIntentView>;
+    /** Send the customer to hosted checkout for an existing intent. */
+    redirectToCheckout: (paymentIntentId: string) => Promise<void>;
+    /** True while a redirect is in flight. */
+    loading: boolean;
+    /** The last error, if any. */
+    error: Error | null;
+}
+/**
+ * Browser checkout for React. Loads a publishable-key client once and exposes
+ * redirect + retrieve helpers with loading/error state.
+ */
+declare function useMavuntaCheckout(publicKey: string, baseUrl?: string): UseMavuntaCheckout;
+
+interface UseMavuntaPaymentStatus {
+    intent: PaymentIntentView | null;
+    status: string | null;
+    error: Error | null;
+}
+/**
+ * Poll a payment intent's status while `paymentIntentId` is set, updating on
+ * each change and stopping at a terminal status. Useful for an inline "waiting
+ * for payment" view after redirecting away and back, or for a polled receipt.
+ */
+declare function useMavuntaPaymentStatus(publicKey: string, paymentIntentId: string | null, options?: {
+    baseUrl?: string;
+    intervalMs?: number;
+}): UseMavuntaPaymentStatus;
+
+export { MavuntaCheckoutButton, type MavuntaCheckoutButtonProps, type UseMavuntaCheckout, type UseMavuntaPaymentStatus, useMavuntaCheckout, useMavuntaPaymentStatus };

package/dist/index.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { PaymentIntentView } from '@mavunta/checkout-js';
+export { CheckoutOptions, MavuntaCheckoutError, PaymentIntentView } from '@mavunta/checkout-js';
+
+interface MavuntaCheckoutButtonProps {
+    /** Your publishable key (`cwk_…_pk_…`). */
+    publicKey: string;
+    /** The payment intent your backend created (with a secret key). */
+    paymentIntentId: string;
+    /** Override the API base URL. */
+    baseUrl?: string;
+    /** Called if starting checkout fails (e.g. the intent is gone or expired). */
+    onError?: (error: Error) => void;
+    className?: string;
+    disabled?: boolean;
+    /** Button label (default: "Pay with Mavunta"). */
+    children?: ReactNode;
+}
+/**
+ * A button that sends the customer to Mavunta hosted checkout. Success is
+ * confirmed server-side via webhooks after the redirect, so there is no
+ * onSuccess here; use {@link useMavuntaPaymentStatus} for an inline status.
+ */
+declare function MavuntaCheckoutButton({ publicKey, paymentIntentId, baseUrl, onError, className, disabled, children, }: MavuntaCheckoutButtonProps): react.JSX.Element;
+
+interface UseMavuntaCheckout {
+    /** Read the public view of a payment intent. */
+    retrievePaymentIntent: (id: string) => Promise<PaymentIntentView>;
+    /** Send the customer to hosted checkout for an existing intent. */
+    redirectToCheckout: (paymentIntentId: string) => Promise<void>;
+    /** True while a redirect is in flight. */
+    loading: boolean;
+    /** The last error, if any. */
+    error: Error | null;
+}
+/**
+ * Browser checkout for React. Loads a publishable-key client once and exposes
+ * redirect + retrieve helpers with loading/error state.
+ */
+declare function useMavuntaCheckout(publicKey: string, baseUrl?: string): UseMavuntaCheckout;
+
+interface UseMavuntaPaymentStatus {
+    intent: PaymentIntentView | null;
+    status: string | null;
+    error: Error | null;
+}
+/**
+ * Poll a payment intent's status while `paymentIntentId` is set, updating on
+ * each change and stopping at a terminal status. Useful for an inline "waiting
+ * for payment" view after redirecting away and back, or for a polled receipt.
+ */
+declare function useMavuntaPaymentStatus(publicKey: string, paymentIntentId: string | null, options?: {
+    baseUrl?: string;
+    intervalMs?: number;
+}): UseMavuntaPaymentStatus;
+
+export { MavuntaCheckoutButton, type MavuntaCheckoutButtonProps, type UseMavuntaCheckout, type UseMavuntaPaymentStatus, useMavuntaCheckout, useMavuntaPaymentStatus };

package/dist/index.js

@@ -0,0 +1,91 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { loadMavunta } from '@mavunta/checkout-js';
+export { MavuntaCheckoutError } from '@mavunta/checkout-js';
+import { jsx } from 'react/jsx-runtime';
+
+// src/useMavuntaCheckout.ts
+function useMavuntaCheckout(publicKey, baseUrl) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const clientRef = useRef(null);
+  const getClient = useCallback(() => {
+    const cached = clientRef.current;
+    if (cached && cached.key === publicKey && cached.base === baseUrl) return cached.promise;
+    const promise = loadMavunta(publicKey, { baseUrl });
+    clientRef.current = { key: publicKey, base: baseUrl, promise };
+    return promise;
+  }, [publicKey, baseUrl]);
+  const retrievePaymentIntent = useCallback(
+    async (id) => {
+      const client = await getClient();
+      return client.retrievePaymentIntent(id);
+    },
+    [getClient]
+  );
+  const redirectToCheckout = useCallback(
+    async (paymentIntentId) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const client = await getClient();
+        await client.redirectToCheckout({ paymentIntentId });
+      } catch (err) {
+        const e = err instanceof Error ? err : new Error(String(err));
+        setError(e);
+        setLoading(false);
+        throw e;
+      }
+    },
+    [getClient]
+  );
+  return { retrievePaymentIntent, redirectToCheckout, loading, error };
+}
+function MavuntaCheckoutButton({
+  publicKey,
+  paymentIntentId,
+  baseUrl,
+  onError,
+  className,
+  disabled,
+  children
+}) {
+  const { redirectToCheckout, loading } = useMavuntaCheckout(publicKey, baseUrl);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className,
+      disabled: disabled || loading,
+      onClick: () => {
+        void redirectToCheckout(paymentIntentId).catch((err) => {
+          onError?.(err instanceof Error ? err : new Error(String(err)));
+        });
+      },
+      children: children ?? "Pay with Mavunta"
+    }
+  );
+}
+function useMavuntaPaymentStatus(publicKey, paymentIntentId, options = {}) {
+  const [intent, setIntent] = useState(null);
+  const [error, setError] = useState(null);
+  const { baseUrl, intervalMs } = options;
+  useEffect(() => {
+    if (!paymentIntentId) return;
+    let active = true;
+    let stop = () => {
+    };
+    loadMavunta(publicKey, { baseUrl }).then((client) => {
+      if (!active) return;
+      stop = client.onStatus(paymentIntentId, (next) => setIntent(next), { intervalMs });
+    }).catch((err) => setError(err instanceof Error ? err : new Error(String(err))));
+    return () => {
+      active = false;
+      stop();
+    };
+  }, [publicKey, paymentIntentId, baseUrl, intervalMs]);
+  return { intent, status: intent?.status ?? null, error };
+}
+
+export { MavuntaCheckoutButton, useMavuntaCheckout, useMavuntaPaymentStatus };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useMavuntaCheckout.ts","../src/MavuntaCheckoutButton.tsx","../src/useMavuntaPaymentStatus.ts"],"names":["useState","loadMavunta"],"mappings":"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","file":"index.js","sourcesContent":["import { useCallback, useRef, useState } from 'react'\nimport { loadMavunta, type MavuntaCheckout, type PaymentIntentView } from '@mavunta/checkout-js'\n\nexport interface UseMavuntaCheckout {\n  /** Read the public view of a payment intent. */\n  retrievePaymentIntent: (id: string) => Promise<PaymentIntentView>\n  /** Send the customer to hosted checkout for an existing intent. */\n  redirectToCheckout: (paymentIntentId: string) => Promise<void>\n  /** True while a redirect is in flight. */\n  loading: boolean\n  /** The last error, if any. */\n  error: Error | null\n}\n\n/**\n * Browser checkout for React. Loads a publishable-key client once and exposes\n * redirect + retrieve helpers with loading/error state.\n */\nexport function useMavuntaCheckout(publicKey: string, baseUrl?: string): UseMavuntaCheckout {\n  const [loading, setLoading] = useState(false)\n  const [error, setError] = useState<Error | null>(null)\n  const clientRef = useRef<{ key: string; base?: string; promise: Promise<MavuntaCheckout> } | null>(null)\n\n  const getClient = useCallback((): Promise<MavuntaCheckout> => {\n    const cached = clientRef.current\n    if (cached && cached.key === publicKey && cached.base === baseUrl) return cached.promise\n    const promise = loadMavunta(publicKey, { baseUrl })\n    clientRef.current = { key: publicKey, base: baseUrl, promise }\n    return promise\n  }, [publicKey, baseUrl])\n\n  const retrievePaymentIntent = useCallback(\n    async (id: string): Promise<PaymentIntentView> => {\n      const client = await getClient()\n      return client.retrievePaymentIntent(id)\n    },\n    [getClient],\n  )\n\n  const redirectToCheckout = useCallback(\n    async (paymentIntentId: string): Promise<void> => {\n      setLoading(true)\n      setError(null)\n      try {\n        const client = await getClient()\n        await client.redirectToCheckout({ paymentIntentId })\n      } catch (err) {\n        const e = err instanceof Error ? err : new Error(String(err))\n        setError(e)\n        setLoading(false)\n        throw e\n      }\n    },\n    [getClient],\n  )\n\n  return { retrievePaymentIntent, redirectToCheckout, loading, error }\n}\n","import type { ReactNode } from 'react'\nimport { useMavuntaCheckout } from './useMavuntaCheckout.js'\n\nexport interface MavuntaCheckoutButtonProps {\n  /** Your publishable key (`cwk_…_pk_…`). */\n  publicKey: string\n  /** The payment intent your backend created (with a secret key). */\n  paymentIntentId: string\n  /** Override the API base URL. */\n  baseUrl?: string\n  /** Called if starting checkout fails (e.g. the intent is gone or expired). */\n  onError?: (error: Error) => void\n  className?: string\n  disabled?: boolean\n  /** Button label (default: \"Pay with Mavunta\"). */\n  children?: ReactNode\n}\n\n/**\n * A button that sends the customer to Mavunta hosted checkout. Success is\n * confirmed server-side via webhooks after the redirect, so there is no\n * onSuccess here; use {@link useMavuntaPaymentStatus} for an inline status.\n */\nexport function MavuntaCheckoutButton({\n  publicKey,\n  paymentIntentId,\n  baseUrl,\n  onError,\n  className,\n  disabled,\n  children,\n}: MavuntaCheckoutButtonProps) {\n  const { redirectToCheckout, loading } = useMavuntaCheckout(publicKey, baseUrl)\n\n  return (\n    <button\n      type=\"button\"\n      className={className}\n      disabled={disabled || loading}\n      onClick={() => {\n        void redirectToCheckout(paymentIntentId).catch((err) => {\n          onError?.(err instanceof Error ? err : new Error(String(err)))\n        })\n      }}\n    >\n      {children ?? 'Pay with Mavunta'}\n    </button>\n  )\n}\n","import { useEffect, useState } from 'react'\nimport { loadMavunta, type PaymentIntentView } from '@mavunta/checkout-js'\n\nexport interface UseMavuntaPaymentStatus {\n  intent: PaymentIntentView | null\n  status: string | null\n  error: Error | null\n}\n\n/**\n * Poll a payment intent's status while `paymentIntentId` is set, updating on\n * each change and stopping at a terminal status. Useful for an inline \"waiting\n * for payment\" view after redirecting away and back, or for a polled receipt.\n */\nexport function useMavuntaPaymentStatus(\n  publicKey: string,\n  paymentIntentId: string | null,\n  options: { baseUrl?: string; intervalMs?: number } = {},\n): UseMavuntaPaymentStatus {\n  const [intent, setIntent] = useState<PaymentIntentView | null>(null)\n  const [error, setError] = useState<Error | null>(null)\n  const { baseUrl, intervalMs } = options\n\n  useEffect(() => {\n    if (!paymentIntentId) return\n    let active = true\n    let stop: () => void = () => {}\n    loadMavunta(publicKey, { baseUrl })\n      .then((client) => {\n        if (!active) return\n        stop = client.onStatus(paymentIntentId, (next) => setIntent(next), { intervalMs })\n      })\n      .catch((err) => setError(err instanceof Error ? err : new Error(String(err))))\n    return () => {\n      active = false\n      stop()\n    }\n  }, [publicKey, paymentIntentId, baseUrl, intervalMs])\n\n  return { intent, status: intent?.status ?? null, error }\n}\n"]}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@mavunta/react",
+  "version": "1.1.1",
+  "description": "React components and hooks for Mavunta Pay checkout (M-Pesa, card, PayPal, crypto).",
+  "license": "MIT",
+  "author": "Chainwaka Technologies",
+  "homepage": "https://developers.mavunta.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mavunta/mavunta-js.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/mavunta/mavunta-js/issues"
+  },
+  "keywords": [
+    "mavunta",
+    "mavunta-pay",
+    "react",
+    "checkout",
+    "mpesa",
+    "kenya",
+    "payments",
+    "crypto"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@mavunta/checkout-js": "^1.1.1"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "jsdom": "^25.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.0",
+    "vitest": "^3.2.0"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}