DigitalRiverCheckout configuration object
Learn about the functionality that exists within the DigitalRiverCheckout configuration object
The initialize DigitalRiverCheckout.js function accepts an optional configuration object, which allows you to define a local pricing selector.
Defining a local pricing selector
If you pair the local pricing service with a low-code checkout, you'll need to define countrySelector
.
const config = {
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);
countrySelector
countrySelector
The countrySelector
object allows you to:
containerId
containerId
The required containerId
represents the id
of an HTML element in which DigitalRiverCheckout.js should render the local pricing selector.
const config = {
countrySelector: {
containerId: 'country-selector',
...
}
};
priceElement
priceElement
The optional priceElement
represents an array of CSS selector strings that DigitalRiverCheckout.js 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"
.
const config = {
countrySelector: {
...
priceElement: ['div.price', 'span.price'],
...
}
};
When users modify currency or country in the selector, we make a call to determine whether Digital River supports that country, and it's set up for variable pricing. If this is the case, for each priceElement
, we apply a conversion factor and a rounding function, 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.
<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
, you can assign callback methods to onReady
, onOpen
, onSelect
, onSave
, and onCancel
, which allows you to listen for various local pricing selector events and then define how you want to handle them.
const config = {
countrySelector: {
...
onReady: () => {},
onOpen: () => {},
onSelect: (data) => {},
onSave: (data) => {},
onCancel: () => {}
}
};
onReady
onReady
The optional onReady
property can be assigned a callback method that executes when the local pricing selector is ready to accept user input.
const config = {
countrySelector: {
...
onReady: () => {
console.log('The country-currency selector is ready to accept input');
},
...
}
};
onOpen
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 opens.
const config = {
countrySelector: {
...
onOpen: () => {
console.log('The user opened the country-currency selector');
},
...
}
};
onSelect
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. In data
, the method returns either country
or currency
, depending on which the user selected.
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
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 save button. In data
, the method returns the country
and currency
that the user saved.
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
onCancel
The optional onCancel
property can be assigned a callback method that executes when the user clicks the local pricing selector's cancel button.
const config = {
countrySelector: {
...
onCancel: () => {
console.log('The user clicked the cancel button');
}
}
};
Last updated