# OrderSummary

The `OrderSummary` component is a summary component that displays the total price of the order. You can use this component to show the total price of the order.

### Props <a href="#props-3" id="props-3"></a>

#### className `string?` <a href="#classname-string-2" id="classname-string-2"></a>

The class name that is applied to the summary element. This prop is optional, and it defaults to an empty string.

#### fallback `React.ReactNode?` <a href="#fallback-reactreactnode-3" id="fallback-reactreactnode-3"></a>

A fallback component that is shown while the data is loading. This prop is optional, and it defaults to `null`.

#### OrderSummaryUIComponent `React.ComponentType<`[OrderSummaryUIProps](https://github.com/firmhouse/firmhouse-sdk/blob/alpha/packages/headless-react/src/lib/components/order-summary-ui.tsx#L6-L19)`>?` <a href="#ordersummaryuicomponent-reactcomponenttypeordersummaryuiprops" id="ordersummaryuicomponent-reactcomponenttypeordersummaryuiprops"></a>

A custom component that is used to render the order summary. This prop is optional, and it defaults to the [`OrderSummaryUI`](https://github.com/firmhouse/firmhouse-sdk/blob/alpha/packages/headless-react/src/lib/components/order-summary-ui.tsx) component. This component receives the necessary data to render the order summary.

### Example <a href="#example-1" id="example-1"></a>

```jsx
import { formatCentsWithCurrency } from "@firmhouse/firmhouse-sdk";

function CustomOrderSummaryUI({
  totalAmount,
  totalTaxAmount,
  cart,
  children,
  currency,
  t,
}) {
  return (  
    <div>
      <div>
        <p>{t?.("orderSummary.toPayNow")}</p>
        <p>
          <span>{t?.("orderSummary.subtotal")}</span>
          <span>
            {formatCentsWithCurrency(totalAmount, currency, locale ?? cart?.locale)}
          </span>
        </p>
        <p>
          <span>
            {t?.("orderSummary.shippingCost")}
          </span>
          <span>{t?.("orderSummary.free")}</span>
        </p>
        <p>
          <span>{t?.("orderSummary.total")}</span>
          <span>
            {formatCentsWithCurrency(totalAmount, currency, locale ?? cart?.locale)}
          </span>
        </p>
        <p>
          <span>
            {t?.("orderSummary.tax", {
              amount: formatCentsWithCurrency(
                totalTaxAmount ?? 0,
                currency,
                locale ?? cart?.locale
              ),
            })}
          </span>
        </p>
        {children}
      </div>
    </div>
  );
}

<OrderSummary OrderSummaryUIComponent={CustomOrderSummaryUI} />
```