Transactions

Show a user's order and payment history with <u-transaction-list>. It follows the same template pattern as tickets — <transaction-value> placeholders, filter attribute, pagination — over transaction data synced into Unidy from your shop or ERP.

View this guide as Markdown

Transaction history table

A paginated order-history table. transaction-value reads any field from the transaction — reference, totals, dates, payment status — and the financial_status is stamped onto a badge for CSS coloring.

  • <transaction-value> — reference, placed_at, total, financial_status, …
  • target rendering + pagination — identical mechanics to u-ticketable-list
  • Skeleton loading — placeholders while the page loads 
<u-signed-in>
  <!-- Order/purchase history. Same template pattern as tickets, with
       transaction-value placeholders and filter/pagination support. -->
  <u-transaction-list
    id="transaction-history"
    target="#transactions-body"
    limit="5"
    skeleton-all-text="true">
    <div class="overflow-x-auto">
      <table class="min-w-full rounded-lg border border-border bg-white">
        <thead
          class="bg-background-light text-left text-xs uppercase tracking-wider text-text-muted">
          <tr>
            <th class="px-4 py-3">Reference</th>
            <th class="px-4 py-3">Placed</th>
            <th class="px-4 py-3">Total</th>
            <th class="px-4 py-3">Payment</th>
          </tr>
        </thead>
        <tbody id="transactions-body" class="divide-y divide-border"></tbody>
      </table>
    </div>

    <div class="mt-4 flex items-center gap-2">
      <u-pagination-button
        direction="prev"
        class-name="px-3 py-2 rounded-lg border border-border bg-white text-sm cursor-pointer hover:bg-background-light disabled:opacity-50 disabled:cursor-not-allowed">
      </u-pagination-button>
      <u-pagination-page class-name="px-3 py-2 text-sm"></u-pagination-page>
      <u-pagination-button
        direction="next"
        class-name="px-3 py-2 rounded-lg border border-border bg-white text-sm cursor-pointer hover:bg-background-light disabled:opacity-50 disabled:cursor-not-allowed">
      </u-pagination-button>
    </div>

    <template>
      <tr class="transition-colors hover:bg-background-light">
        <td class="whitespace-nowrap px-4 py-3 font-medium">
          <transaction-value name="reference" default="—"></transaction-value>
        </td>
        <td class="whitespace-nowrap px-4 py-3 text-sm text-text-light">
          <transaction-value name="placed_at" date-format="dd.MM.yyyy HH:mm"></transaction-value>
        </td>
        <td class="whitespace-nowrap px-4 py-3 font-semibold text-primary">
          <transaction-value name="total" default="—"></transaction-value>
          <transaction-value name="currency"></transaction-value>
        </td>
        <td class="whitespace-nowrap px-4 py-3">
          <span class="state-badge" unidy-attr unidy-attr-data-state="{{financial_status}}">
            <transaction-value name="financial_status" default="unknown"></transaction-value>
          </span>
        </td>
      </tr>
    </template>

    <!-- shown when the user has no transactions -->
    <p slot="empty" class="py-6 text-center text-sm text-text-light">No transactions yet.</p>
  </u-transaction-list>
</u-signed-in>

<u-signed-in not>
  <p class="text-text-light">
    Sign in on the <a href="/auth" class="text-primary underline">Auth page</a> to see your transactions.
  </p>
</u-signed-in>
Live demo
Reference Placed Total Payment

No transactions yet.

Sign in on the Auth page to see your transactions.

Filtering by payment status

Set the filter attribute (e.g. financial_status=paid) and the list re-fetches. Filters support state, financial_status, order_type, source_platform and external_id — combine with ";".

  • Live filter attribute — no custom fetch code
  • Rich filter keys — state, financial_status, order_type, source_platform 
<u-signed-in>
  <div class="mb-3 flex items-center justify-end">
    <select
      id="financial-status-filter"
      class="rounded-lg border border-border bg-white px-3 py-2 text-sm">
      <option value="">All payment states</option>
      <option value="paid">Paid</option>
      <option value="pending">Pending</option>
      <option value="refunded">Refunded</option>
    </select>
  </div>

  <u-transaction-list id="filtered-transactions" limit="3" container-class="grid gap-3">
    <template>
      <div class="flex items-center justify-between rounded-lg border border-border bg-white p-4">
        <div>
          <p class="font-medium">
            <transaction-value name="reference" default="(no reference)"></transaction-value>
          </p>
          <p class="text-sm text-text-light">
            <transaction-value name="order_type" default="order"></transaction-value>
            via <transaction-value name="source_platform" default="unknown"></transaction-value>
          </p>
        </div>
        <div class="text-right">
          <p class="font-semibold text-primary">
            <transaction-value name="total" default="—"></transaction-value>
          </p>
          <span class="state-badge" unidy-attr unidy-attr-data-state="{{financial_status}}">
            <transaction-value name="financial_status" default="unknown"></transaction-value>
          </span>
        </div>
      </div>
    </template>

    <!-- shown when no transactions match the filter -->
    <p slot="empty" class="py-6 text-center text-sm text-text-light">
      No transactions match this filter.
    </p>
  </u-transaction-list>

  <script is:inline>
    document.getElementById("financial-status-filter").addEventListener("change", (event) => {
      // filter uses key=value pairs joined by ";"
      document
        .getElementById("filtered-transactions")
        .setAttribute("filter", event.target.value ? `financial_status=${event.target.value}` : "");
    });
  </script>
</u-signed-in>

<u-signed-in not>
  <p class="text-text-light">
    Sign in on the <a href="/auth" class="text-primary underline">Auth page</a> to filter transactions.
  </p>
</u-signed-in>
Live demo

No transactions match this filter.

Sign in on the Auth page to filter transactions.