# Checkout summary component

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

Use the `drb2b_checkouSummary` component to display the detailed amounts on the cart to the shopper. You can configure this component in the experience builder or flow.

You can publish an event to reload the checkout summary component. Depending on your flow, reloading the component using an event may be required.

### Publish the Checkout 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 Checkout summary component events.

<table><thead><tr><th width="242">Event purpose</th><th width="210">Event payload example</th><th>Description</th></tr></thead><tbody><tr><td>reloadCheckoutSummary</td><td>{"isShow":true} </td><td>Publish this event to show {"isShow":true} or hide {"isShow":false} the Checkout summary component. </td></tr></tbody></table>

## Replace the Checkout Summary component

Consider the following suggestions if you want to replace your `drb2b_checkoutSummary` component rather than customizing the provided component.

Use the Checkout Summary component to query data from the `WebCart` object. The fields in the component use and display information such as taxes, fees, total, etc. The following table describes the fields used by the provided component.&#x20;

<table><thead><tr><th width="263">WebCart field</th><th width="132">UI Label</th><th>Designer attributes</th></tr></thead><tbody><tr><td><p><code>DR_Total_IOR_Tax__c</code></p><p> </p></td><td>IOR tax</td><td><p>Show IOR tax</p><p> </p></td></tr><tr><td><p><code>GrandTotalAmount - DR_Total_Fees__c</code></p><p><code>- DR_Total_IOR_Tax__c</code></p><p><code>-DR_Total_Duty__c</code></p><p> </p></td><td><p>Subtotal</p><p> </p></td><td>N/A</td></tr><tr><td><p><code>TotalTaxAmount</code></p><p> </p></td><td><p>Tax</p><p> </p></td><td><p>Show Tax</p><p> </p></td></tr><tr><td><p><code>GrandTotalAmount</code></p><p> </p></td><td><p>Grand Total</p><p> </p></td><td>N/A</td></tr><tr><td><p><code>TotalChargeAmount</code></p><p> </p></td><td><p>Shipping</p><p> </p></td><td><p>Show Shipping</p><p> </p></td></tr><tr><td><p><code>DR_Total_Fees__c</code></p><p> </p></td><td><p>Fee</p><p> </p></td><td><p>Show Regulatory Fee</p><p> </p></td></tr><tr><td><p><code>DR_Total_Duty__c</code></p><p> </p></td><td><p>Duty</p><p> </p></td><td><p>Show Duty</p><p> </p></td></tr></tbody></table>

Your component needs to listen for updates in tax calculation. In LWR, implement both the [CheckoutInformationAdapter](https://developer.salesforce.com/docs/atlas.en-us.b2b_b2c_comm_dev.meta/b2b_b2c_comm_dev/b2b_b2c_comm_display_lwc_apis.htm) and subscribe to the refreshCalculateTax event. See [tax calculation](https://docs.digitalriver.com/salesforce-lightning/v/salesforce-lightning-b2b-commerce-app-2.0/extend-the-salesforce-lightning-app/tax-calculation) for more information. The firing of this event can be used to indicate that the tax has been recalculated. On receiving this event, use the component to refresh its display with the latest data from the WebCart object.&#x20;

If you use regulatory fees in your application, you can make an additional query to the [`DR_regulatory_fee__c`](https://docs.digitalriver.com/salesforce-lightning/salesforce-lightning-b2b-commerce-app-2.0/appendix/custom-fields-and-objects) object to get individual fee information and display it in your UI.&#x20;

You can query the following fields available from the `DR_Regulatory_Fee__c` object:

* `Fee_Type__c`
* `Name`
* `Amount__c`
* `Cart_Item_Id__c`