Promo Code

Coupon entry with a tag-prefixed code field, an Apply button, and an emerald confirmation row showing the discount and amount saved.

Promo code

SUMMER20

20% off applied

−$24.00

New here? Read the installation guide.

Import & use

import { Commerce11 } from "@/components/beste/piece/commerce11";

<Commerce11
  code="SUMMER20"
  applied={true}
  discount="20% off"
  saved="−$24.00"
/>

More Commerce pieces

View all Commerce

Order confirmed#SO-8241

$284.00

Arrives Apr 26 – Apr 28

Receipt sent to hello@beste.co

Order Confirmation

Post-purchase card with an emerald check, order id, total price, a package-arrival line, and the receipt email destination.

Cashmere Crewneck

$189$260−27%

Sale ends in 2d 4h

Price Stack

Pricing card with the sale price in rose, the original price struck through, a percent-off badge, and a countdown to sale end.

Subtotal$284.00

ShippingFree

Tax (8.5%)$24.14

Discount · SUMMER20−$56.80

Total$251.34

Cart Summary

Order math card with subtotal, shipping, tax, and an emerald discount line, separated from a bold final total below.

Subscribe & save

−10%

Next deliveryMay 21, 2026

You save$4.80 / order

Subscribe & Save

Recurring purchase card with a tone discount badge, a frequency dropdown, next delivery date, emerald per-order savings, and a tone Subscribe CTA.

Field Leather Backpack$340

Wishlist Save

Product row with a photo, name, price, and a pill Save button that fills with a rose heart and shows the total wishlist count when active.

Mia R. in Los Angeles just bought Air Max 90

3 min ago

Live Sale Toast

Social-proof popup with a gradient initials avatar and an emerald shopping-bag dot, a who-bought-what sentence, and a relative time stamp.