npm package: @longswipe/longswipe-widget
Description: Standalone widget for Longswipe integration
Author: mencraft
Latest version: 1.5.0

# Longswipe Widget

A standalone JavaScript widget for Longswipe Voucher Redemption that can be loaded directly into any website via a script tag.

## Features

- Voucher verification
- Redemption charges calculation
- Voucher redemption
- Customizable UI
- Responsive design
- Error handling

## Installation

### Option 1: Direct Script Tag

Include the widget directly in your HTML:

```html
<script src="https://unpkg.com/@longswipe/longswipe-widget"></script>
```

### Option 2: NPM (Coming Soon)

```bash
npm install @longswipe/longswipe-widget
```

## Usage

### Basic Implementation

```html
<script src="https://your-cdn.com/widget.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Initialize the widget
    const connect = new LongswipeConnect({
      apiKey: 'your-api-key-here',
      onSuccess: function(data) {
        console.log('Success:', data);
      },
      onError: function(error) {
        console.error('Error:', error);
      },
      onClose: function() {
        console.log('Widget closed');
      }
    });
    
    // Set up widget styles (optional)
    connect.setup({
      backgroundColor: 'white',
      textColor: '#333',
      buttonColor: '#007bff',
      buttonTextColor: 'white',
      borderRadius: '8px'
    });
    
    // Open widget when button is clicked
    document.getElementById('open-widget').addEventListener('click', function() {
      connect.open();
    });
  });
</script>

<button id="open-widget">Open Longswipe Widget</button>
```

## Configuration Options

### Initialization Options

| Option | Type | Required | Description |
|--------|------|----------|-------------|
| apiKey | string | Yes | Your Longswipe API key |
| environment | string | No | API environment ('production' or 'sandbox'). Default is 'sandbox' |
| referenceId | string | Yes | Your reference ID for the transaction |
| defaultCurrency | string | No | Default currency for redemption |
| defaultAmount | number | No | Default amount for redemption |
| onSuccess | function | No | Callback function when voucher is successfully redeemed |
| onError | function | No | Callback function when an error occurs |
| onClose | function | No | Callback function when widget is closed |
| metaData | object | No | Additional metadata to include with the redemption |

### Style Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| backgroundColor | string | 'white' | Background color of the widget |
| textColor | string | 'black' | Text color of the widget |
| buttonColor | string | '#007bff' | Background color of buttons |
| buttonTextColor | string | 'white' | Text color of buttons |
| borderRadius | string | '8px' | Border radius of the widget and elements |
| width | string | '80%' | Width of the widget |
| maxWidth | string | '500px' | Maximum width of the widget |

## Methods

| Method | Description |
|--------|-------------|
| setup(styles) | Configure widget styles |
| open() | Open the widget |
| close() | Close the widget |

## Events

### onSuccess

Triggered when a voucher is successfully redeemed. The callback receives a data object with:

```javascript
{
  voucherCode: "VOUCHER123",
  amount: 100,
  currency: "USDT",
  timestamp: "2023-04-25T12:34:56.789Z"
}
```

### onError

Triggered when an error occurs. The callback receives the error message.

### onClose

Triggered when the widget is closed.

## Development

### Prerequisites

- Node.js (v14+)
- npm or yarn

### Setup

1. Clone the repository
2. Install dependencies:

```bash
npm install
```

3. Build the widget:

```bash
npm run build
```

4. Test the widget:

Open `demo.html` in your browser.

## Environment Indicators

When using the widget in the 'sandbox' environment, a red banner with "SANDBOX" text will appear at the top of the modal to clearly indicate that the widget is operating in sandbox mode.

## Changelog

### v1.1.0 (2025-03-29)
- Added sandbox environment indicator banner
- Updated modal UI to show a red "SANDBOX" banner when in sandbox mode
- Improved environment handling in the widget

### v1.0.0 (Initial Release)
- Initial release with basic voucher redemption functionality
- Customizable UI
- Responsive design
- Error handling

## License

MIT