Pricing API Guide

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>

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

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>

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.

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

By localizing the pricing information on your plan selector 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 frontend.

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 simple way to integrate the Pricing API using an JavaScript SDK, see Integrate the Pricing API.

To learn how to integrate pricing into your frontend using the cleverbridge GraphQL API, see Display Pricing Information on Your 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:

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:

Implementation

To build the plan selector 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 selector 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.