Increase Sales with Cashback UI Elements
Last updated
Last updated
In today's competitive business environment, it's more important than ever to incentivize customers to purchase from your store and to keep coming back. One of the ways to do this is to encourage your customers to complete orders.
Using Gameball, you can motivate your customers to make an order by showing them the return value -or in other words “cashback”- of purchasing items from your store. For example, you can show the number of rewarded points on each item in your catalog. Or you can show it in the user’s cart or checkout page where you can calculate the whole order points value to push your customers into completing their order.
Through this tutorial we assume that you have a configuration of a 0.1 ratio cashback on your Gameball account.
Before we get started, It's important to make sure that you have already set up a Gameball account and integrated it with your website or app and obtain the API key of your account. Please refer to this article if you need further assistance.
For better understanding of the following, please make sure that you read this article about Gameball’s Order API and how it works.
In simple words, you can consider calculating the points of a specific item, or a group of items as if you are creating a draft order; where you provide gameball with the item(s) details and the API responds with the total amount of points that would be awarded if all of the sent items has been purchased, and a detailed breakdown of these items and how many points each of them rewards
The main endpoint we will be using in this tutorial is
POST https://api.gameball.co/api/v3.0/integrations/order/cashback
You can find the detailed description and interface of this endpoint in this link.
The request body of this endpoint is similar to the request body of the Order endpoint. It consists mainly of:
| The id of the customer on your system. It is provided because customer VIP tiers and tags can affect his cashback rate. But you can ignore it in showing the points for guest accounts for example. |
| The amount that should be paid to the store. |
| It consists of a list of the line items you want to calculate the cashback for. Each item consists mainly of:
|
Given the above data, and your dashboard configurations, Gameball breaks down these items into a calculation and returns to you:
TotalPoints: Which will be the total number of points rewarded to the customer if he completes the order given the same line items.
LineItems: Will contain a breakdown of each given line item and the points awarded for each item.
Make sure to add your API KEY to the request headers
Let’s say you have a product page on your website or application and you want to show the cashback points of purchasing this product.
Assuming the product Id is T-Shirt#4455, and the price of it is 200$, and it belongs to collections t-shirts and summer-sale. And you need to calculate the cashback points of that item if customer with id cust_123 purchased it, The request will be as follows:
The important parts of the response of the API will be:
In showing the cashback points of one product case, you will only send and receive one line item in the request and response. So, you can use lineitems[0].points result as the number of points that will be rewarded for this product.
Let’s move to another use case, where you want to show points details, but on the products catalog. You can use the previous endpoint to fetch the total points for each product. But this will result in so many redundant network calls.
You can group all of these API calls into one call by putting all of the items on the page into the line items array.
The request will be like the following:
And the API response will be
In this case, you will receive an array of lineItems, each object in the array resembles the cashback points of each item in your product catalog which you’ve sent in the request. Using the productId property, you can match the result of each item’s points to the actual product item in your UI.
Now, you need to motivate your customers to click on that shiny button for completing and placing their order. You can use Gameball to achieve this mission, customers will get motivated to place their order when they see the cashback value right on their screen. You can show it on the cart or checkout page, or any page you find suitable in your application.
We will use the same endpoint as the above use cases, but the main difference is that in carts or checkout pages users can purchase one or more item of the same product.
Let’s imagine a case where the user has the following items in his cart:
Product Id | Single Item Price | Quantity |
T-Shirt#4455 | 200$ | 1 |
Jacket#2133 | 300$ | 2 |
Shoes#1700 | 155$ | 2 |
The Order’s total price will be 1110$
The request will be like the following:
And the API response will be
The request is similar to the previous examples, where you send the price of each line item to calculate the points of each item.
However, there is an extra detail you could use, by passing the totalPaid attribute with the total amount paid by your customer, you will receive the total points the customer will earn once he completes his order inside the totalPoints attribute in the response. So you can use the totalPoints attribute to show the total number of points that could be earned by your customer if he completes his order.
You can use the LineItemsresponse array to show your customer the number of points for each product by using the points attribute, for items with quantity more than one, if you want to show the total number of points the customer will earn for each item you will need to multiply the quantity with the decimalPoints attribute, and if there is any decimal remainder you will need to floor them. The equation will look like this:
For the jacket example the customer has 2 items in his cart with the cashback of 30.0 points for each item, so the total cashback points for the jacket will be 60 points (2 * 30).
For the shoes, buying only one shoes the customer should be rewarded with 15.5 points, but there is no fraction reward so he will be rewarded only 15 points. But in our case the customer had 2 shoes in his cart so he will be rewarded (2 * 15.5) which equals 31 points. That's why you should use the decimalPoints response attribute in your calculations.
Now you understand how calculating the cashback points for different products works and you can embed these points into your own application or website with the shape and theme you want.
