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 following Sample CSS:

CSS

.cleverApi {
  min-width: 3em;
  text-align: center;
}
.cleverApi > div {
  width: 8px;
  height: 8px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.cleverApi .clever-bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.cleverApi .clever-bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

1. Load the cleverAPI Script and 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, and make sure to set up your Cleverbridgeclient_idand desired currency using the corresponding ISO code:

<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: 8
  });
});
</script>

📘

Note

{BASE_API_URL} is the URL where the cleverAPI script is hosted.

2. Set Up the API Endpoint

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'});
      });

3. Load Price Information onto your Page

To load pricing information, use the following CSS classes:

<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>

4. Hide Elements when no Information is Returned

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.

<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

Use Cases

The following are common use cases for the Pricing API:

Display Local Pricing on Website

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.

Display Monthly Breakdown on Plan Selection Page

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:

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:

The result is the following:

📘

Note

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:

1. They completed the following instructions: Integrate the Pricing API.
2. They loaded the pricing information on the plan selection page using the following CSS classes:

📘

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.