Skip to content
KaufmannCommerce UI
Foundations · v0.1⌘ K

Kaufmann Commerce UI / Commerce family

Shipping & Pricing

Destination-aware shipping zones, minimum-order gates, and staged incentives as small server-first primitives.

Destination and order stages

The country determines the display zone. The selected zone supplies its shipping rate and order-value stages.

Live specimen

Shipping destination

Austria
Domestic
Country

Tracked delivery in 2–4 business days.

Order progress

Spend €14.00 · Free shipping
  1. Minimum order€15.00
  2. Free shipping€50.00
  3. Studio gift€90.00

Stage states

The same primitive covers a checkout gate, progress towards free shipping, and a fully unlocked order.

Live specimen

Below minimum · €10.00

Order progress

Spend €5.00 · Minimum order
  1. Minimum order€15.00
  2. Free shipping€50.00
  3. Studio gift€90.00

All stages reached · €90.00

Order progress

Studio gift unlocked
  1. Minimum order€15.00
  2. Free shipping€50.00
  3. Studio gift€90.00

Placement layouts

The primitives can sit in product detail, checkout, or a compact order-value banner without changing their data contract.

Live specimen
Product detailDelivery estimate

Shipping destination

Austria
Domestic
Country

Tracked delivery in 2–4 business days.

Cart railOrder value

Order progress

Spend €8.00 · Free shipping
  1. Minimum order€15.00
  2. Free shipping€50.00
  3. Studio gift€90.00
Checkout gate€5.00 until the minimum order

Order progress

Spend €5.00 · Minimum order
  1. Minimum order€15.00
  2. Free shipping€50.00
  3. Studio gift€90.00

One projection, three independent concerns

countries map destinations to zones. Each zone owns its display rate and optional minimum-order, free-shipping, and reward stages. projectCartPricing() derives the current shipping amount, estimated total, checkout gate, and ordered stage list without mutating cart state.

ShippingSelector and PricingStages are standalone primitives. Compose them into CartPanel, a drawer, a checkout estimate, or a product-page shipping preview without duplicating presentation logic.

Frontend estimateThe backend must still validate the destination, price, taxes, duties, stock, discounts, and checkout eligibility. This API deliberately does not claim that authority.
Astro
---
import {
  ShippingSelector,
  PricingStages,
  projectCartPricing,
} from "@kaufmann/ui";

const projection = projectCartPricing(cart.subtotal, shippingPolicy);
---

<ShippingSelector client:load shipping={shippingPolicy} />
<PricingStages
  subtotal={cart.subtotal}
  stages={projection.stages}
/>