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



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

<Callout title="Used inside salla-cart-summary">
  [`<salla-cart-summary>`](https://docs.salla.dev/twilight/react/web-components/salla-cart-summary) renders this component for you. You rarely use it directly.
</Callout>

Cart summary card for the cart page. It loads the current cart and shows the items subtotal, options total,
shipping, tax, discount and the final total, with a "complete order" button that validates the cart item forms
and submits the cart. It stays up to date through the cart events of the SDK and shows a skeleton while loading.

On screens 1024px wide or more it renders inline where it is placed. On smaller screens the element is moved to the
end of `body` and becomes a sticky bottom bar with a collapsible details sheet; the chevron button has
`aria-label` and `aria-expanded`. It is moved back to its original place when the screen grows.

## Use it [#use-it]

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

```tsx
import { SallaCartSummaryCard } from '@salla.sa/twilight-components-react/cart-summary-card';
```

## Example [#example]

```tsx
import { SallaCartSummaryCard } from '@salla.sa/twilight-components-react/cart-summary-card';

export function Example() {
  return (
    <SallaCartSummaryCard />
  );
}
```

```html
<salla-cart-summary-card></salla-cart-summary-card>
```

## Properties [#properties]

| Property        | Attribute        | Description                                                                                                                                                                                                                                                                       | Type      | Default |
| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `validateForms` | `validate-forms` | When true (default), clicking the "complete order" button first validates every cart item form (`form[id^="item-"]`), including their `salla-product-options`. If any is invalid, the submit is cancelled and an error notification is shown. Set it to false to skip this check. | `boolean` | `true`  |

## Related [#related]

Renders: [`<salla-skeleton>`](https://docs.salla.dev/twilight/react/web-components/salla-skeleton), [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button).