# DR Terms component

Use the `drb2b_drTermsElement` component to display the Digital River terms and conditions. The shopper must select the check box in this component to accept the Digital River terms and conditions. You can configure this component in the flow.

You can use the `drb2b_drTermsElement` component with the [Bypass Validation designer attribute](https://docs.digitalriver.com/salesforce-lightning/salesforce-lightning-b2b-commerce-app-1.5/extend-the-salesforce-lightning-app/customizing-the-lightning-web-components/designer-attributes). If the **Bypass Validation** value is **true**, the system bypasses validation for the `drb2b_drTermsElement` component.

{% hint style="info" %}
**Note:** If you choose to bypass the validation, you must add a custom validation using the event triggered by the `drb2b_drTermsElement` component to ensure the shopper agrees to the terms and conditions.
{% endhint %}

This component uses a visual force page where DigitalRiver.js and DR.CSS are loaded.

The Lightning Messaging service triggers an event every time a shopper selects or clears the check box next to the Digital River terms and conditions. The event data includes `isSelected` with a value of `true` or `false`. The `true` value indicates the shopper selected the check box and the `false` value indicates the shopper cleared the check box. The event data also contains the `termsString` variable which contains the text for the terms the shopper agrees to. The text includes any raw HTML tags returned by Digital River. This allows you to save the terms the shopper agreed to if needed.

You can subscribe to this event. This event is triggered when the shopper selects the check box to agree to the Digital River terms and conditions or a custom validation.

## Subscribing to an event

Import the `digitalriverv3__DRTermsMessageChannel__c` **message channel** and **message service** into a custom javascript file as shown in below.

{% code title="Import example" %}

```javascript
import { subscribe, MessageContext } from 'lightning/messageService';
import toggleCheckboxMS from '@salesforce/messageChannel/digitalriverv3__DRTermsMessageChannel__c';
```

{% endcode %}

Declare the `messageContext` variable as shown below.

{% code title="messageContext example" %}

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

{% endcode %}

Subscribe to an event as shown below.

{% code title="Subscribe example" %}

```json
 subscribeToMessageChannel() {
        if (!this.subscription) {
            this.subscription = subscribe(
                this.messageContext,
                toggleCheckboxMS,
                (message) => this.handleMessage(message),
            );
        }
    }
 
   
 
    handleMessage(message){
       // implement logic here
    }
```

{% endcode %}

The message contains the following parameters.

| Parameter     | Description                                                                                                                           |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `isSelected`  | The value is `true` or `false` depending on whether or not the shopper agreed to the terms and conditions by selecting the check box. |
| `termsString` | The value contains the HTML encoded text for the terms and conditions displayed to the shopper.                                       |

{% hint style="warning" %}
If you want to add the `drb2b_drTermsElement`component to the Place Order page, you can only use one `drb2b_orderSummary`component in the flow or template.
{% endhint %}

## Using the Hide Terms UI attribute to hide term

As mentioned, you use the `drb2b_drTermsElement` component to display order terms and conditions. The checkbox used in this component lets a shopper actively accept terms and conditions of the order. 

You use this component in your shopping flow as follows:

* `drb2b_drTermsElement` component is provided with a designer **Hide Terms UI** attribute by the name. By default, the value of this designer attribute is **False**. You can hide the terms by setting the value of the attribute to **True.** 
* When you do this, an event is published with the **Terms** string by using the `digitalriverv3__DRTermsMessageChannel__c` event. You [subscribe](#subscribing-to-an-event) to this event to use the terms the shopper agrees to or to implement a custom validation.

When the DR terms component UI is hidden, you are responsible for ensuring that the shopper agrees to the Digital River terms, as the component validation is disabled when the UI is hidden. Additionally, when the cart contains subscription products, you must make sure to fire an event after the shopper agrees to the terms. The shopper's acceptance of the terms then updates the DR checkout with those agreed-to terms.

### <mark style="background-color:yellow;">P</mark>ublishing an event to make an update checkout call

When subscription products are present in the cart if the Hide Terms UI designer attribute is set to true, you need to publish an event to ensure that the checkout is updated after the shopper agrees to the subscription terms. Refer to the Publishing DR Terms Component events section below for details on how to publish the event to update the checkout call with the terms string.

{% hint style="info" %}
**Note:** The stored `termString` containing the Digital River standard terms is used to make the update checkout API call. Client-specific terms are not supported.
{% endhint %}

### Publishing DR Terms 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 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 DR Terms component events.

<table><thead><tr><th width="256">Event purpose</th><th width="148">Event payload example</th><th>Description</th></tr></thead><tbody><tr><td>toggleShowTermsComponent</td><td>{"isShow":true}</td><td>Publish this event to show {"isShow":true} or hide {"isShow":false} the DR Terms component</td></tr><tr><td>updateCheckoutWithTermsString</td><td>n/a</td><td>Publish this event to update the checkout with the terms string.  This may be used for subscription use cases.  See Publishing an event to make an update checkout call section.</td></tr></tbody></table>

## Use an event to customize client validations

By default, you can use the `drb2b_drTermsElement` component to validate that a shopper has agreed to Digital River’s terms and conditions. Sometimes, however, you made need to perform custom validations. An example use case could be that you need to introduce additional client specific terms that shoppers must agree to or you need to provide navigation elements on the page such as a **Back** button.&#x20;

Be aware of the following when using the DR Terms component with custom validations:

* When you use the `db2b_drTermsElement` component, it fires an event that contains a Boolean value based on whether the shopper has checked the checkbox next to the Digital River terms. This event also contains an HTML encoded string of the terms the shopper should be presented with. This event will be triggered on load of terms component and when change in value of checkbox.
* You must [subscribe to the event](#subscribing-to-an-event), do the validation, and handle successes and errors.
* When using this feature, you are responsible for validating that the shopper has agreed to the Digital River Terms *in addition* to performing any other validation logic.
* To support custom validations, you need to set the **Bypass validation** designer attribute to **True** on the `drb2b_drTerms` component. If you are using the component on the Place Order page, the **Bypass Validation** designer attribute on any drb2b\_orderSummary components should be set to True as well.

{% hint style="info" %}
**Note:** If you call your custom client custom validation from the Place Order page, it is recommended that you hide the Place Order button(s) included in the Order Summary component and instead display a custom button. After performing the custom validation, you should fire an event to call the place order logic.
{% endhint %}

{% hint style="info" %}
**Note:** If you choose to bypass the validation, you must add a custom validation using the event triggered by the `drb2b_drTermsElement` component to ensure the shopper agrees to the terms and conditions.
{% endhint %}