Pricing API Guide
The Pricing API allows your customers' web browsers to communicate with the Cleverbridge platform and automatically populate your web pages with up-to-date product, price, promotion, and geo IP data.
In this guide, you can find information to help you understand and integrate the following Pricing API endpoint:
Prices
GET /prices
The Prices resource retrieves real-time product, price, promotion, and geo IP data for a specific product.
Integrate the Pricing API
Important
To integrate the Pricing API into your front-end, you need the cleverAPI Script and the Sample CSS.

To load the script and CSS, enter the following into the HEAD of the HTML page:
<link rel="stylesheet" href="{BASE_API_URL}>/cleverApi.css" type="text/css">
After that, enter the following at the bottom of the HTML page:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="{BASE_API_URL}cleverApi.js"></script>
<script>
$(document).ready(function() {
$.cleverApi.get({
'currency': 'USD',
client_id: 1
});
});
</script>
Note
{BASE_API_URL}
is the URL where the cleverAPI script is hosted.

To set up your client_id
, send the following to the cleverApi
script at startup. Replace the 8
with your Cleverbridge client_id
.
$(document).ready(function() {
$.cleverApi.get({
client_id: 8
});
});

To set up the currency
, send the following to the cleverApi
script at startup. Replace the 'USD'
ISO code with your desired currency.
$(document).ready(function() {
$.cleverApi.get({
currency: 'USD'
});
});

To set up the API endpoint, send the following to the cleverApi script at startup.
$(document).ready(function() {
$.cleverApi.get({
'endpoint': {
URL_TO_API
}
/prices'});
});
Note
Cleverbridge runs the alpha test. Therefore, it is possible that the API is updated without updating the script. You can use another endpoint by using the 'endpoint'
option.

To load pricing information, use the following CSS classes:
CSS Class | Function |
---|---|
cleverApi
|
indicates that the price information will be used here |
cleverApi-loaded
|
after price loading, the clever CSS class is changed to clever-loaded |
cleverApi-{product_id}-listprice
|
the list price information will be displayed |
cleverApi-{product_id}-listpriceLocalized
|
the localized list price information will be displayed |
cleverApi-{product_id}-priceGross
|
the gross price information will be displayed |
cleverApi-{product_id}-priceGrossLocalized
|
the localized gross price information will be displayed |
cleverApi-{product_id}-priceNet
|
the net price information will be displayed |
cleverApi-{product_id}-priceNetLocalized
|
the localized net price information will be displayed |
cleverApi-{product_id}-priceVat
|
the vat price information will be displayed |
cleverApi-{product_id}-priceVatLocalized
|
the localized vat price information will be displayed |
cleverApi-{product_id}-currency
|
the currency ISO code will be displayed |
cleverApi-{product_id}-currencySymbol
|
the currency symbol will be displayed |
cleverApi-{product_id}-vatRate
|
the VAT rate will be displayed |
cleverApi-{product_id}-vatRateLocalized
|
the localized VAT rate value will be displayed |
cleverApi-{product_id}-discountAbsolute
|
the absolute discount will be displayed |
cleverApi-{product_id}-discountAbsoluteLocalized
|
the localized absolute discount will be displayed |
cleverApi-{product_id}-discountPercentage
|
the discount percentage will be displayed |
cleverApi-{product_id}-discountPercentageLocalized
|
the localized discount percentage will be displayed |
cleverApi-{product_id}-monthlyPriceNet
|
the net price per month will be displayed |
cleverApi-{product_id}-monthlyPriceNetLocalized
|
the localized net price per month will be displayed |
cleverApi-{product_id}-monthlyPriceGross
|
the gross price per month will be displayed |
cleverApi-{product_id}-monthlyPriceGrossLocalized
|
the localized gross price per month will be displayed |
Example
<p><label>currency:</label><b class="cleverApi cleverApi-1-currency"></b></p>
<p><label>currencySymbol:</label><b class="cleverApi cleverApi-1-currencySymbol"></b></p>
<p><label>priceNetLocalized:</label><b class="cleverApi cleverApi-1-priceNetLocalized"></b></p>
<p><label>discountAbsolute:</label><b class="cleverApi cleverApi-1-discountAbsolute"></b></p>
<p><label>discountAbsoluteLocalized:</label><b class="cleverApi cleverApi-1-discountAbsoluteLocalized"></b></p>
<p><label>discountPercentage:</label><b class="cleverApi cleverApi-1-discountPercentage"></b></p>
<p><label>discountPercentageLocalized:</label><b class="cleverApi cleverApi-1-discountPercentageLocalized"></b></p>

When the API returns a 404
value because the client_id
or product_id
cannot be found, the integration script will add a note to the element. This allows you to hide this information from the customer. Additionally, all elements will be hidden with a given CSS class.
Note
When the following is returned - cleverApi-hide-{product_id}-{property_name}
- the CSS display property 'display:none'
will be added to the element.
Example
<p class="cleverApi-hide-2-discountAbsolute"><label>discountAbsolute:</label><b class="cleverApi cleverApi-2-discountAbsolute"></b></p>
<p class="cleverApi-hide-2-discountAbsoluteLocalized"><label>discountAbsoluteLocalized:</label><b class="cleverApi cleverApi-2-discountAbsoluteLocalized"></b></p>
<p class="cleverApi-hide-2-discountPercentage"><label>discountPercentage:</label><b class="cleverApi cleverApi-2-discountPercentage"></b></p>
<p class="cleverApi-hide-2-discountPercentageLocalized"><label>discountPercentageLocalized:</label><b class="cleverApi cleverApi-2-discountPercentageLocalized"></b></
Example Integration
Product ID: 111111 |
---|
name (en):Super mega product 14000 XP |
additionalName:super |
shortDescription:short description |
description:description |
operatingSystem:OS |
systemRequirements:none |
listprice:77 |
listpriceLocalized:77,00 $ |
priceGross:69.3 |
priceGrossLocalized:69,30 $ |
priceNet:58.24 |
priceNetLocalized:58,24 $ |
priceVat:11.06 |
priceVatLocalized:11,06 $ |
currency:USD |
currencySymbol:$ |
vatRate:19 |
vatRateLocalized:19 % |
discountAbsolute:7.7 |
discountAbsoluteLocalized:7,70 $ |
discountPercentage:10 |
discountPercentageLocalized:10 % |
Product ID: 111112 - no discount - hide discount data |
---|
listprice:150 |
currency:USD |
currencySymbol:$ |
listpriceLocalized:150,00 $ |
Errors |
---|
unknown PID hide:unknown css class: cleverApi-12-price |
unknown product_id:unknown css class: cleverApi-22-price |
unknown css class:unknown css class: cleverApi-22-priceunknown |
Use Cases
The following are common use cases for the Pricing API:

By localizing the pricing information on your plan selection pages and catalogs, you can lower purchasing barriers and access more markets in an increasingly global economy. A simple way to do so is by integrating our web browser API service, the Pricing API, into your front-end.
After you've integrated this API, your website will automatically request localized pricing information from the Cleverbridge platform based on the customer's IP address. There is no need for redundant price management on your end.
curl --request GET \
--url 'https://pricingapi.cleverbridge.com/prices?client_id=864&product_id=123456' \
--header 'accept: application/json' \
--header 'accept-language: en-US'
For a simple way to integrate the Pricing API using a JavaScript SDK, see Integrate the Pricing API.
To learn how to integrate pricing into your front-end using the Cleverbridge GraphQL API, see Display Local Pricing on Website.

Assumptions and Preconditions
- Products can be subscribed to for a yearly or multi-year payment.
Scenario
Cloudbit, a fictional company that provides security software for corporate networks, offers the following plans:
Plan | Recurring Price |
---|---|
Monthly Subscription | $20 per month |
Yearly Subscription | $150 per year |
Bi-Yearly Subscription | $250 per 2 years |
Tri-Yearly Subscription | $350 per 3 years |
During a marketing campaign, Cloudbit decides that they want to try to entice customers to subscribe to longer plans (which create long-lasting relationships and provide better value for money) by allowing them to compare the monthly price of each plan. To do so, they create a plan selection page on their website, which displays the following monthly price breakdowns:
Plan | Recurring Price | Monthly Breakdown |
---|---|---|
Monthly Subscription | $20 per month | $20 per month |
Yearly Subscription | $150 per year | $12.50 per month |
Bi-Yearly Subscription | $250 per 2 years | $10.42 per month |
Tri-Yearly Subscription | $350 per 3 years | $4.86 per month |
The result is the following:
Example
To view this plan selection page in a browser, open the Cloudbit Demo Page.
Implementation
To build the plan selection page with monthly breakdowns, Cloudbit did the following:
- They completed the following instructions: Integrate the Pricing API.
- They loaded the pricing information on the plan selection page using the following CSS classes:
CSS Class Function cleverApi-{product_id}-monthlyPriceGross the gross price per month will be displayed cleverApi-{product_id}-priceGrossLocalized the localized gross price information will be displayed Note
For a full list of the CSS classes that are available, see step 5 in Integrate the Pricing API.
Important
If you want to build your plan selection page with our APIs, but do not want to use the SDK described in Integrate the Pricing API, see the Pricing API (REST) and cart (GraphQL) reference documentation.