# Payment details component

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

Use the `drb2b_paymentDetails` component to display payment details associated with an order. You can configure this component in the flow or experience builder. You can publish an event to show or hide the payment details component.

### Publish the Payment details 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 Payment details component events.

<table><thead><tr><th>Event Purpose</th><th width="351">Event Payload Example</th><th>Description</th></tr></thead><tbody><tr><td>toggleShowPDComponent</td><td>{"isShow":true} </td><td>Publish this event to show {"isShow":true} or hide {"isShow":false} the Place order component. </td></tr></tbody></table>