Documentation for integrating the ParityDeals JavaScript SDK to display dynamic and localized pricing on your website.
</head>
tag on your pricing page:
data-pd-price
attribute to a wrapper element, and place a child element with data-pd-price-formatted
where you want the price to appear. The SDK will automatically update this with the correct price for each visitor.
Example:
data-pd-price
:
Data Attribute | Description |
---|---|
data-pd-price-formatted | The full formatted price (e.g., “$99.50”) |
data-pd-currency-symbol | Only the currency symbol (e.g., ”$“) |
data-pd-currency-code | 3-letter currency code (e.g., “USD”) |
data-pd-price-integer | Integer part of the price (e.g., “99”) |
data-pd-price-decimal | Decimal part (e.g., “50”) |
data-pd-price-decimal-separator | The decimal separator (e.g., ”.”) |
Option | Type | Default | Description |
---|---|---|---|
productId | string | ” | The product ID to display |
environment | sandbox|production | ’production’ | The environment to use. If you want to use the sandbox, you must provide this. |
showBanner | boolean | true | Whether to show the discount banner |
localizePricing | boolean | true | Convert to local currency |
baseCurrencyCode | string | USD | If you use any base currency other than USD, you must provide this. Currency conversion will be done using this code. |
baseCurrencySymbol | string | $ | If you use any base currency other than USD, you must provide this. Only for the displaying purpose, but still important. |
currencyDisplay | symbol|code|name | symbol | The currency display format. This only works on the data-pd-price-formatted element. |
showDecimal | boolean | false | Whether to show decimals |
minimumDecimalDigits | number | 0 | The minimum number of decimal digits |
maximumDecimalDigits | number | 2 | The maximum number of decimal digits. Maximum is 2. |
banner.* | object | — | Customization for the discount banner |
banner.noStyles | boolean | false | if true, no styling will be applied to the banner |
banner.showCloseButton | boolean | true | Control close button visibility. This setting will work only if close button is enabled from the ParityDeals banner settings |
banner.placement | top|bottom | ’top’ | The placement of the discount banner |
banner.container | string | null | The container for the discount banner |
banner.backgroundColor | string | ’#f0f0f0’ | The background color of the discount banner |
banner.fontColor | string | ’#333333’ | The font color of the discount banner |
banner.borderRadius | string | ’0px’ | The border radius of the discount banner |
banner.fontSize | string | ’14px’ | The font size of the discount banner |
data-props
attribute to the element.
Example:
In the below example, we override the showDecimal
property to false.
data-pd-show-decimal
- Whether to show decimalsdata-pd-localize-pricing
- Whether to localize the pricingdata-pd-minimum-decimal-digits
- The minimum number of decimal digitsdata-pd-maximum-decimal-digits
- The maximum number of decimal digitsdata-pd-currency-display
- The currency display formatdata-pd-original-price-display
: Shows a “compare at” or strikethrough price (never discounted, but can be localized).data-pd-rel
: Groups related price elements so they update together (e.g., main price and strikethrough).data-pd-rel
value to all elements that should update together.
Promise
.
init
function. You need to pass the options for each function call.getUpdatedPrice
updatePriceElement
updatePrice
environment
option to sandbox
in the init
function.