@longswipe/longswipe-widget v1.0.22

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

Style Options

Methods

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