# Order summary component
The order summary component lists the products in the customer's cart at checkout-time and provides an item-level and order-level breakdown of how much they are to be charged, denominated in the [checkout-session's](https://app.gitbook.com/s/x8fSFzVR3sg0TsNWwwVz/drop-in-checkout-sessions/checkout-sessions-basics) [`currency`](https://app.gitbook.com/s/x8fSFzVR3sg0TsNWwwVz/drop-in-checkout-sessions/checkout-sessions-basics#currency).
For each of that resource's [`items[]`](https://app.gitbook.com/s/x8fSFzVR3sg0TsNWwwVz/drop-in-checkout-sessions/checkout-sessions-basics#product-data), the component displays its `quantity` along with the `image` and `name` that you either passed in [`productDetails`](https://docs.digitalriver.com/digital-river-api/product-management/skus#product-details) or stored in the referenced [SKU](https://docs.digitalriver.com/digital-river-api/product-management/skus#skus).
As customers progress through the various checkout stages, Digital River computes applicable taxes and shipping costs and then updates the experience.
## Creating the order summary component
To create an instance of the order summary component, pass `'ordersummary'` to [`createComponent()`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/..#createcomponent-componenttype).
```javascript
let orderSummaryComponent;
...
orderSummaryComponent = components.createComponent('ordersummary');
```
## Mounting the order summary component
To attach the order summary component to your DOM, pass the `id` of its container to [`mount()`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/..#mount-elementid).
```javascript
