DynamicPricing.js reference

Reference documentation for the DynamicPricing.js library

This page documents the scripts, element attributes, and functions in Digital River's browser-side DynamicPricing.js library.

Local pricing script

On each html page that contains price elements, you must have a script with an id of DR-Dynamic-Pricing.

Except for the script's attributes, the following code must remain unaltered:

<script id="DR-Dynamic-Pricing">
        (function () {
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.setAttribute('data-dr-apiKey', 'YOUR_PUBLIC_API_KEY')
            // optional - defaults to 'DR-currencySelector'
            s.setAttribute('data-dr-currency-selector', 'currency-selector');
            // optional - defaults to browser language
            s.setAttribute('data-dr-default-country', 'FR');
            s.src = 'https://js.digitalriver.com/v1/DynamicPricing.js';
            document.getElementsByTagName('head')[0].appendChild(s);
        })();
    </script>

Script attributes

In the local pricing script, the following attributes are configurable:

• data-dr-apiKey

• data-dr-currency-selector

• data-dr-default-country

data-dr-apiKey

You must set data-dr-apiKey and the value you pass must be your public API key.

data-dr-currency-selector

You can optionally set data-dr-currency-selector. If you do, a DOM element whose id is the same value as data-dr-currency-selector needs to be on the page.

The default value is DR-currencySelector.

For more details, refer to Specify a local pricing selector element.

data-dr-default-country

You can use the optional data-dr-default-country attribute to help determine which country is selected by default when a page loads. By extension, this also determines the selected currency.

The value you pass must be a two-letter Alpha-2 country code as described in the ISO 3166 international standard.

When the page loads and the local pricing script executes, it first looks for the user's country in cookies, next in data-dr-default-country, and then in the browser's default language settings. If those searches aren't successful, your account's base country is used.

Once a value is located, DynamicPricing.js calls to determine that country's default currency. The local pricing selector's drop-down menus display these country and currency values. Additionally, your price elements are denoted in this currency.

Local pricing selector

The local pricing selector allows customers to select a country-currency combination while shopping on your site.

To configure it, you must (1) designate a DOM element and (2) apply a stylesheet.

Specify a local pricing selector element

You need to include a DOM element that renders the local pricing selector. The element can be added to the header, footer, body, and HTML tags.

The element's id must be (1) DR-currencySelector or (2) the value you assign data-dr-currency-selector.

Default

If you don't set data-dr-currency-selector, then id of the selector element must be DR-currencySelector

<div id="DR-currencySelector">

Custom

If you set data-dr-currency-selector, then id of the selector element must have the same value.

...
s.setAttribute('data-dr-currency-selector', 'currency-selector');
...
<div id="currency-selector">

Style the local pricing selector

To style the local pricing selector, add the following link.

<link href="https://js-test.digitalriver.com/v1/css/DynamicPricing.css" rel="stylesheet"/>

Alternatively, you can override this stylesheet with your own.

Price elements

Each DOM element on your site that displays pricing information must have a data-dr-original-price attribute. These represent your base prices. Ensure the values you pass don't contain a currency symbol or whitespace.

<div data-dr-original-price="199.99"></div> 

When populating your data-dr-original-price attributes, retrieve data from a price list associated with your account's base country and currency.

To retrieve your base country and currency, pass your public API key in the header of a GET /dynamic-pricing/country-currency request.

Also, depending on your account's tax configurations, make sure that your data-dr-original-price values are either tax-inclusive or tax-exclusive. For details, contact your Digital River representative.

When the local pricing script executes or customers modify currency and/or country in the selector, DynamicPricing.js makes a call to get country-currency specific data, and then checks whether the country is both supported by Digital River and set up to allow variable pricing. If these conditions are met, DynamicPricing.js applies a conversion factor and a rounding function to each data-dr-original-price on the page, implements currency formatting rules, and then displays the converted, formatted value in the DOM element's innerHTML and adds data-dr-converted-price and data-dr-formatted-price to the element's attributes.

<div class="price" data-dr-original-price="199" data-dr-currency="EUR" data-dr-country="FR" data-dr-converted-price="230.00" data-dr-formatted-price="230,00 €">230,00 €</div>

Getting country and currency

The local pricing script creates the digitalRiverPricing object which exposes getCountry() and getCurrency().

digitalRiverPricing.getCountry()

Call digitalRiverPricing.getCountry() to get the country that is selected in the local pricing selector.

digitalRiverPricing.getCountry();

The returned value is formatted as an Alpha-2 country code.

digitalRiverPricing.getCurrency()

Call digitalRiverPricing.getCurrency() to get the currency that is selected in the local pricing selector.

digitalRiverPricing.getCountry()

The returned value is formatted as a three-letter alphabetic code that conforms to the ISO 4217 standard.