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



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

Lists the digital items of an order on a thank-you page: gift card codes with a copy button, and downloadable
files with a download link. It loads the order from the API and shows a placeholder when the order has no
code or digital file items. Use it on the order confirmation or order details page.

## Use it [#use-it]

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

```tsx
import { SallaOrderSummary } from '@salla.sa/twilight-components-react/order-summary';
```

**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 { SallaOrderSummary } from '@salla.sa/twilight-components-react/order-summary';

export function Example() {
  return (
    <SallaOrderSummary orderId={1234567} />
  );
}
```

```html
<salla-order-summary order-id="1234567"></salla-order-summary>
```

## Properties [#properties]

| Property  | Attribute  | Description                                                                                                   | Type     | Default |
| --------- | ---------- | ------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `orderId` | `order-id` | The ID of the order to load. When it is not set, the current page id (`salla.config.get('page.id')`) is used. | `number` |         |

## Related [#related]

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