# Receipt Printer

A SaaS checkout state that turns payment processing into a printed order receipt.

The printer is a small compound component: a physical machine shell with a status screen on top, and a paper slot below where the receipt slides out — line by line for a stepped feed, or in one continuous pull. The status label and indicator swap between *Processing your order*, *Printing your receipt* and *Order complete* as the stage advances. Reduced-motion preferences are respected automatically.

<demo-receipt-printer>



</demo-receipt-printer>

## Usage

```vue
<script setup lang="ts">
  import { ref } from 'vue';
  import ReceiptPrinter from '~/components/ui/receipt-printer/ReceiptPrinter.vue';
  import ReceiptPrinterMachine from '~/components/ui/receipt-printer/ReceiptPrinterMachine.vue';
  import ReceiptPrinterScreen from '~/components/ui/receipt-printer/ReceiptPrinterScreen.vue';
  import ReceiptPrinterStatus from '~/components/ui/receipt-printer/ReceiptPrinterStatus.vue';
  import ReceiptPrinterOutput from '~/components/ui/receipt-printer/ReceiptPrinterOutput.vue';
  import ReceiptPrinterPaper from '~/components/ui/receipt-printer/ReceiptPrinterPaper.vue';
  import type { ReceiptPrinterStage } from '~/components/ui/receipt-printer/types';

  const stage = ref<ReceiptPrinterStage>('printing');
</script>

<template>
  <ReceiptPrinter :stage="stage" feed-motion="stepped">
    <ReceiptPrinterMachine>
      <ReceiptPrinterScreen>
        <ReceiptPrinterStatus />
      </ReceiptPrinterScreen>
    </ReceiptPrinterMachine>
    <ReceiptPrinterOutput>
      <ReceiptPrinterPaper> your receipt content </ReceiptPrinterPaper>
    </ReceiptPrinterOutput>
  </ReceiptPrinter>
</template>
```

## Props

### ReceiptPrinter

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        stage
      </code>
    </td>
    
    <td>
      <code>
        'processing' | 'printing' | 'complete'
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Current state of the printer
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        animate
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Disables all stage transitions when false
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        feed-motion
      </code>
    </td>
    
    <td>
      <code>
        'smooth' | 'stepped'
      </code>
    </td>
    
    <td>
      <code>
        'stepped'
      </code>
    </td>
    
    <td>
      Continuous feed or one line at a time
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        aria-label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Receipt printer'
      </code>
    </td>
    
    <td>
      Accessible name of the section
    </td>
  </tr>
</tbody>
</table>

`ReceiptPrinterStatus` accepts an optional `label` prop to override the stage-derived text.

## Events

The `stage` prop is the single source of truth — advance it on your own timers or backend state and the printer animates the rest.