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:

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

Option 2: NPM (Coming Soon)

npm install @longswipe/longswipe-widget

Usage

Basic Implementation

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

{
  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:

npm install

3. Build the widget:

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