@simplipayng/checkout 0.0.1-security → 1.4.3

package/README.md

@@ -1,5 +1,149 @@
-# Security holding package
+# @simplipayng/checkout
 
-This package contained malicious code and was removed from the registry by the npm security team. A placeholder was published to ensure users are not affected in the future.
+A React component for accepting card payments via SimpliPay.
 
-Please refer to www.npmjs.com/advisories?search=%40simplipayng%2Fcheckout for more information.
+## Installation
+
+```bash
+npm install @simplipayng/checkout
+# or
+yarn add @simplipayng/checkout
+```
+
+## Quick Start
+
+```tsx
+import { SimpliPayCheckout } from '@simplipayng/checkout';
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>Pay Now</button>
+
+      <SimpliPayCheckout
+        isOpen={isOpen}
+        config={{
+          publicKey: 'pk_test_your_public_key',
+          environment: 'development' // or 'production'
+        }}
+        paymentData={{
+          organizationId: 'your-organization-id',
+          email: 'customer@example.com',
+          phone: '+2348012345678',
+          amount: 5000,
+          currency: 'NGN',
+          transactionRef: 'TXN-' + Date.now(),
+          customerId: 'CUST-123',
+          serviceId: 'payment-service', // optional
+          narration: 'Payment for order', // optional
+          merchantName: 'Your Store'
+        }}
+        callbacks={{
+          onSuccess: (result) => {
+            console.log('Payment successful:', result);
+            setIsOpen(false);
+          },
+          onError: (error) => {
+            console.error('Payment failed:', error);
+          },
+          onClose: () => setIsOpen(false)
+        }}
+      />
+    </>
+  );
+}
+```
+
+## Using the Hook
+
+```tsx
+import { SimpliPayCheckout, useSimplipay } from '@simplipayng/checkout';
+
+function App() {
+  const { isOpen, openCheckout, closeCheckout, paymentData } = useSimplipay({
+    publicKey: 'pk_test_your_public_key',
+    environment: 'development'
+  });
+
+  const handlePay = () => {
+    openCheckout({
+      organizationId: 'your-organization-id',
+      email: 'customer@example.com',
+      phone: '+2348012345678',
+      amount: 5000,
+      currency: 'NGN',
+      transactionRef: 'TXN-' + Date.now(),
+      customerId: 'CUST-123',
+      narration: 'Payment for order'
+    });
+  };
+
+  return (
+    <>
+      <button onClick={handlePay}>Pay Now</button>
+      
+      {paymentData && (
+        <SimpliPayCheckout
+          isOpen={isOpen}
+          config={{ publicKey: 'pk_test_xxx', environment: 'development' }}
+          paymentData={paymentData}
+          callbacks={{
+            onSuccess: (result) => closeCheckout(),
+            onError: (error) => console.error(error),
+            onClose: closeCheckout
+          }}
+        />
+      )}
+    </>
+  );
+}
+```
+
+## Props
+
+### SimpliPayCheckout
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `isOpen` | `boolean` | Whether to show the checkout modal |
+| `config` | `SimpliPayConfig` | Configuration object |
+| `paymentData` | `PaymentData` | Payment details |
+| `callbacks` | `CheckoutCallbacks` | Callback functions |
+
+### SimpliPayConfig
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `publicKey` | `string` | Your SimpliPay public key |
+| `environment` | `'development' \| 'production'` | API environment |
+| `baseUrl` | `string` (optional) | Custom API URL |
+
+### PaymentData
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `organizationId` | `string` | Your SimpliPay organization ID |
+| `email` | `string` | Customer email |
+| `phone` | `string` | Customer phone (with country code) |
+| `amount` | `number` | Amount to charge |
+| `currency` | `string` | Currency code (e.g., 'NGN') |
+| `transactionRef` | `string` | Unique transaction reference |
+| `customerId` | `string` | Your customer identifier |
+| `serviceId` | `string` (optional) | Service ID for the payment |
+| `narration` | `string` (optional) | Payment description/narration |
+| `merchantName` | `string` (optional) | Your business name |
+| `metadata` | `object` (optional) | Additional data |
+
+### CheckoutCallbacks
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `onSuccess` | `(result: TransactionResult) => void` | Called on successful payment |
+| `onError` | `(error: TransactionError) => void` | Called on payment failure |
+| `onClose` | `() => void` | Called when modal is closed |
+
+## License
+
+MIT © SimpliPay

package/dist/components/CardForm.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PaymentData, SimpliPayConfig, CardDetails } from '../types';
+interface CardFormProps {
+    paymentData: PaymentData;
+    config: SimpliPayConfig;
+    setCardDetails: (details: CardDetails) => void;
+    setStep: (step: any) => void;
+    onClose: () => void;
+}
+declare const CardForm: React.FC<CardFormProps>;
+export default CardForm;

package/dist/components/OtpEntry.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PaymentData, SimpliPayConfig, TransactionResult } from '../types';
+interface OtpEntryProps {
+    paymentData: PaymentData;
+    config: SimpliPayConfig;
+    transactionResponse: any;
+    setStep: (step: any) => void;
+    goBack: () => void;
+    onClose: () => void;
+    setError: (error: string) => void;
+    onSuccess: (result: TransactionResult) => void;
+}
+declare const OtpEntry: React.FC<OtpEntryProps>;
+export default OtpEntry;

package/dist/components/PinEntry.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { PaymentData, SimpliPayConfig, CardDetails, TransactionResult } from '../types';
+interface PinEntryProps {
+    paymentData: PaymentData;
+    config: SimpliPayConfig;
+    cardDetails: CardDetails;
+    setStep: (step: any) => void;
+    goBack: () => void;
+    onClose: () => void;
+    setError: (error: string) => void;
+    setTransactionResponse: (response: any) => void;
+    onSuccess: (result: TransactionResult) => void;
+}
+declare const PinEntry: React.FC<PinEntryProps>;
+export default PinEntry;

package/dist/components/SimpliPayCheckout.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import 'react-toastify/dist/ReactToastify.css';
+import { SimpliPayCheckoutProps } from '../types';
+import '../styles/checkout.css';
+/**
+ * SimpliPay Checkout Component
+ *
+ * A complete checkout modal for accepting card payments via SimpliPay.
+ *
+ * @example
+ * ```tsx
+ * import { SimpliPayCheckout } from '@simplipayng/checkout';
+ *
+ * function App() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <SimpliPayCheckout
+ *       isOpen={isOpen}
+ *       config={{
+ *         publicKey: 'pk_test_xxxxx',
+ *         environment: 'development'
+ *       }}
+ *       paymentData={{
+ *         email: 'customer@example.com',
+ *         phone: '+2348012345678',
+ *         amount: 5000,
+ *         currency: 'NGN',
+ *         transactionRef: 'TXN-123',
+ *         customerId: 'CUST-456'
+ *       }}
+ *       callbacks={{
+ *         onSuccess: (result) => console.log('Success:', result),
+ *         onError: (error) => console.error('Error:', error),
+ *         onClose: () => setIsOpen(false)
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const SimpliPayCheckout: React.FC<SimpliPayCheckoutProps>;
+export default SimpliPayCheckout;
+export { SimpliPayCheckout };

package/dist/components/SuccessScreen.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PaymentData } from '../types';
+interface SuccessScreenProps {
+    paymentData: PaymentData;
+    onClose: () => void;
+}
+declare const SuccessScreen: React.FC<SuccessScreenProps>;
+export default SuccessScreen;

package/dist/context/CheckoutContext.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+interface CheckoutContextType {
+    environment: 'development' | 'production';
+    publicKey: string;
+}
+declare const CheckoutContext: React.Context<CheckoutContextType | undefined>;
+interface CheckoutProviderProps {
+    children: ReactNode;
+    environment: 'development' | 'production';
+    publicKey: string;
+}
+export declare const CheckoutProvider: React.FC<CheckoutProviderProps>;
+export declare const useCheckoutContext: () => CheckoutContextType;
+export default CheckoutContext;

package/dist/hooks/useSimplipay.d.ts

@@ -0,0 +1,32 @@
+import { SimpliPayConfig, PaymentData, TransactionResult, TransactionError } from '../types';
+interface UseSimplipayReturn {
+    isOpen: boolean;
+    openCheckout: (paymentData: PaymentData) => void;
+    closeCheckout: () => void;
+    paymentData: PaymentData | null;
+    result: TransactionResult | null;
+    error: TransactionError | null;
+}
+/**
+ * Hook for programmatic control of SimpliPay Checkout
+ *
+ * @example
+ * ```tsx
+ * const { isOpen, openCheckout, closeCheckout, result, error } = useSimplipay({
+ *   publicKey: 'pk_test_xxxxx',
+ *   environment: 'development'
+ * });
+ *
+ * // Open checkout
+ * openCheckout({
+ *   email: 'customer@example.com',
+ *   phone: '+2348012345678',
+ *   amount: 5000,
+ *   currency: 'NGN',
+ *   transactionRef: 'TXN-123',
+ *   customerId: 'CUST-456'
+ * });
+ * ```
+ */
+export declare const useSimplipay: (config: SimpliPayConfig) => UseSimplipayReturn;
+export default useSimplipay;

package/dist/index.d.ts

@@ -0,0 +1,160 @@
+import React from 'react';
+
+/**
+ * Configuration for SimpliPay Checkout
+ */
+interface SimpliPayConfig {
+    /** Your SimpliPay public key */
+    publicKey: string;
+    /** Environment: 'development' | 'production' */
+    environment?: 'development' | 'production';
+    /** Custom API base URL (optional) */
+    baseUrl?: string;
+}
+/**
+ * Payment data for checkout
+ */
+interface PaymentData {
+    /** Organization ID from SimpliPay */
+    organizationId: string;
+    /** Customer email address */
+    email: string;
+    /** Customer phone number (with country code, e.g., +2348012345678) */
+    phone: string;
+    /** Payment amount */
+    amount: number;
+    /** Currency code (e.g., 'NGN') */
+    currency: string;
+    /** Unique transaction reference */
+    transactionRef: string;
+    /** Your customer's unique identifier */
+    customerId: string;
+    /** Service ID for the payment */
+    serviceId?: string;
+    /** Payment narration/description */
+    narration?: string;
+    /** Merchant/business name to display */
+    merchantName?: string;
+    /** Additional metadata */
+    metadata?: Record<string, any>;
+}
+/**
+ * Callback functions for checkout events
+ */
+interface CheckoutCallbacks {
+    /** Called when payment is successful */
+    onSuccess: (result: TransactionResult) => void;
+    /** Called when payment fails */
+    onError: (error: TransactionError) => void;
+    /** Called when user closes the checkout */
+    onClose: () => void;
+    /** Called before payment initiation (optional) */
+    onBeforePayment?: () => void | Promise<void>;
+}
+/**
+ * Transaction result on successful payment
+ */
+interface TransactionResult {
+    success: true;
+    transactionRef: string;
+    message: string;
+    amount: number;
+    currency: string;
+    paymentMethod: string;
+    responseCode?: string;
+}
+/**
+ * Transaction error
+ */
+interface TransactionError {
+    success: false;
+    message: string;
+    code?: string;
+    transactionRef?: string;
+}
+/**
+ * Props for SimpliPayCheckout component
+ */
+interface SimpliPayCheckoutProps {
+    /** Whether to show the checkout modal */
+    isOpen: boolean;
+    /** Payment data */
+    paymentData: PaymentData;
+    /** SimpliPay configuration */
+    config: SimpliPayConfig;
+    /** Callback functions */
+    callbacks: CheckoutCallbacks;
+}
+
+/**
+ * SimpliPay Checkout Component
+ *
+ * A complete checkout modal for accepting card payments via SimpliPay.
+ *
+ * @example
+ * ```tsx
+ * import { SimpliPayCheckout } from '@simplipayng/checkout';
+ *
+ * function App() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <SimpliPayCheckout
+ *       isOpen={isOpen}
+ *       config={{
+ *         publicKey: 'pk_test_xxxxx',
+ *         environment: 'development'
+ *       }}
+ *       paymentData={{
+ *         email: 'customer@example.com',
+ *         phone: '+2348012345678',
+ *         amount: 5000,
+ *         currency: 'NGN',
+ *         transactionRef: 'TXN-123',
+ *         customerId: 'CUST-456'
+ *       }}
+ *       callbacks={{
+ *         onSuccess: (result) => console.log('Success:', result),
+ *         onError: (error) => console.error('Error:', error),
+ *         onClose: () => setIsOpen(false)
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const SimpliPayCheckout: React.FC<SimpliPayCheckoutProps>;
+
+interface UseSimplipayReturn {
+    isOpen: boolean;
+    openCheckout: (paymentData: PaymentData) => void;
+    closeCheckout: () => void;
+    paymentData: PaymentData | null;
+    result: TransactionResult | null;
+    error: TransactionError | null;
+}
+/**
+ * Hook for programmatic control of SimpliPay Checkout
+ *
+ * @example
+ * ```tsx
+ * const { isOpen, openCheckout, closeCheckout, result, error } = useSimplipay({
+ *   publicKey: 'pk_test_xxxxx',
+ *   environment: 'development'
+ * });
+ *
+ * // Open checkout
+ * openCheckout({
+ *   email: 'customer@example.com',
+ *   phone: '+2348012345678',
+ *   amount: 5000,
+ *   currency: 'NGN',
+ *   transactionRef: 'TXN-123',
+ *   customerId: 'CUST-456'
+ * });
+ * ```
+ */
+declare const useSimplipay: (config: SimpliPayConfig) => UseSimplipayReturn;
+
+export { SimpliPayCheckout as Checkout, SimpliPayCheckout, useSimplipay };
+export type { CheckoutCallbacks, PaymentData, SimpliPayConfig, TransactionResult };