# salla-order-totals-card (https://docs.salla.dev/twilight/react/web-components/salla-order-totals-card)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

A summary card with the order's price breakdown: items total, options total, discounts, cash on delivery cost, shipping,
tax, paid and remaining amounts, the final total and a refunded amount when there is one. Use it on the order details
page. Rows for values that are missing in the data are skipped. The breakdown is rendered as a description list
(`dl`, `dt`, `dd`) under an `h2` heading.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-order-totals-card>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaOrderTotalsCard } from '@salla.sa/twilight-components-react/order-totals-card';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaOrderTotalsCard } from '@salla.sa/twilight-components-react/order-totals-card';

export function Example() {
  return (
    <SallaOrderTotalsCard order='{"sub_total":{"amount":100,"currency":"SAR"},"total":{"amount":115,"currency":"SAR"},"tax":{"percent":15,"amount":{"amount":15,"currency":"SAR"}}}' />
  );
}
```

```html
<salla-order-totals-card order='{"sub_total":{"amount":100,"currency":"SAR"},"total":{"amount":115,"currency":"SAR"},"tax":{"percent":15,"amount":{"amount":15,"currency":"SAR"}}}'></salla-order-totals-card>
```

## Properties [#properties]

| Property | Attribute | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Type              | Default |
| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------- |
| `order`  | `order`   | The order totals, as an object or a JSON string. Money values use the shape `{ amount: number, currency: string }`. Read keys: `sub_total`, `options` (array; the options total row shows only when it is not empty), `options_total`, `discounts` (array of `{ name, discount }`; `discount` is printed as is, not formatted as money), `cod_cost`, `shipping_cost`, `tax` (`{ percent, amount }`), `paid_amount`, `remaining_amount`, `total` and `refund_amount`. Nothing but an empty wrapper is rendered when it is missing or is invalid JSON. Changing it re-renders the card. | `Order \| string` |         |