Apply the discount code to your cart
Last updated
Last updated
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 , 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.
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.
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.
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 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 or in a separate page based on your user experience. In the backend you should call API which will retrieve all your customer coupons and render them in your frontend.
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 .
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 request body when your customer completes his order.
