@zahlen/checkout-react 0.1.0

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@zahlen/checkout-react",
+  "version": "0.1.0",
+  "description": "React components for Zahlen Checkout - Modern payment modal",
+  "author": "Zahlen",
+  "license": "MIT",
+  "main": "./index.cjs.js",
+  "module": "./index.esm.js",
+  "types": "./index.d.ts",
+  "sideEffects": false,
+  "keywords": [
+    "zahlen",
+    "checkout",
+    "payment",
+    "react",
+    "modal",
+    "fintech",
+    "nigeria"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Havenix-Technologies-LTD/zahlen.git",
+    "directory": "libs/zahlen-checkout-react"
+  },
+  "homepage": "https://github.com/Havenix-Technologies-LTD/zahlen#readme",
+  "bugs": {
+    "url": "https://github.com/Havenix-Technologies-LTD/zahlen/issues"
+  },
+  "files": [
+    "index.cjs.js",
+    "index.esm.js",
+    "index.d.ts",
+    "src/**/*.d.ts",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
+    "@zahlen/checkout": ">=0.1.0"
+  },
+  "type": "module"
+}

package/src/ZahlenButton.d.ts

@@ -0,0 +1,25 @@
+import type { ZahlenButtonProps } from './types';
+/**
+ * ZahlenButton - A pre-styled button that opens the checkout modal
+ *
+ * @example
+ * ```tsx
+ * import { ZahlenButton } from '@zahlen/checkout-react';
+ *
+ * function ProductPage() {
+ *   return (
+ *     <ZahlenButton
+ *       amount={4999}
+ *       currency="NGN"
+ *       description="Premium Plan"
+ *       onSuccess={(result) => router.push('/success')}
+ *       onError={(error) => toast.error(error.message)}
+ *     >
+ *       💳 Pay ₦4,999
+ *     </ZahlenButton>
+ *   );
+ * }
+ * ```
+ */
+export declare function ZahlenButton({ amount, currency, description, customerEmail, metadata, onSuccess, onError, onClose, children, className, style, disabled, }: ZahlenButtonProps): import("react/jsx-runtime").JSX.Element;
+export default ZahlenButton;

package/src/ZahlenCheckout.d.ts

@@ -0,0 +1,33 @@
+import type { ZahlenCheckoutProps } from './types';
+/**
+ * ZahlenCheckout - Controlled component for programmatic control
+ *
+ * @example
+ * ```tsx
+ * import { useState } from 'react';
+ * import { ZahlenCheckout } from '@zahlen/checkout-react';
+ *
+ * function ProductPage() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => setIsOpen(true)}>Buy Now</button>
+ *
+ *       <ZahlenCheckout
+ *         open={isOpen}
+ *         onClose={() => setIsOpen(false)}
+ *         amount={4999}
+ *         currency="NGN"
+ *         onSuccess={(result) => {
+ *           setIsOpen(false);
+ *           router.push('/success');
+ *         }}
+ *       />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function ZahlenCheckout({ open, onClose, amount, currency, description, customerEmail, metadata, onSuccess, onError, }: ZahlenCheckoutProps): null;
+export default ZahlenCheckout;

package/src/ZahlenProvider.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Zahlen Provider - React Context for Zahlen Checkout
+ */
+import React from 'react';
+import type { ZahlenProviderProps, ZahlenContextValue } from './types';
+declare const ZahlenContext: React.Context<ZahlenContextValue | undefined>;
+/**
+ * ZahlenProvider - Wrap your app with this provider to use Zahlen hooks
+ *
+ * @example
+ * ```tsx
+ * import { ZahlenProvider } from '@zahlen/checkout-react';
+ *
+ * function App() {
+ *   return (
+ *     <ZahlenProvider apiKey="pk_live_xxx" theme="dark">
+ *       <YourApp />
+ *     </ZahlenProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function ZahlenProvider({ apiKey, theme, children }: ZahlenProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * useZahlen - Hook to access Zahlen checkout functionality
+ *
+ * @example
+ * ```tsx
+ * import { useZahlen } from '@zahlen/checkout-react';
+ *
+ * function PayButton() {
+ *   const { openCheckout, isProcessing } = useZahlen();
+ *
+ *   const handlePay = async () => {
+ *     try {
+ *       const result = await openCheckout({
+ *         amount: 4999,
+ *         currency: 'NGN',
+ *       });
+ *       console.log('Paid!', result);
+ *     } catch (error) {
+ *       console.error('Failed', error);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <button onClick={handlePay} disabled={isProcessing}>
+ *       {isProcessing ? 'Processing...' : 'Pay Now'}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare function useZahlen(): ZahlenContextValue;
+export { ZahlenContext };

package/src/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @zahlen/checkout-react - React components for Zahlen Checkout
+ *
+ * @example
+ * ```tsx
+ * import { ZahlenProvider, ZahlenButton } from '@zahlen/checkout-react';
+ *
+ * function App() {
+ *   return (
+ *     <ZahlenProvider apiKey="pk_live_xxx">
+ *       <ZahlenButton
+ *         amount={4999}
+ *         currency="NGN"
+ *         onSuccess={(result) => console.log(result)}
+ *       >
+ *         Pay Now
+ *       </ZahlenButton>
+ *     </ZahlenProvider>
+ *   );
+ * }
+ * ```
+ */
+export { ZahlenProvider, useZahlen, ZahlenContext } from './ZahlenProvider';
+export { ZahlenButton } from './ZahlenButton';
+export { ZahlenCheckout } from './ZahlenCheckout';
+export type { ZahlenProviderProps, ZahlenContextValue, ZahlenButtonProps, ZahlenCheckoutProps, CheckoutOptions, PaymentResult, PaymentError, ZahlenConfig, } from './types';
+export { Zahlen, formatAmount, getCurrencySymbol } from '@zahlen/checkout';

package/src/types.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Zahlen Checkout React Types
+ */
+import type { CheckoutOptions, PaymentResult, PaymentError, ZahlenConfig } from '@zahlen/checkout';
+/**
+ * Props for ZahlenProvider
+ */
+export interface ZahlenProviderProps {
+    /** Your Zahlen API key */
+    apiKey: string;
+    /** Theme mode */
+    theme?: 'dark' | 'light' | 'auto';
+    /** Children components */
+    children: React.ReactNode;
+}
+/**
+ * Context value from useZahlen hook
+ */
+export interface ZahlenContextValue {
+    /** Whether Zahlen is initialized */
+    isInitialized: boolean;
+    /** Whether a payment is currently processing */
+    isProcessing: boolean;
+    /** Open the checkout modal programmatically */
+    openCheckout: (options: Omit<CheckoutOptions, 'onSuccess' | 'onError'>) => Promise<PaymentResult>;
+    /** Close the checkout modal */
+    closeCheckout: () => void;
+    /** Change the theme */
+    setTheme: (theme: 'dark' | 'light' | 'auto') => void;
+}
+/**
+ * Props for ZahlenButton component
+ */
+export interface ZahlenButtonProps {
+    /** Payment amount in smallest currency unit */
+    amount: number;
+    /** Currency code (e.g., 'NGN', 'USD') */
+    currency: string;
+    /** Payment description */
+    description?: string;
+    /** Customer email for receipts */
+    customerEmail?: string;
+    /** Additional metadata */
+    metadata?: Record<string, unknown>;
+    /** Callback on successful payment */
+    onSuccess?: (result: PaymentResult) => void;
+    /** Callback on payment error */
+    onError?: (error: PaymentError) => void;
+    /** Callback when modal closes */
+    onClose?: () => void;
+    /** Button children (text/elements) */
+    children?: React.ReactNode;
+    /** Additional CSS class names */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Disable the button */
+    disabled?: boolean;
+}
+/**
+ * Props for ZahlenCheckout controlled component
+ */
+export interface ZahlenCheckoutProps {
+    /** Whether the modal is open */
+    open: boolean;
+    /** Callback to close the modal */
+    onClose: () => void;
+    /** Payment amount in smallest currency unit */
+    amount: number;
+    /** Currency code */
+    currency: string;
+    /** Payment description */
+    description?: string;
+    /** Customer email */
+    customerEmail?: string;
+    /** Additional metadata */
+    metadata?: Record<string, unknown>;
+    /** Callback on successful payment */
+    onSuccess: (result: PaymentResult) => void;
+    /** Callback on payment error */
+    onError?: (error: PaymentError) => void;
+}
+export type { CheckoutOptions, PaymentResult, PaymentError, ZahlenConfig };