Showing customers available points

Allowing customers to view their points is one of the essentials for a top notch Redemption experience. For example, John has been using your e-commerce platform that rewards him with points for making purchases and engaging with the platform. He logged in to his account and checked his points balance by navigating to the points section of your platform. Here, he sees that he has accumulated 1330 points. To display john's points you will have to call GetCustomerBalance which returns the following payload.

{
    "pointsBalance": 1330,
    "pointsValue": 200,
    "pendingPoints": 100,
    "pendingPointsValue": 0,
    "totalPositivePoints": 1230,
    "totalPositivePendingPoints": 100,
    "totalNegativePoints": 0,
    "totalNegativePendingPoints": 0
    "currency": "EGP",
    "pointsName": "Points"
}

The points available to redeem are calculated by deducting the pointsBalance from the pendingPoints

pointsAvailable = pointsBalance - pendingPoints

If we applied this on our example json payload then the points available to use will be :

pointsAvailable = 1330 - 100

To display a customer's current points balance, you can use pointsAvailable which stores the customer's current balance. You can then display this balance on your redemption page using a simple HTML element like a paragraph or span:

<p><span id="points-balance">{{pointsAvailable}}</span>Points</p>

The {{pointsAvailable}} is a placeholder that will be replaced with the actual value of pointsAvailable which will we will get from the Customer points balance API when the page is rendered.

To display the equivalent monetary value of a customer's points, you can use pointsValue that stores the monetary value of available points.

You can display this value on your redemption page using a similar HTML element:

<p>Equals to <span id="points-value">{{pointsValue}} {{currency}}</span></p>

You can also replace currency in the html with the currency attribute in the API response.

To prevent your customer from redeeming points below specific number of points, For example, you might want to prevent your customer from redeeming points. if his point balance is less than 200 points. You can use pointsBalance in Customer points balance API to validate if the points the customer tries to redeem is more than his balance or not.

function getPlayerBalance(playerUniqueId){
var playerBalanceResponse = {
    "pointsBalance": 1330,
    "pointsValue": 200,
    "pendingPoints": 100,
    "pendingPointsValue": 0,
    "totalPositivePoints": 1230,
    "totalPositivePendingPoints": 100,
    "totalNegativePoints": 0,
    "totalNegativePendingPoints": 0
    "currency": "EGP",
    "pointsName": "Points"
}
var playerActualPoints = playerBalanceResponse["pointsBalance"]
var playerPointsToRedeem = 60 // points your player tried to redeem 
var minimumPointsRequiredToRedeem = 500 // minimum points needed to redeem this reward 
if(playerPointsToRedeem >= playerActualPoints || playerPointsToRedeem < minimumPointsRequiredToRedeem){
    //Display error to user that he can not redeem points.
}
}

CustomerBalanceResponse variable is the response body after you call the API to display customer's Customer's points balance API and you check the pointsBalance against the number points choose to redeem in the UI.

Optionally, you can decide the minimum number of points needed to redeem points, for example, you can set this number statically in your code as below

function getPlayerBalance(playerUniqueId){
....
var minimumPointsRequiredToRedeem = 500 // minimum points needed to redeem this reward
}

and compare wether the points the customer redeem is less than the minimum points needed to redeem or not.

function getPlayerBalance(playerUniqueId){
....
var playerPointsToRedeem = 60 // points your customer tried to redeem 
var minimumPointsRequiredToRedeem = 500 // minimum points needed to redeem this reward
if(playerPointsToRedeem < minimumPointsRequiredToRedeem){
//Display error to user that customer can not redeem points less than the minimum.    
}
}

We recommend going through this guide for more important insights.