Documentation
Feedback
Guides
Storefront Development

Storefront Development
Order Summary

This component provide a summary of the items in the cart, including the total price, related shipping tax, and discounts.

Use this component to provide a summary of the items in the cart, including the total price, related shipping tax, and discounts.

Import

Import the component from @faststore/ui

_10
import { OrderSummary } from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/molecules/OrderSummary/styles.scss'


Usage

Example
Code
  • Subtotal (3 products)$1,200
  • Discount-$100
  • Total$1,100

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-order-summary
subtotalLabelstringLabel for the subtotal value of the order. Will only show if subtotalValue is provided.
subtotalValuestringSubtotal value of the order. If provided, subtotal label and value will be shown.
discountLabelstringLabel for the discount value for the order. Will only show if discountValue is provided.Discount
discountValuestringDiscount value for the order. If provided, discount label and value will be shown.
totalLabelstringLabel for the total value of the order.Total
totalValuestringTotal value of the order.

Design Tokens

Local tokenDefault value/Global token linked
--fs-order-summary-paddingvar(--fs-spacing-3)
--fs-order-summary-margin-bottomvar(--fs-spacing-2)
--fs-order-summary-discount-text-color
var(--fs-color-success-text)
--fs-order-summary-total-text-sizevar(--fs-text-size-3)
--fs-order-summary-total-text-font-weightvar(--fs-text-weight-bold)

Customization

data-fs-order-summary
data-fs-order-summary-subtotal
data-fs-order-summary-subtotal-label
data-fs-order-summary-subtotal-value
data-fs-order-summary-discount
data-fs-order-summary-discount-label
data-fs-order-summary-discount-value
data-fs-order-summary-total
data-fs-order-summary-total-label
data-fs-order-summary-total-value
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page