# Order Summary component

{% hint style="info" %}
**Note:** The information in this section applies to both the `drb2b_orderSummary` component (Aura only) and the`drb2b_orderSummary_LWR` component (LWR only).
{% endhint %}

The drb2b\_orderSummary component serves two purposes: a) Display Order Summary information on the final Place Order page.  b) Handle logic to place the order and navigate the shopper to the Thank You page.  The component is always required on the Place Order page but can be used with some or all hidden UI elements.

{% hint style="info" %}
**Note:** In LWR implementations, include this component with the UI elements hidden.
{% endhint %}

## Publish an event to place an order

Depending on the checkout flow, you may need the order placement triggered by a button *outside* the connector’s native Place Order button. Refer to the [Publish the Order summary component events](#publish-the-order-summary-component-events) section below for details. 

{% hint style="info" %}
**Note:** You must still have at least one `drb2b_orderSummary` component on the page (with the “Place Order” designer attribute set to true), even if the UI elements are hidden. The component is required to fire the order placement logic.
{% endhint %}

### Publish the Order summary component events

Complete the following tasks to publish various event types. The event purpose and payload will vary depending on the use case.

Import `DigitalRiverMessageChannel__c message` channel and message service into a custom JavaScript file, as shown below.

{% code title="Import example" %}

```
import dr_lms from "@salesforce/messageChannel/digitalriverv3__DigitalRiverMessageChannel__c";

import {publish, MessageContext } from "lightning/messageService";

```

{% endcode %}

Declare the message context variable as shown below.

{% code title="Declare variable example" %}

```
@wire(MessageContext) messageContext;
```

{% endcode %}

Publish the event.

{% code title="Event publishing example" %}

```
publish(this.messageContext, dr_lms, { 
                    purpose: '<purpose>',           
                    payload: '<payload>'            
                });

```

{% endcode %}

Refer to the following table for more information on the Order summary component events.

| Event purpose         | Event payload example | Description                                                                                                                                                                                                                        |
| --------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| toggleShowOSComponent | {"isShow":true}       | Publish this event to show {"isShow":true} or hide {"isShow":false} the Order Summary component                                                                                                                                    |
| placeOrder            | n/a                   | <p>Publish this event to place the order.  The shopper will be redirected to the Thank You page</p><p> </p><p>See details in the <a href="#publish-an-event-to-place-an-order">Publish an event to place an order section</a>.</p> |

{% hint style="info" %}
You should make sure that the designer attribute for Bypass Validation on the drb2b\_orderSummary component is set to `{!$GlobalConstant.False}` or `{!$GlobalConstant.True}`or Checked/Unchecked in LWR. This is based on whether the connector validations should be performed or whether you will implement custom validations.
{% endhint %}