🛒

POS Terminal

Point-of-sale system with cart and payments

Interactive Demo

Try the POS Terminal below. Click products to add them to cart, adjust quantities, and complete a sale.

Current Order

🛒

Cart is empty

Tap products to add

SubtotalNLe 0.00
GST (15%)NLe 0.00
TotalNLe 0.00

Select payment method to checkout

AI Integration Guide

Copy this prompt to your AI coding assistant (v0, Cursor, Claude, ChatGPT) to integrate the POS Terminal.

Prompt for AI Assistant

bash
I want to add a Peeap POS Terminal to my app. Here are the details:

"code-comment">## Installation
npm install @peeap/widgets

"code-comment">## Basic Usage (React/Next.js)
import { POSTerminal } from '@peeap/widgets'

function MyPOS() {
  return (
    <POSTerminal
      apiKey="pk_live_YOUR_API_KEY"
      merchantId="YOUR_MERCHANT_ID"
      onSaleComplete={(sale) => console.log('Sale completed:', sale)}
    />
  )
}

"code-comment">## Available Props
- apiKey (required): Your Peeap public API key
- merchantId (required): Your merchant business ID
- theme: 'light' | 'dark' (default: 'light')
- showInventory: boolean (default: true) - Show stock levels
- showCategories: boolean (default: true) - Show category filters
- allowDiscounts: boolean (default: true) - Enable discount input
- taxRate: number (default: 0) - Tax percentage (e.g., 15 for 15%)
- currency: string (default: 'SLE') - Currency code
- onSaleComplete: (sale: Sale) => void - Callback when sale is completed
- onError: (error: Error) => void - Error callback

Please integrate this into my app with [describe your requirements].

Component Props

PropTypeDefaultDescription
apiKeystringrequiredYour Peeap public API key
merchantIdstringrequiredYour merchant business ID
theme'light' | 'dark''light'Color theme for the terminal
showInventorybooleantrueShow product stock levels
taxRatenumber0Tax percentage (e.g., 15 for 15%)
currencystring'SLE'Currency code for display
onSaleCompletefunction-Callback when sale is completed

Code Examples

Basic Integration

tsx
class="code-keyword">import { POSTerminal } class="code-keyword">from class="code-keyword">class="code-string">'@peeap/widgets'

class="code-keyword">export class="code-keyword">default class="code-keyword">function class="code-function">StorePage() {
  class="code-keyword">return (
    <div className=class="code-keyword">class="code-string">"container mx-auto p-4">
      <h1>My Store</h1>
      <class="code-component">POSTerminal
        apiKey=class="code-keyword">class="code-string">"pk_live_your_key"
        merchantId=class="code-keyword">class="code-string">"your_merchant_id"
      />
    </div>
  )
}

With Sale Handling

tsx
class="code-keyword">import { POSTerminal, Sale } class="code-keyword">from class="code-keyword">class="code-string">'@peeap/widgets'

class="code-keyword">export class="code-keyword">default class="code-keyword">function class="code-function">StorePage() {
  class="code-keyword">const handleSaleComplete = (sale: Sale) => {
    console.class="code-function">log(class="code-keyword">class="code-string">'Sale ID:', sale.id)
    console.class="code-function">log(class="code-keyword">class="code-string">'Total:', sale.total)
    console.class="code-function">log(class="code-keyword">class="code-string">'Items:', sale.items)

    class="code-keyword">class=class="code-keyword">class="code-string">"code-comment">// Send receipt, update your own database, etc.
  }

  class="code-keyword">return (
    <class="code-component">POSTerminal
      apiKey=class="code-keyword">class="code-string">"pk_live_your_key"
      merchantId=class="code-keyword">class="code-string">"your_merchant_id"
      onSaleComplete={handleSaleComplete}
      onError={(error) => console.class="code-function">error(error)}
    />
  )
}

Customized for Sierra Leone

tsx
<class="code-component">POSTerminal
  apiKey=class="code-keyword">class="code-string">"pk_live_your_key"
  merchantId=class="code-keyword">class="code-string">"your_merchant_id"
  currency=class="code-keyword">class="code-string">"SLE"
  taxRate={15}
  theme=class="code-keyword">class="code-string">"light"
  showInventory={class="code-keyword">true}
  allowDiscounts={class="code-keyword">true}
/>

Features You Can Enable/Disable

Product Display

  • - Category tabs - showCategories
  • - Stock levels - showInventory
  • - Product images - showImages
  • - Product search - showSearch

Cart & Checkout

  • - Discount input - allowDiscounts
  • - Tax calculation - taxRate
  • - Customer name - captureCustomer
  • - Receipt printing - enablePrint

Payment Methods

  • - Cash payments - allowCash
  • - QR payments - allowQR
  • - NFC payments - allowNFC
  • - Mobile money - allowMobileMoney

Appearance

  • - Light/dark theme - theme
  • - Primary color - primaryColor
  • - Border radius - borderRadius
  • - Custom CSS - className