Allowing customers to create coupons
Last updated
Last updated
Allowing customers to redeem points is a great way to promote points spending and boost engagement with your reward program. In the previous tutorial, we learned how to display customers' points. However, for customers to make use of these points, they should be able to redeem them to access the coupons and discounts created by redeeming his points.
In this tutorial, we will learn how to allow your customers to redeem their points and in-exchange of these points, they can have discount coupons to use them at checkout. For example, if your customer has accumulated 200 points over his purchasing journey at your system and want exchange his points to be redeemed, he will win a discount with monetary value of these points.
Make sure you did configure your coupon system settings to be able to create coupons successfully.
The goal of this tutorial is to create a custom redemption page for your customers to redeem their points from. By the end of this tutorial, you should have a similar UI page as the image above where your customers can redeem their points from.
As a start, we will enable redemption using Flat rate redemption only in your redemption page, you can include other redemption options to reward your customer with different types of rewards or prizes as we will see in the upcoming section.
Flat rate redemption is the default redemption type in Gameball, where you set in your dashboard an equivalent monetary value for every point your customer wins. For example, If you set the point value in your dashboard to 1$ and your customer has 30 points in his account, then your customer can redeem his points and win a 30$ off coupon code.
To allow redemption with flat rate discount, you have to do the following steps :
Create a page where the customer can set the amount of points he would like to redeem, this typically would be redemption page.
To display customer available points, and monetary value of available points, visit the previous tutorial.
You should call CreateCoupon API to create discount with the monetary amount of the points to be redeemed.
For example, If one of your customers visited your redemption page and decided to redeem 1000 of his points, which is equivalent to 100 USD, points and its monetary value is retrieved from Customer's points balance, he will enter in number of points text field, the number of points he wants to redeem, and click on 'Redeem Now' button. In the backend you should calculate the monetary value of these point and pass it in the request body along with the attributes below:
value : The monetary value of the points your customer tries to redeem.
playerUniqueId : The unique id of your customer at Gameball.
This image shows an example of a UI that implements flat rate redemption. To display customer available points and their monetary equivalent as the UI above you should call get point balance to display customer available balance using pointsBalance and pointsValue in the request body attribute.
'Redeem Now' button in your UI should call CreateCoupon API in your system and pass the attributes in the request body as we explained earlier.
Display generated discount coupon, after calling CreateCoupon API, you should display to your customer his discount code.
After your customer redeemed his 1000 points, typically, your system should display the discount code to your customer a pop-up message as you will find below, so he can copy it and use it later at checkout page as we will see in the next tutorial.
code: Code attribute is the code of the coupon was created in exchange of the points the customer redeemed.
There are other redemption options in Gameball, you can enable them to redeem your customer's points with various rewards. For example, you can create a redemption option or rule for your customers to redeem 600 of their points in exchange of a free shipping coupon or they can redeem 500 of his points for a free product(s)/item(s) in your system.
Various redemption options give the customer, the freedom to choose how he redeems his points in exchange of different rewards or prizes. This freedom will lead to more points redemption and can increase engagement and loyalty among your customer base.
One of these redemption options is free shipping, you can allow your customers to exchange their points with free shipping discount code.
To redeem customer points with free shipping, we will go through the same steps as Flat rate example but with one more additional step.
Call Get RedemptionRules API in your rewards page section to display all your available redemption options.
One of your customers visited your redemption page and want to check the available redemption options offered by your business, he can redeem his points with. In the backend call this API to fetch all your available redemption options and pass it to the frontend to render these options in your redemption page UI.
redemptionRules is json object that contains list of all your redemption options in your redemption page, it contains the following attributes about each redemption option :
id : Unique identifier for each redemption option, you will use it as a reference later on in step 2 using Create coupon API to identify which redemption rule your customer choose.
valueOfPoint : The monetary value of one point, for example, if 1 point equals to 1$ then valueOfPoint is 1 USD.
valueOfPoint is only set in case of flat rate discount, whose ruleType isgeneral_settings.
ruleType : Type of each redemption rule.
The Id of each redemption option should be embedded in the html of your redemption page as hidden input, so when a customer click redeem button in-front of a specific redemption option you can identify which option is selected.
Please note that id of each redemption option is an internal attribute and should not be displayed to your end-user.
To differentiate between various redemption option, you should use ruleType attribute to check for each rule type and based on its type you can display text or image that can describe each redemption option and its reward.
You can also display for your customer the minimum points needed to redeem each option using pointsToRedeem attribute.
If your customer wants to redeem his points, you should call CreateCoupon API.
Your customer selected one of the redemption option, in our example, he decided to redeem his points in exchange of free shipping option. In your backend, you should pass the following body to the CreateCoupon API.
The CreateCoupon call will create a new free shipping discount code, you should display this code to your customer as a pop-message, so your customer can use it during checkout as we will see in the next tutorial.
There are other redemption options you can create from your dashboard like :
Flat rate
general_settings
Free shipping discount
free_shipping_settings
Percentage discount
percentage_discount_settings
Free product discount
free_product_settings
Fixed rate discount
fixed_rate_settings
To know more about each discount type and its business use-cases visit our help center.
