Payment

POS payment component with method selection, quick amounts, change calculation, split payments, summary totals, and action buttons.

Payment Methods

Preview

Payment Method

Cash

Card

ERPlora Wallet

Transfer

<div class="payment" style="max-width: 480px;">
  <div class="payment-section">
    <span class="payment-label">Payment Method</span>
    <div class="payment-methods">
      <div class="payment-method payment-method-selected">
        <span class="payment-method-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:2rem;height:2rem;"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M2 10h20"/></svg>
        </span>
        <span class="payment-method-name">Cash</span>
      </div>
      <div class="payment-method">
        <span class="payment-method-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:2rem;height:2rem;"><rect x="1" y="4" width="22" height="16" rx="2"/><path d="M1 10h22"/></svg>
        </span>
        <span class="payment-method-name">Card</span>
      </div>
      <div class="payment-method">
        <span class="payment-method-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:2rem;height:2rem;"><path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/><path d="M12 7v5l3 3"/></svg>
        </span>
        <span class="payment-method-name">ERPlora Wallet</span>
      </div>
      <div class="payment-method">
        <span class="payment-method-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:2rem;height:2rem;"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
        </span>
        <span class="payment-method-name">Transfer</span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-6" style="max-width: 480px;">
  <div class="flex flex-col gap-2">
    <span class="text-xs font-semibold uppercase tracking-wider text-base-content/50">Payment Method</span>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(100px,1fr))] gap-2">
      <div class="flex flex-col items-center gap-2 p-4 border-2 border-primary bg-primary/5 rounded-box cursor-pointer">
        <svg class="size-8 text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M2 10h20"/></svg>
        <span class="text-sm font-medium">Cash</span>
      </div>
      <div class="flex flex-col items-center gap-2 p-4 border border-base-300 rounded-box cursor-pointer hover:border-primary hover:bg-base-200">
        <svg class="size-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="22" height="16" rx="2"/><path d="M1 10h22"/></svg>
        <span class="text-sm font-medium">Card</span>
      </div>
      <div class="flex flex-col items-center gap-2 p-4 border border-base-300 rounded-box cursor-pointer hover:border-primary hover:bg-base-200">
        <svg class="size-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/><path d="M12 7v5l3 3"/></svg>
        <span class="text-sm font-medium">ERPlora Wallet</span>
      </div>
      <div class="flex flex-col items-center gap-2 p-4 border border-base-300 rounded-box cursor-pointer hover:border-primary hover:bg-base-200">
        <svg class="size-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
        <span class="text-sm font-medium">Transfer</span>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Select payment method
document.querySelectorAll('.payment-method').forEach(method => {
  method.addEventListener('click', () => {
    if (method.classList.contains('payment-method-disabled')) return;
    document.querySelectorAll('.payment-method').forEach(m =>
      m.classList.remove('payment-method-selected')
    );
    method.classList.add('payment-method-selected');
  });
});

Quick Amounts

Preview

Quick Amount

Change €5.50

<div class="payment" style="max-width: 480px;">
  <div class="payment-section">
    <span class="payment-label">Quick Amount</span>
    <div class="payment-quick">
      <button class="payment-quick-btn">5 &euro;</button>
      <button class="payment-quick-btn">10 &euro;</button>
      <button class="payment-quick-btn">20 &euro;</button>
      <button class="payment-quick-btn">50 &euro;</button>
      <button class="payment-quick-btn">Exact</button>
    </div>
  </div>
  <div class="payment-section">
    <div class="payment-change">
      <span class="payment-change-label">Change</span>
      <span class="payment-change-amount">&euro;5.50</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-6" style="max-width: 480px;">
  <div class="flex flex-col gap-2">
    <span class="text-xs font-semibold uppercase tracking-wider text-base-content/50">Quick Amount</span>
    <div class="flex flex-wrap gap-2">
      <button class="px-4 py-2 text-sm font-medium bg-base-200 border border-base-300 rounded-field hover:bg-base-300 active:scale-97">5 &euro;</button>
      <button class="px-4 py-2 text-sm font-medium bg-base-200 border border-base-300 rounded-field hover:bg-base-300 active:scale-97">10 &euro;</button>
      <button class="px-4 py-2 text-sm font-medium bg-base-200 border border-base-300 rounded-field hover:bg-base-300 active:scale-97">20 &euro;</button>
      <button class="px-4 py-2 text-sm font-medium bg-base-200 border border-base-300 rounded-field hover:bg-base-300 active:scale-97">50 &euro;</button>
      <button class="px-4 py-2 text-sm font-medium bg-base-200 border border-base-300 rounded-field hover:bg-base-300 active:scale-97">Exact</button>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <span class="text-sm text-base-content/60">Change</span>
    <span class="text-3xl font-bold text-success">&euro;5.50</span>
  </div>
</div>

Requires: tw.min.css

// Quick amount selection
const totalDue = 14.50;
document.querySelectorAll('.payment-quick-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const text = btn.textContent.trim();
    let tendered;
    if (text === 'Exact') tendered = totalDue;
    else tendered = parseFloat(text);
    const change = tendered - totalDue;
    document.querySelector('.payment-change-amount').textContent =
      '€' + Math.max(0, change).toFixed(2);
  });
});

Payment Summary

Preview

Subtotal €42.00

Tax (21%) €8.82

Discount -€5.00

Total €45.82

<div class="payment" style="max-width: 480px;">
  <div class="payment-summary">
    <div class="payment-summary-row">
      <span>Subtotal</span>
      <span>&euro;42.00</span>
    </div>
    <div class="payment-summary-row">
      <span>Tax (21%)</span>
      <span>&euro;8.82</span>
    </div>
    <div class="payment-summary-row">
      <span>Discount</span>
      <span style="color: var(--color-success, #16a34a);">-&euro;5.00</span>
    </div>
    <div class="payment-summary-row payment-summary-total">
      <span>Total</span>
      <span>&euro;45.82</span>
    </div>
  </div>
  <div class="payment-actions">
    <button class="btn btn-outline" style="flex:1;">Cancel</button>
    <button class="btn color-primary" style="flex:1;">Pay &euro;45.82</button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-6" style="max-width: 480px;">
  <div class="flex flex-col gap-2 p-4 bg-base-200 rounded-box">
    <div class="flex justify-between text-sm text-base-content/60">
      <span>Subtotal</span>
      <span>&euro;42.00</span>
    </div>
    <div class="flex justify-between text-sm text-base-content/60">
      <span>Tax (21%)</span>
      <span>&euro;8.82</span>
    </div>
    <div class="flex justify-between text-sm text-success">
      <span>Discount</span>
      <span>-&euro;5.00</span>
    </div>
    <div class="flex justify-between pt-3 mt-2 border-t-2 border-base-300 text-lg font-bold">
      <span>Total</span>
      <span>&euro;45.82</span>
    </div>
  </div>
  <div class="flex gap-2">
    <button class="btn btn-outline flex-1">Cancel</button>
    <button class="btn color-primary flex-1">Pay &euro;45.82</button>
  </div>
</div>

Requires: tw.min.css

// Process payment
document.querySelector('.payment-actions .color-primary')?.addEventListener('click', () => {
  // Submit payment to your backend
  console.log('Processing payment...');
});

Compact & Glass

Preview

Method

Cash

Card

Total €12.50

Method

Card

ERPlora Wallet

Total €28.90

<div class="flex gap-6 flex-wrap">
  <!-- Compact -->
  <div class="payment payment-compact" style="max-width: 360px;">
    <div class="payment-section">
      <span class="payment-label">Method</span>
      <div class="payment-methods-list">
        <div class="payment-method payment-method-selected">
          <span class="payment-method-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:1.5rem;height:1.5rem;"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M2 10h20"/></svg>
          </span>
          <span class="payment-method-name">Cash</span>
        </div>
        <div class="payment-method">
          <span class="payment-method-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:1.5rem;height:1.5rem;"><rect x="1" y="4" width="22" height="16" rx="2"/><path d="M1 10h22"/></svg>
          </span>
          <span class="payment-method-name">Card</span>
        </div>
      </div>
    </div>
    <div class="payment-summary">
      <div class="payment-summary-row payment-summary-total">
        <span>Total</span>
        <span>&euro;12.50</span>
      </div>
    </div>
  </div>

  <!-- Glass -->
  <div style="background: linear-gradient(135deg, #667eea, #764ba2); padding: 1.5rem; border-radius: 0.75rem;">
    <div class="payment glass" style="max-width: 360px;">
      <div class="payment-section">
        <span class="payment-label">Method</span>
        <div class="payment-methods-2col">
          <div class="payment-method payment-method-selected">
            <span class="payment-method-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:2rem;height:2rem;"><rect x="1" y="4" width="22" height="16" rx="2"/><path d="M1 10h22"/></svg>
            </span>
            <span class="payment-method-name">Card</span>
          </div>
          <div class="payment-method">
            <span class="payment-method-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:2rem;height:2rem;"><path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/><path d="M12 7v5l3 3"/></svg>
            </span>
            <span class="payment-method-name">ERPlora Wallet</span>
          </div>
        </div>
      </div>
      <div class="payment-summary">
        <div class="payment-summary-row payment-summary-total">
          <span>Total</span>
          <span>&euro;28.90</span>
        </div>
      </div>
      <div class="payment-actions">
        <button class="btn color-primary" style="width:100%;">Pay &euro;28.90</button>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex gap-6 flex-wrap">
  <!-- Compact: uses smaller padding and gap -->
  <div class="flex flex-col gap-3 p-3 bg-base-100 rounded-box border border-base-300" style="max-width: 360px;">
    <span class="text-xs font-semibold uppercase tracking-wider text-base-content/50">Method</span>
    <div class="grid grid-cols-1 gap-1">
      <div class="flex items-center gap-2 p-2 border-2 border-primary bg-primary/5 rounded-box cursor-pointer">
        <svg class="size-6 text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M2 10h20"/></svg>
        <span class="text-sm font-medium">Cash</span>
      </div>
      <div class="flex items-center gap-2 p-2 border border-base-300 rounded-box cursor-pointer hover:border-primary">
        <svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="22" height="16" rx="2"/><path d="M1 10h22"/></svg>
        <span class="text-sm font-medium">Card</span>
      </div>
    </div>
    <div class="flex justify-between pt-3 border-t-2 border-base-300 text-lg font-bold">
      <span>Total</span><span>&euro;12.50</span>
    </div>
  </div>

  <!-- Glass -->
  <div style="background: linear-gradient(135deg, #667eea, #764ba2); padding: 1.5rem; border-radius: 0.75rem;">
    <div class="flex flex-col gap-4 p-4 bg-white/10 backdrop-blur-xl border border-white/20 rounded-box" style="max-width: 360px;">
      <!-- Glass payment content -->
    </div>
  </div>
</div>

Requires: tw.min.css

// Same selection logic applies to compact and glass variants
// .payment-compact reduces padding/gap
// .glass applies glass morphism via CSS

Classes Reference

Class	Description
.payment	Base container (flex column, gap-6)
.payment-section	Section group
.payment-label	Uppercase section label
.payment-methods	Grid of payment method cards (auto-fit)
.payment-methods-list	Single column methods grid
.payment-methods-2col	Two column methods grid
.payment-methods-3col	Three column methods grid
.payment-method	Individual method card (flex col, centered, border, rounded)
.payment-method-selected	Active/selected state (primary border + bg)
.payment-method-disabled	Disabled state
.payment-method-icon	Icon in method card (size-8)
.payment-method-name	Method label text
.payment-quick	Quick amount buttons row (flex wrap gap-2)
.payment-quick-btn	Individual quick amount button
.payment-change	Change display container
.payment-change-label	Label for change display
.payment-change-amount	Change amount (green/success color, text-3xl bold)
.payment-split	Split payment section
.payment-split-row	Row in split section (flex between)
.payment-summary	Summary section
.payment-summary-row	Row in summary
.payment-summary-total	Total row (bold, larger text)
.payment-actions	Action buttons row
.payment-compact	Compact sizing variant
.glass	Glass morphism variant