Order Summary

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

import { OrderSummary } from '@faststore/ui'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g., cypress, testing-library, and jest).	`fs-order-summary`
subtotalLabel	`string`	Label for the subtotal value of the order. It will only show if subtotalValue is provided.
subtotalValue	`string`	Subtotal value of the order. If provided, a subtotal label and value will be shown.
discountLabel	`string`	Label for the discount value for the order. It will only show if discountValue is provided.	`Discount`
discountValue	`string`	Discount value for the order. If provided, a discount label and value will be shown.
totalLabel	`string`	Label for the total value of the order.	`Total`
totalValue	`string`	Total value of the order.
includeTaxes	`false \| true`	Specifies whether the displayed price should include taxes.	`false`
includeTaxesLabel	`string`	Label to determine if the price includes taxes.	`Tax included`

Local token	Default value/Global token linked
`--fs-order-summary-padding`	`var(--fs-spacing-3)`
`--fs-order-summary-margin-bottom`	`var(--fs-spacing-2)`
`--fs-order-summary-row-gap`	`0`

`--fs-order-summary-discount-text-color`	`var(--fs-color-success-text)`

`--fs-order-summary-total-text-size`	`var(--fs-text-size-3)`
`--fs-order-summary-total-text-font-weight`	`var(--fs-text-weight-bold)`

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