npm package: @sendmate/inline-js
Description: SendMate Inline Checkout - Embed checkout as popup/iframe on external websites
Author: Nextune Solutions
Latest version: 1.2.1

# SendMate Inline Checkout

SendMate Inline Checkout allows you to embed checkout as a popup or iframe on external websites.

## Installation

### Via npm

```bash
npm install @sendmate/inline-js
```

### Via CDN (unpkg.com)

```html
<!-- Simple URL (uses unpkg field from package.json) -->
<script src="https://unpkg.com/@sendmate/inline-js"></script>

<!-- Or with version -->
<script src="https://unpkg.com/@sendmate/inline-js@latest"></script>

<!-- Or direct path -->
<script src="https://unpkg.com/@sendmate/inline-js@latest/dist/sendmate-checkout.umd.js"></script>
```

## Usage

### Basic Setup

```html
<script src="https://unpkg.com/@sendmate/inline-js"></script>
<script>
  // Create an instance
  const checkout = new SendMateCheckout();
  
  // Initialize (apiBaseUrl and frontendUrl are auto-detected based on public key)
  checkout.init({
    publicKey: 'your-public-key'
  });

  // Open checkout
  checkout.open({
    amount: '100',
    currency: 'KES',
    description: 'Payment for order'
  }, 
  (session) => {
    console.log('Payment successful!', session);
  },
  () => {
    console.log('Payment cancelled');
  },
  (error) => {
    console.error('Payment error:', error);
  });
</script>
```

### ES Module

```javascript
import SendMateCheckout from '@sendmate/inline-checkout';

const checkout = new SendMateCheckout();
checkout.init({
  publicKey: 'your-public-key',
  apiBaseUrl: 'https://api.your-domain.com',
  frontendUrl: 'https://your-domain.com'
});

checkout.open({
  amount: '100',
  currency: 'KES',
  description: 'Payment for order'
}, onSuccess, onCancel, onError);
```

## Development

### Run Demo

```bash
npm run dev
```

This starts the demo application at `http://localhost:3000`

### Build Library

```bash
npm run build:lib
```

This builds the library for distribution in the `dist` folder.

### Build Demo

```bash
npm run build:demo
```

This builds the demo application.

## Publishing

The library is configured to be published to npm and can be accessed via unpkg.com:

```
https://unpkg.com/@sendmate/inline-checkout@latest/dist/sendmate-checkout.umd.js
```

## API Reference

### `init(options)`

Initialize the SendMate Checkout library.

**Parameters:**
- `publicKey` (string, required): Your SendMate public key
- `apiBaseUrl` (string, required): API base URL
- `frontendUrl` (string, required): Frontend URL for checkout
- `popupWidth` (number, optional): Popup width in pixels (default: 800)
- `popupHeight` (number, optional): Popup height in pixels (default: 600)
- `iframeMode` (boolean, optional): Use iframe instead of popup (default: false)

### `open(checkoutData, onSuccess, onCancel, onError)`

Open checkout popup/iframe.

**Parameters:**
- `checkoutData` (object, required):
  - `amount` (string, required): Payment amount
  - `currency` (string, required): Currency code (e.g., 'KES', 'USD')
  - `description` (string, optional): Payment description
  - `returnUrl` (string, optional): URL to redirect after successful payment
  - `cancelUrl` (string, optional): URL to redirect after cancellation
  - `paymentMethods` (array, optional): Payment methods (default: ['mpesa', 'card'])
  - `metadata` (object, optional): Additional metadata
- `onSuccess` (function, optional): Callback when payment is successful
- `onCancel` (function, optional): Callback when payment is cancelled
- `onError` (function, optional): Callback when an error occurs

## License

MIT