Skip to main content

​
Quick Start

Get dynamic, localized pricing on your site in just two steps:

​
1. Add the Script

Paste this snippet just before the closing </head> tag on your pricing page: 
<script type="text/javascript">
function resolvePdSDKFunction(e,...t){return new Promise((n,i)=>{!function r(){window.PDPromotionUISDK&&"function"==typeof window.PDPromotionUISDK[e]?window.PDPromotionUISDK[e](...t).then(n).catch(i):setTimeout(r,100)}()})}!function(e,t,n,i,r,a,c){e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(Array.prototype.slice.call(arguments))},a=t.createElement(n),c=t.getElementsByTagName(n)[0],a.id="parity-deals-sdk",a.async=1,a.src=r,c.parentNode.insertBefore(a,c)}(window,document,"script","PDPromotionUISDK","https://cdn.paritydeals.com/js-promotions-ui/1.0.0/js-promotions-ui.umd.js"),window.PDPromotionUI={init:function(e){PDPromotionUISDK("init",e)},getUpdatedPrice:function(e,t){return resolvePdSDKFunction("getUpdatedPrice",e,t)},updatePriceElement:function(e,t){return resolvePdSDKFunction("updatePriceElement",e,t)},updatePrice:function(e){return resolvePdSDKFunction("updatePrice",e)}};
</script>

​
2. Initialize the SDK

Copy your product ID from the listing or promotion details page: 
PDPromotionUI.init({
  productId: 'promo_7e2de26fb47644e58e867a20i898j748', // Replace with your product ID of the promotion
  showBanner: true,
});
This will automatically display a discount banner if the user is eligible for a discount.
A paid plan is required to use the SDK features below, except the banner.

​
Displaying Dynamic Prices (Basic)

The easiest way to show dynamic prices is to add the 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: 
<div class="pricing-plan" data-pd-price="99">
  <h3>Basic Plan</h3>
  <h3 data-pd-price-formatted>$99</h3>
</div>
That’s it! The SDK will find and update these prices automatically.

​
Customizing Price Display (Basic)

If you want to style different parts of the price (like the currency symbol or decimals), you can break the price into parts using these attributes inside a container with data-pd-price:
Data AttributeDescription
data-pd-price-formattedThe full formatted price (e.g., “$99.50”)
data-pd-currency-symbolOnly the currency symbol (e.g., ”$“)
data-pd-currency-code3-letter currency code (e.g., “USD”)
data-pd-price-integerInteger part of the price (e.g., “99”)
data-pd-price-decimalDecimal part (e.g., “50”)
data-pd-price-decimal-separatorThe decimal separator (e.g., ”.”)
Example: 
<div class="price-container" data-pd-price="99">
  <span class="currency" data-pd-currency-symbol></span>
  <span class="integer" data-pd-price-integer></span>
  <span class="integer" data-pd-price-decimal-separator></span>
  <span class="decimal" data-pd-price-decimal></span>
</div>

​
SDK Configuration Options

OptionTypeDefaultDescription
productIdstring”The product ID to display
environmentsandbox|production’production’The environment to use. If you want to use the sandbox, you must provide this.
showBannerbooleantrueWhether to show the discount banner
localizePricingbooleantrueConvert to local currency
baseCurrencyCodestringUSDIf you use any base currency other than USD, you must provide this. Currency conversion will be done using this code.
baseCurrencySymbolstring$If you use any base currency other than USD, you must provide this. Only for the displaying purpose, but still important.
currencyDisplaysymbol|code|namesymbolThe currency display format. This only works on the data-pd-price-formatted element.
showDecimalbooleanfalseWhether to show decimals
minimumDecimalDigitsnumber0The minimum number of decimal digits
maximumDecimalDigitsnumber2The maximum number of decimal digits. Maximum is 2.
banner.*object—Customization for the discount banner
banner.noStylesbooleanfalseif true, no styling will be applied to the banner
banner.showCloseButtonbooleantrueControl close button visibility. This setting will work only if close button is enabled from the ParityDeals banner settings
banner.placementtop|bottom’top’The placement of the discount banner
banner.containerstringnullThe container for the discount banner
banner.backgroundColorstring’#f0f0f0’The background color of the discount banner
banner.fontColorstring’#333333’The font color of the discount banner
banner.borderRadiusstring’0px’The border radius of the discount banner
banner.fontSizestring’14px’The font size of the discount banner

​
data-props override

You can override the default properties of the price elements by adding a data-props attribute to the element. Example: In the below example, we override the showDecimal property to false. 
<div data-pd-price="99" data-pd-show-decimal="false">
  <span class="currency" data-pd-currency-symbol></span>
  <span class="integer" data-pd-price-integer></span>
</div>

​
Supported attributes

  • data-pd-show-decimal - Whether to show decimals
  • data-pd-localize-pricing - Whether to localize the pricing
  • data-pd-minimum-decimal-digits - The minimum number of decimal digits
  • data-pd-maximum-decimal-digits - The maximum number of decimal digits
  • data-pd-currency-display - The currency display format

​
Advanced Usage

​
Grouping and Strikethrough Prices

For more complex pricing layouts, you can use these advanced attributes:
  • data-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).
Example: 
<div class="pricing-card">
  <h3>Pro Plan</h3>

  <div class="price-container" data-pd-price="99" data-pd-rel="pro-plan">
    <span class="currency" data-pd-currency-symbol></span>
    <span class="integer" data-pd-price-integer></span>
    <span class="decimal" data-pd-price-decimal></span>
  </div>

  <div class="original-price" data-pd-original-price-display="120" data-pd-rel="pro-plan">
    <s>
      <span data-pd-currency-symbol></span>
      <span data-pd-price-integer></span>
    </s>
  </div>
</div>
You can assign the same data-pd-rel value to all elements that should update together.

​
API Reference (Advanced)

All SDK functions are asynchronous and return a Promise.
None of the below finctions inherit the configuration options set in the init function. You need to pass the options for each function call.

​
getUpdatedPrice

Calculate and return the updated price for a given base price (does not update the DOM): 
const price = 99.99;
const options = { localizePricing: true };

PDPromotionUI.getUpdatedPrice(price, options)
  .then(result => {
    console.log('Updated price object:', result);
  });

​
updatePriceElement

Update a specific DOM element’s price: 
const priceElement = document.querySelector('#basic-price');
const options = { showDecimal: false };

PDPromotionUI.updatePriceElement(priceElement, options)
  .then(result => {
    console.log('Price element updated successfully.');
  });

​
updatePrice

Bulk update multiple price elements with custom templates: 
const priceUpdates = [
  {
    element: document.querySelector('#price-1'),
    price: 10,
    options: { localizePricing: true },
    template: '<div class="price">{{formattedPrice}}</div>'
  },
  {
    element: document.querySelector('#price-2'),
    price: 20,
    options: { isOriginalDisplay: true },
    template: '<span>{{currencySymbol}}</span>{{integerPart}}'
  }
];

PDPromotionUI.updatePrice(priceUpdates)
  .then(results => {
    console.log('All prices updated:', results);
  });

​
Using the Sandbox

If you want to use the sandbox, you need to set the environment option to sandbox in the init function. 
PDPromotionUI.init({
  productId: 'promo_7e2de26fb47644e58e867a20i898j748',
  environment: 'sandbox',
});

​
Support

Need help or have questions? Reach out to us anytime at hi@paritydeals.com.