# DigitalRiverCheckout configuration object

The [initialize DigitalRiverCheckout.js function](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/initializing-digitalrivercheckout.js.md) accepts an optional configuration object, which allows you to [define a local pricing selector](#defining-a-local-pricing-selector).

## Defining a local pricing selector

If you [pair the local pricing service with a low-code checkout](/digital-river-api/integration-options/low-code-checkouts/offering-local-pricing.md), you'll need to define [`countrySelector`](#countryselector).

<pre class="language-javascript" data-full-width="false"><code class="lang-javascript"><strong>const config = {
</strong>  countrySelector: {
    containerId: 'country-selector',
    priceElement: ['div.price', 'span.price'],
    onReady: () => {},
    onOpen: () => {},
    onSelect: (data) => {},
    onSave: (data) => {},
    onCancel: () => {}
  }
};  
...
const digitalRiverCheckout = new DigitalRiverCheckout('YOUR_PUBLIC_API_KEY', config);
</code></pre>

### `countrySelector`

The `countrySelector` object allows you to:

* [Specify a container for the local pricing selector.](#containerid)
* [Inform Digital River which of your product prices to convert.](#priceelement)
* [Listen for and handle selector callback events.](#local-pricing-selector-events)

#### `containerId`

The required `containerId` represents the `id` of an [HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) in which [DigitalRiverCheckout.js](/digital-river-api/developer-resources/digitalrivercheckout.js-reference.md) should render the [local pricing selector](/digital-river-api/using-our-services/local-pricing.md#local-pricing-selector).

```javascript
const config = {
  countrySelector: {
    containerId: 'country-selector',
    ...
  }
};  
```

#### `priceElement`

The optional `priceElement` represents an array of [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) strings that [DigitalRiverCheckout.js](/digital-river-api/developer-resources/digitalrivercheckout.js-reference.md) uses to target each element on your page that displays pricing information.

For example, `span.price` in the following `priceElement` targets all `<span>` elements that have a `class` attribute of `"price"`.

```javascript
const config = {
  countrySelector: {
    ...
    priceElement: ['div.price', 'span.price'],
    ...
  }
};  
```

When users modify currency or country in the [selector](/digital-river-api/using-our-services/local-pricing.md#local-pricing-selector), we make a call to determine whether Digital River supports that country, and it's set up for [variable pricing](/digital-river-api/using-our-services/local-pricing.md#fixed-prices). If this is the case, for each `priceElement`, we apply a conversion factor and a [rounding function](/digital-river-api/using-our-services/local-pricing.md#rounding-logic), implement currency formatting rules, and display a converted, formatted value in its `innerHTML` and add selected currency, selected country, converted price, formatted price, and original price attributes.

```html

<span class="price" data-dr-original-price="299" data-dr-currency="INR" data-dr-country="IN" data-dr-converted-price="25000.00" data-dr-formatted-price="₹25,000.00">₹25,000.00</span>
```

### Local pricing selector events

In [`countrySelector`](#countryselector), you can assign callback methods to [`onReady`](#onready), [`onOpen`](#onopen), [`onSelect`](#onselect), [`onSave`](#onsave), and [`onCancel`](#oncancel), which allows you to listen for various [local pricing selector](/digital-river-api/using-our-services/local-pricing.md#local-pricing-selector) events and then define how you want to handle them.

```javascript
const config = {
  countrySelector: {
    ...
    onReady: () => {},
    onOpen: () => {},
    onSelect: (data) => {},
    onSave: (data) => {},
    onCancel: () => {}
  }
};  
```

#### `onReady`

The optional `onReady` property can be assigned a callback method that executes when the [local pricing selector](/digital-river-api/using-our-services/local-pricing.md#local-pricing-selector) is ready to accept user input.

{% hint style="info" %}
When it executes, [`digitalRiverPricing`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/accessing-country-and-currency.md#digitalriverpricing) has been defined. For details, refer to [Accessing country and currency](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/accessing-country-and-currency.md).
{% endhint %}

```javascript
const config = {
  countrySelector: {
    ...
    onReady: () => {
      console.log('The country-currency selector is ready to accept input');
    },
    ...
  }
};
```

#### `onOpen`

The optional `onOpen` property can be assigned a callback method that executes when the user clicks on the country-currency icon and the [local pricing selector](/digital-river-api/using-our-services/local-pricing.md#local-pricing-selector) opens.

```javascript
const config = {
  countrySelector: {
    ...
    onOpen: () => {
      console.log('The user opened the country-currency selector');
    },
    ...
  }
};
```

#### `onSelect`

The optional `onSelect` property can be assigned a callback method, which accepts `data`, that executes when the user makes a selection in the [local pricing selector](/digital-river-api/using-our-services/local-pricing.md#local-pricing-selector). In `data`, the method returns either `country` or `currency`, depending on which the user selected.

```javascript
const config = {
  countrySelector: {
    ...
    onSelect: (data) => {
      if (data.hasOwnProperty('country')) {
        console.log('The user selected the country of ' + data.country)
      } else {
        console.log('The user selected a currency of ' + data.currency);
      }
    },
    ...
  }
};
```

#### `onSave`

The optional `onSave` property can be assigned a callback method, which accepts `data`, that executes when the user clicks the [local pricing selector's](/digital-river-api/using-our-services/local-pricing.md#local-pricing-selector) save button. In `data`, the method returns the `country` and `currency` that the user saved.

```javascript
const config = {
  countrySelector: {
    ...
    onSave: (data) => {
      console.log('The user clicked the save button. The saved country and currency is ' + data.country + ' and ' + data.currency + ", respectively");
    },
    ...
  }
};
```

#### `onCancel`

The optional `onCancel` property can be assigned a callback method that executes when the user clicks the [local pricing selector's](/digital-river-api/using-our-services/local-pricing.md#local-pricing-selector) cancel button.

```javascript
const config = {
  countrySelector: {
    ...
    onCancel: () => {
      console.log('The user clicked the cancel button');
    }
  }
};
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/initializing-digitalrivercheckout.js/digitalrivercheckout-configuration-object.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.