Install ParityDeals

How to install ParityDeals on your site

Overview

This guide helps you customize the pricing page of your site using the ParityDeals SDK. First, you need to install the SDK on your site. To install the SDK, simply paste the below script right before your closing </head> tag on your pricing page.

Installation 

<!-- Paste this right before your closing </head> tag -->
<script type="text/javascript">
function resolvePdSDKFunction(e,...t){return new Promise((n,i)=>{!function r(){window.ParityDealsSDK&&"function"==typeof window.ParityDealsSDK[e]?window.ParityDealsSDK[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","ParityDealsSDK","https://cdn.paritydeals.com/paritydeals-sdk/0.0.3/paritydeals-sdk.min.js"),window.ParityDeals={init:function(e){ParityDealsSDK("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)}};

// Initialize ParityDeals SDK
ParityDeals.init({
  convertToLocal: true, // Convert prices to local currency
  // Pass options as needed
});
</script>

Now, you need to add the a few ParityDeals data attributes to your pricing page. ParityDeals will automatically read these attributes and use them to display the pricing based on the user’s location. See the example below.

Demo

Lets assume that your default pricing is $99 and pricing is for India is $60. People from India will see the price as ₹5,023.

Select country

Add attributes

Customized code

<div class="pricing-plan">
  <div class="price-container" data-pd-original-price="99">
    <span data-pd-price-formatted></span>
  </div>
</div>
<div class="pricing-plan">
  <div class="price-container" data-pd-original-price="99">
    <span data-pd-currency-symbol></span>
    <span data-pd-price-integer></span>
    <span data-pd-price-decimal-point></span>
    <span data-pd-price-decimal></span>
  </div>
</div>
<div class="pricing-plan">
  <div class="price-container" data-pd-original-price="99" data-pd-rel="standard">
    <span data-pd-price-formatted></span>
  </div>
  <div class="price-container" data-pd-original-price-display="99" data-pd-rel="standard">
    <span data-pd-price-formatted></span>
  </div>
</div>

Preview

₹5,023
$60
R$383

Key Price Attributes

data-pd-original-price
  • Purpose: Used to set the base price for an item before any discounts are applied.
  • Behavior: This price may be modified by the SDK based on discounts or currency conversions.
  • Usage: Place this on the main price display element for each item.
data-pd-original-price-display
  • Purpose: Used to show the original price when there’s a discount, typically for comparison (e.g., strikethrough price).
  • Behavior: This price is not modified by discounts but may still be affected by currency conversions.
  • Usage: Place this on elements meant to show the pre-discount price alongside the discounted price.
Example: 
<div class="price-container">
    <span class="current-price" data-pd-original-price="100">$100</span>
    <span class="original-price" data-pd-original-price-display="120"><s>$120</s></span>
</div>

In this example, if a 10% discount is applied: The element with data-pd-original-price=“100” might update to show “$90”. The element with data-pd-original-price-display=“120” would remain “$120” but might be converted to local currency if that option is enabled.

data-pd-rel Attribute

  • Purpose: To associate multiple price elements that should be updated together.
  • Usage: Add the same data-pd-rel value to all related price elements.
  • Behavior: When the SDK updates prices, it will find and update all elements with matching data-pd-rel values.

Example: 

<div class="pricing-plans">
    <div class="pricing-plan-item">
        <h3>Basic Plan</h3>
        <div class="price-container" data-pd-original-price="99" data-pd-rel="basic">
            <span data-pd-price-formatted></span>
        </div>
        <div class="original-price" data-pd-original-price-display="99" data-pd-rel="basic">
            <span data-pd-price-formatted></span>
        </div>
    </div>
    <div class="pricing-plan-item">
        <h3>Standard Plan</h3>
        <div class="price-container" data-pd-original-price="199" data-pd-rel="standard">
            <span data-pd-price-formatted></span>
        </div>
        <div class="original-price" data-pd-original-price-display="199" data-pd-rel="standard">
            <span data-pd-price-formatted></span>
        </div>
    </div>
</div>

In the above example, basic plan is linked with data-pd-rel=“basic” and standard plan is linked with data-pd-rel=“standard”. When the SDK updates the price for this product, it will automatically update all elements with matching data-pd-rel values.

Data Attributes

To customize your pricing page, use the following data attributes on your HTML elements:

Data AttributeDescription
data-pd-original-priceSet on elements displaying the original price
data-pd-original-price-displaySet on elements displaying the original price when it’s different from the current price (e.g., for strikethrough prices)
data-pd-relUsed to group related price elements
data-pd-price-formattedUsed on elements where you want to display the fully formatted price
data-pd-currency-symbolUsed on elements where you want to display just the currency symbol
data-pd-price-integerUsed on elements where you want to display just the integer part of the price
data-pd-price-decimalUsed on elements where you want to display just the decimal part of the price
data-pd-price-decimal-pointUsed on elements where you want to display just the decimal separator
data-pd-currency-codeUsed on elements where you want to display the currency code
data-pd-show-decimalWhether to show decimal places
data-pd-round-toHow to round prices (‘up’, ‘down’, or ‘none’)
data-pd-decimal-placesThe number of decimal places to show
data-pd-convert-to-local-priceWhether to convert prices to local currency
data-pd-thousands-separatorThe character to use as thousands separator
data-pd-decimal-separatorThe character to use as decimal separator

Configuration Options 

ParityDeals.init({
    convertToLocal: true,
    thousandsSeparator: ',',
    decimalSeparator: '.',
    decimalPlaces: 2,
    roundTo: 'none',
    showDecimal: true,
    bar: {
        unStyled: false,
        showCloseButton: true,
        placement: 'top',
        container: null,
        backgroundColor: '#f0f0f0',
        fontColor: '#333333',
        borderRadius: '0px',
        fontSize: '14px'
    }
});
OptionTypeDefaultDescription
thousandsSeparatorstring‘,’The character to use as thousands separator
decimalSeparatorstring‘.’The character to use as decimal separator
decimalPlacesnumber2The number of decimal places to show
roundTostring‘none’How to round prices (‘up’, ‘down’, or ‘none’)
showDecimalbooleantrueWhether to show decimal places
convertToLocalbooleanfalseWhether to convert prices to local currency
barobject{}Configuration for the promotional bar
bar.unStyledbooleanfalseWhether to use unstyled banner
bar.showCloseButtonbooleantrueWhether to show a close button on the banner
bar.placementstring‘top’Where to place the banner (‘top’ or ‘bottom’)
bar.containerstringnullCSS selector for a custom container element
bar.backgroundColorstring‘#f0f0f0’Background color of the banner
bar.fontColorstring‘#333333’Font color of the banner text
bar.borderRadiusstring‘0px’Border radius of the banner
bar.fontSizestring‘14px’Font size of the banner text

Public function

getUpdatedPrice

Gets the updated price for a given original price.

ParityDeals.getUpdatedPrice(10, {
    convertToLocal: true,
    // Other options
}).then(function(result) {
    console.log('Updated price:', result);
}).catch(function(error) {
    console.error('Error getting updated price:', error);
});

updatePriceElement

Updates the price element with the updated price.

ParityDeals.updatePriceElement(document.querySelector('#basic-price'), {
    convertToLocal: true,
    // Other options
}).then(function(result) {
    console.log('Price element updated:', result);
}).catch(function(error) {
    console.error('Error updating price element:', error);
});

updatePrice

Updates multiple price elements on the page with custom templates.

ParityDeals.updatePrice([
    {
        element: document.querySelector('#price-1'),
        price: 10,
        options: {
            convertToLocal: true,
            // Other options
        },
        template: '<div class="price">{{formattedPrice}}</div>'
    },
    {
        element: document.querySelector('#price-2'),
        price: 20,
        options: {
            // Other options
            isOriginalDisplay: true
        },
        template: '<div class="price"><span>{{currencySymbol}}</span>{{integerPart}}{{decimalSeparator}}{{decimalPart}}</div>'
    }
]).then(function(results) {
    console.log('Prices updated:', results);
}).catch(function(error) {
    console.error('Error updating prices:', error);
});
← Customize discount banners
LemonSqueezy buy now button →