Skip to main content

​
Installation

Install the package using npm: 
npm install @paritydeals/react-promotions-ui

​
Getting Started

To start using the SDK, wrap your app with the ParityDealsProvider at the root level. This sets up the necessary context. You can copy your product ID from the listing or promotion details page: 
import { ParityDealsProvider } from '@paritydeals/react-promotions-ui';

function App() {
  return (
    // Replace with your product ID of the promotion
    <ParityDealsProvider productId="promo_7e2de26fb47644e58e867a20i898j748">
      {/* Your app components */}
    </ParityDealsProvider>
  );
}

​
Attributes:

You can use the following attributes to customize the behavior of the components.
AttributeTypeDefaultDescription
productIdstring”The product ID to display
environmentsandbox|production’production’The environment to use. If you want to use the sandbox, you must provide this.
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.

​
Components

Use these ready-made UI components to easily show location-aware pricing and promotional content.
A paid plan is required to use the SDK features below, except the banner.

​
PDBanner

Displays a location-aware discount banner. You can style and position it as needed. 
import { PDBanner } from '@paritydeals/react-promotions-ui';

<PDBanner
  backgroundColor="#f0f0f0"
  fontColor="#333"
  borderRadius="4px"
  fontSize="16px"
  noStyles={false}
  addCloseIcon={true}
  className="custom-banner"
  onClose={() => console.log('Banner closed')}
/>

​
PDPriceFormatted

Simplified component to display discounted and original prices dynamically based on the user’s location.

​
Display Discounted Price

Use this to show the localized or discounted price. The price is automatically formatted based on the user’s location, including currency symbols, decimal separators, and digit grouping — for example, ₹9,999.99 for India, ¥10,000 for Japan, and 9.999,99 € for Italy where the currency symbol appears on the right. 
<PDPriceFormatted
  price={99.99}
/>
Configuration Options
OptionTypeDefaultDescription
localizePricingbooleantrueConvert to local currency
price (required)number0The price of the product.
classNamestring”custom class name for the component
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.
isOriginalDisplaybooleanfalseUsed to show the original price when there’s a discount, typically for comparison (e.g., strikethrough price). This price is not modified by discounts but may still be affected by currency conversions.
displayPricenumber0The price to display. If not provided, the original price will be displayed.

​
Display Original Price (Strikethrough)

Optionally show the original price with a strikethrough effect: 
<PDPriceFormatted
  price={99.99}
  displayPrice={99.99}
  isOriginalDisplay={true}
/>

​
Example Usage

Combine both for a side-by-side comparison: 
<div className="price-container">
  <PDPriceFormatted price={89.99} />
  <PDPriceFormatted
    price={99.99}
    displayPrice={99.99}
    isOriginalDisplay={true}
  />
</div>

​
Granular Price Components

Use these components individually to build custom price formats with full styling control.

​
PDPriceInteger

Displays just the integer part of the price. 
<PDPriceInteger price={99.99} />
Configuration Options
OptionTypeDefaultDescription
localizePricingbooleantrueConvert to local currency
price (required)number0The price of the product.
classNamestring”custom class name for the component

​
PDPriceDecimal

Displays just the decimal portion. 
<PDPriceDecimal price={99.99} />
Configuration Options
OptionTypeDefaultDescription
localizePricingbooleantrueConvert to local currency
price (required)number0The price of the product.
classNamestring”custom class name for the component
minimumDecimalDigitsnumber0The minimum number of decimal digits
maximumDecimalDigitsnumber2The maximum number of decimal digits. Maximum is 2.

​
PDPriceCurrencySymbol

Renders the currency symbol (like $, ₹, €). 
<PDPriceCurrencySymbol  className="currency-symbol" />
Configuration Options
OptionTypeDefaultDescription
localizePricingbooleantrueConvert to local currency
classNamestring”custom class name for the component

​
PDPriceCurrencyCode

Renders the full currency code (like USD, INR, EUR). 
<PDPriceCurrencyCode />
Configuration Options
OptionTypeDefaultDescription
localizePricingbooleantrueConvert to local currency
classNamestring”custom class name for the component

​
PDPriceDecimalSeparator

Renders the decimal separator based on the user’s location (e.g., ”.”). 
<PDPriceDecimalSeparator />
Configuration Options
OptionTypeDefaultDescription
localizePricingbooleantrueConvert to local currency
price (required)number0The price of the product.
classNamestring”custom class name for the component

​
Custom Display Example

Example using all components to create a custom layout: 
<div className="custom-price-display">
  <PDPriceCurrencySymbol localizePricing={true} />
  <PDPriceInteger price={99.99} />
  <PDPriceDecimalSeparator price={99.99} />
  <PDPriceDecimal price={99.99} />
  <PDPriceCurrencyCode localizePricing={true} />
</div>

​
Using the Sandbox

If you want to use the sandbox, you need to set the environment option to sandbox in the ParityDealsProvider. 
<ParityDealsProvider productId="promo_7e2de26fb47644e58e867a20i898j748" environment="sandbox">
      {/* Your app components */}
</ParityDealsProvider>

​
Support

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