About this piece
Cart Summary
Order math card with subtotal, shipping, tax, and an emerald discount line, separated from a bold final total below.
Usage
The import and the props worth knowing about, in one place.
import { Commerce23 } from "@/components/beste/piece/commerce23";
<Commerce23
rows={[
{
"label": "Subtotal",
"value": "$284.00"
},
{
"label": "Shipping",
"value": "Free",
"muted": true
},
{
"label": "Tax (8.5%)",
"value": "$24.14"
},
{
"label": "Discount · SUMMER20",
"value": "−$56.80",
"emphasis": true
}
]}
total="$251.34"
totalLabel="Total"
/>More Commerce pieces
View all CommerceOrder confirmed#SO-8241
$284.00Arrives Apr 26 – Apr 28
Receipt sent to hello@beste.coOrder Confirmation
Post-purchase card with an emerald check, order id, total price, a package-arrival line, and the receipt email destination.
Nomad Diver WatchBlack · Steel band
$4201
Add to Cart
Mini cart-line card with product photo, name, variant, price, a minus/plus quantity stepper, and a tone-filled Add to cart button.
Beste Goods · SF
INV-2026-04212× Air Max 90$258.00
1× Cotton Tee$48.00
1× Retro Shades$38.00
Subtotal$344.00
Total$368.14
Paid · Visa ending 4242Receipt Lines
Dashed-border receipt with the store name and order id, three monospaced quantity-name-price rows, a subtotal, and a bold final total with payment method.
Add $27 more for free shipping.
$48$75 goal
Free Shipping Bar
Shipping threshold card with a truck icon, an amount-to-go message that flips emerald on qualifying, and a tone progress fill toward the goal.