JavaScript SDK

Use Peeap widgets without React using our vanilla JavaScript SDK.

CDN Installation

Add the script to your HTML file. No build tools required.

<!-- Add to your HTML head or before closing body tag -->
<script src="https://cdn.peeap.com/widgets.js"></script>

Basic Usage

Render a Widget

<div id="pos-terminal"></div>

<script>
  // Render POS Terminal
  Peeap.render('POSTerminal', {
    container: '#pos-terminal',
    apiKey: 'pk_live_your_api_key',
    merchantId: 'your_merchant_id',
    theme: 'light',
    onSaleComplete: function(sale) {
      console.log('Sale completed:', sale)
    }
  })
</script>

Available Widgets

// POS Terminal
Peeap.render('POSTerminal', { container: '#pos', ... })

// Invoice Creator
Peeap.render('InvoiceCreator', { container: '#invoices', ... })

// Event Tickets
Peeap.render('EventTicketSales', { container: '#tickets', eventId: 'evt_xxx', ... })

// Ticket Scanner
Peeap.render('TicketScanner', { container: '#scanner', eventId: 'evt_xxx', ... })

// Payment Link Creator
Peeap.render('PaymentLinkCreator', { container: '#payment-links', ... })

// Payment Button
Peeap.render('PaymentLinkButton', {
  container: '#pay-button',
  amount: 99.00,
  description: 'Premium Plan',
  ...
})

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Store</title>
  <style>
    .pos-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="pos-container">
    <h1>Point of Sale</h1>
    <div id="pos-terminal"></div>
  </div>

  <script src="https://cdn.peeap.com/widgets.js"></script>
  <script>
    // Wait for Peeap to be ready
    Peeap.ready(function() {
      // Render the POS Terminal
      var pos = Peeap.render('POSTerminal', {
        container: '#pos-terminal',
        apiKey: 'pk_live_your_api_key',
        merchantId: 'your_merchant_id',
        theme: 'light',
        currency: 'SLL',
        taxRate: 15,
        showCategories: true,
        showInventory: true,

        onSaleComplete: function(sale) {
          console.log('Sale ID:', sale.id)
          console.log('Total:', sale.total)
          alert('Sale completed! Receipt: ' + sale.receipt_number)
        },

        onError: function(error) {
          console.error('POS Error:', error)
          alert('Error: ' + error.message)
        }
      })

      // You can also control the widget programmatically
      // pos.clearCart()
      // pos.addProduct(productId, quantity)
      // pos.destroy()
    })
  </script>
</body>
</html>

API Reference

Peeap.ready(callback)

Execute code when the SDK is fully loaded.

Peeap.ready(function() {
  // SDK is ready, safe to render widgets
})

Peeap.render(widgetName, options)

Render a widget into a container element. Returns a widget instance.

var widget = Peeap.render('POSTerminal', {
  container: '#my-container',  // CSS selector or DOM element
  apiKey: 'pk_live_xxx',
  merchantId: 'xxx',
  // ... other options
})

Widget Instance Methods

var pos = Peeap.render('POSTerminal', { ... })

// Destroy the widget
pos.destroy()

// Update configuration
pos.setConfig({ theme: 'dark' })

// POS-specific methods
pos.clearCart()
pos.addProduct('product_id', 2)
pos.setDiscount(10)  // 10%

// Invoice-specific methods
invoice.reset()
invoice.setCustomer({ name: 'John', email: 'john@example.com' })

Global Configuration

// Set default config for all widgets
Peeap.config({
  apiKey: 'pk_live_xxx',
  merchantId: 'xxx',
  theme: 'dark',
  currency: 'SLL'
})

// Now you can render without repeating config
Peeap.render('POSTerminal', { container: '#pos' })
Peeap.render('InvoiceCreator', { container: '#invoices' })

Event Handling

var pos = Peeap.render('POSTerminal', {
  container: '#pos',
  apiKey: 'pk_live_xxx',
  merchantId: 'xxx',

  // Event callbacks
  onReady: function() {
    console.log('Widget is ready')
  },

  onProductAdded: function(product, quantity) {
    console.log('Added to cart:', product.name, 'x', quantity)
  },

  onCartUpdated: function(cart) {
    console.log('Cart total:', cart.total)
    document.getElementById('cart-count').textContent = cart.items.length
  },

  onSaleComplete: function(sale) {
    // Handle completed sale
    console.log('Sale:', sale.id)
    printReceipt(sale)
  },

  onError: function(error) {
    // Handle errors
    showNotification('Error: ' + error.message, 'error')
  }
})

Platform Integration

WordPress

<!-- Add to your theme's footer.php or via a custom HTML block -->
<div id="peeap-pos"></div>
<script src="https://cdn.peeap.com/widgets.js"></script>
<script>
  Peeap.ready(function() {
    Peeap.render('POSTerminal', {
      container: '#peeap-pos',
      apiKey: 'pk_live_xxx',
      merchantId: 'xxx'
    })
  })
</script>

Shopify

<!-- Add to theme.liquid before </body> -->
{% if template contains 'page.pos' %}
  <script src="https://cdn.peeap.com/widgets.js"></script>
  <script>
    Peeap.ready(function() {
      Peeap.render('POSTerminal', {
        container: '#peeap-pos',
        apiKey: '{{ settings.peeap_api_key }}',
        merchantId: '{{ settings.peeap_merchant_id }}'
      })
    })
  </script>
{% endif %}

Webflow

<!-- Add to page settings > Custom Code > Footer -->
<script src="https://cdn.peeap.com/widgets.js"></script>
<script>
  Peeap.ready(function() {
    Peeap.render('PaymentLinkButton', {
      container: '[data-peeap-button]',
      apiKey: 'pk_live_xxx',
      amount: 99,
      description: 'Service Payment'
    })
  })
</script>