Apply the discount code to your cart

Applying a discount code to a shopping cart is a simple and effective way for your players to save money and take advantage of the redemption feature. It is also a valuable tool for your business to attract and retain customers, increase sales, and improve customer satisfaction. In the previous tutorial, we build together the UI component responsible for player redemption by displaying all available redemption rules, in addition to the button responsible for redeeming these points.

In this tutorial, we will build together the UI component responsible for including discount coupon at checkout page.

Showing your player all his available coupons

As a business, you need to show your players all of their available coupons in a clear and organized way. This UI component should allow players to easily access and use and copy their coupon codes to use during checkout.

Your player want to check his available coupons, so he can use them at checkout to get his discount. You can display all your player coupons in the same page as redemption page or in a separate page based on your user experience. In the backend you should call GetPlayerCoupons API which will retrieve all your player coupons and render them in your frontend.

[
    {
        "code": "_nqjuejhuy",
        "isUsed": false,
        "value": 11.75,
        "currency": "USD",
        "creationDate": "2022-05-03T11:08:42.298758",
        "couponType": "fixed_rate_settings",
        ....
    },
    {
        "code": "1qol7apahr",
        "isUsed": false,
        "value": 10.0,
        "currency": "USD",
        "creationDate": "2022-05-03T11:07:22.718595",
        "couponType": "fixed_rate_settings",
        ....
    },
        {
        "code": "20eybq9-_k",
        "isUsed": true,
        "value": 20.0,
        "currency": "USD",
        "creationDate": "2022-05-01T11:07:22.718595",
        "couponType": "general_settings",
        ....
    },
]

You may want to check if your coupon is already used before by your player or not. Depending on your design decisions, but you might not want to display already used coupons, you can check if coupon is already using isUsed attribute.

Pass players' coupon discount to his order

After viewing all his coupons, your player decided to purchase on your e-commerce platform and added items to his cart. At checkout, he sees a field for entering a coupon code. He enters the code for the coupon he created in exchange of redeeming his points and clicks a button which should updates order's totalPrice after applying coupon on it and display coupon code at checkout.

Your are responsible for updating values of totalPrice, totalDiscount and other attributes affected by the discount after applying discount code on it. For more information visit Order API.

After player click 'Apply coupon' button, you should calculate the totalPrice and totalDiscount based on the discount value and save it. You should pass them to Order API request body when your player completes his order.

{
  "playerUniqueId":"player456",   
  "orderId": "6253e03b",
  "orderDate":"2023-05-5T16:53:28.190Z",
  "totalPrice": "53.25",
  "totalPaid": "65",
  "totalDiscount": "11.75",
  "totalShipping": "0",
  "totalTax": "0", 
  "lineItems":[
  ],
  "discountCodes": [
      "_NQJUEJHUY",
  ],
  "extra": {
    "paymentMethod": "credit card",
    "billingAddress": "Alabama"
  },
  "redeemedAmount": 11.75,
  "holdReference": null,
  "guest": false
}