npm package: @hesabe-pay/embedded-hosted-checkout
Description: Hesabe Payments JavaScript SDK for embedded payment processing
Author: Hesabe
Latest version: 1.0.14

# @hesabe-pay/embedded-hosted-checkout

JavaScript SDK for Hesabe payment gateway integration with support for KNET, Credit/Debit Cards (MPGS), and Apple Pay.

## Installation

### Via CDN

```html
<script src="https://unpkg.com/@hesabe-pay/embedded-hosted-checkout@latest/cdn/hesabe-payments.min.js"></script>
```

### Via NPM

```bash
npm install @hesabe-pay/embedded-hosted-checkout
```

```html
<script src="node_modules/@hesabe-pay/embedded-hosted-checkout/cdn/hesabe-payments.min.js"></script>
```

## Usage

### Basic Setup

1. Create a container element in your HTML:

```html
<div id="hesabe-payments"></div>
```

2. Initialize the payment form:

```javascript
const config = {
    environment: "sandbox", // or "production"
    sessionID: "pass checkout response data",
    paymentTypes: ["knet", "card", "applepay"],
    debug: true,
    callback: function(result) {
        console.log('Payment result:', result);
        // Handle payment result
        if (result.status === 'SUCCESS') {
            console.log('Payment successful:', result.data);
        } else if (result.status === 'FAILED') {
            console.log('Payment failed:', result.data);
        } else if (result.status === 'ERROR') {
            console.log('Payment initiz error');
        } else if (result.status === 'CANCELLED') {
            console.log('Payment cancelled');
        }
    }
};

hesabePayment.init(config);
```

## Configuration Options

| Option | Type | Required | Description |
|--------|------|----------|-------------|
| `environment` | string | Yes | Environment: `"sandbox"`, `"production"` |
| `sessionID` | string | Yes |  session data from Hesabe Checkout API response |
| `paymentTypes` | array | Yes | Payment methods: `["knet", "card", "applepay"]` |
| `callback` | function | No | Callback function for payment results |
| `debug` | boolean | No | Enable debug logging (default: false) |


## Payment Types

- **`knet`** - KNET debit card payments
- **`card`** - Credit/Debit card payments via MPGS
- **`applepay`** - Apple Pay payments (Safari only)

## Callback Response

The callback function receives a response object with the following structure:

```javascript
{
    status: "SUCCESS" | "FAILED" | "CANCELLED" | "ERROR",
    method: "knet" | "card" | "applepay",
    data: {
        // Transaction details
        token: "transaction_token",
        amount: "10.000",
        currency: "KWD",
        status: "SUCCESS"
        // ... other transaction data
    }
}
```

## Example

```html
<!DOCTYPE html>
<html>
<head>
    <title>Hesabe Payments Example</title>
    <script src="https://unpkg.com/@hesabe-pay/embedded-hosted-checkout@latest/cdn/hesabe-payments.min.js"></script>
</head>
<body>
    <div id="hesabe-payments"></div>

    <script>
        // Your session data from Hesabe API checkout response
        const sessionData = "eyJ0eXAiOiJKV1QiLCJhbGc..."; 

        const config = {
            environment: "sandbox",
            sessionID: sessionData,
            paymentTypes: ["knet", "card", "applepay"],
            debug: true,
            callback: function(result) {
                if (result.status === 'SUCCESS') {
                    console.log('Transaction:', result.data);
                } else {
                    console.log('Payment failed: ' + result.data);
                }
            }
        };

        // Initialize payment form
        hesabePayment.init(config);
    </script>
</body>
</html>
```

## Browser Support

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## Features

- ✅ Responsive design
- ✅ Multiple payment methods
- ✅ Real-time validation
- ✅ Transaction verification
- ✅ Loading states and animations

## Support

For technical support or questions, please contact Hesabe support team.

## License

MIT