# @simplipayng/checkout

A React component for accepting card payments via SimpliPay.

## 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