🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

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'

Import Styles into your FastStore project

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.


Usage


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