Portix.One

example · frameworks

Next.js POS Example

By Portix.One Published
A Next.js server sale mutation handing a stable receipt job to a client print adapter

Quick answer

Finalize sales on the server and integrate the local printer only from a client component. Return a receipt snapshot and stable print key from the mutation, then submit it once through a browser or runtime adapter.

Quick answer

Finalize sales on the server and integrate the local printer only from a client component. Return a receipt snapshot and stable print key from the mutation, then submit it once through a browser or runtime adapter.

// Server-side domain function; call it from an authenticated route/action.
async function completeSale(input: CheckoutInput) {
  const sale = await sales.commit(input); // validates prices, tax, tender and idempotency
  return {
    receipt: sale.receiptSnapshot,
    printKey: `${sale.id}:receipt:${sale.version}`
  };
}
"use client";

export function PrintReceiptButton({ job }: { job: PrintJob }) {
  return <button onClick={() => printAdapter.submit(job)}>Print receipt</button>;
}

const printAdapter = {
  async submit(job: PrintJob) {
    // Browser path: render a dedicated route and call window.print().
    // A Portix-routed path isn't documented yet.
  }
};

Do not access a local runtime from a Server Component or serverless function: localhost there refers to the server environment, not the cashier workstation. Keep payment success independent from print success and store reprint reasons separately.

Verify

  • Refreshing the success page cannot charge or print twice.
  • Server recalculates price and tax.
  • Runtime code loads only in the browser.
  • Reprints reference the original sale.

Related content