Apply the discount code to your cart

Applying a discount code to a shopping cart is a simple and effective way for your customers 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 customer 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 customer all his available coupons

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

Your customer want to check his available coupons, so he can use them at checkout to get his discount. You can display all your customer coupons in the same page as redemption page or in a separate page based on your user experience. In the backend you should call Get Customer Coupons API which will retrieve all your customer 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 customer 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 customers' coupon discount to his order

After viewing all his coupons, your customer 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 customer 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 customer 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
}