Skip to main content
Allowing customers to redeem points at checkout is a great way to promote points spending and boost engagement with your reward program. Adding a points dropdown to your checkout makes spending points quick, easy, and seamless.‌

​
1. Include our sample code in your checkout page

Copy the contents of our sweettooth-points-products-dropdown.html code sample and add it to the body of your checkout page.
The code sample uses jQuery. If your site does not already include or use jQuery, you should uncomment the jQuery script at the top of the sample.‌

​
2. Add the dropdown to your checkout page

Add the following div to your checkout page where you’d like the points dropdown to appear.
HTML
<div class="sweettooth-points-products-dropdown"></div>

​
3. Customize the available rewards

Sometimes there are rewards offered through your program that don’t apply to the cart, such as Free Product rewards. You can hide specific Points Products from being shown in the dropdown menu by adding specific Points Product IDs to the hidePointsProductsIds variable in the code sample.​‌ In order to find the IDs of points products that you want to hide, visit Smile Admin and navigate to your points program. Go to your rewards and select one that you wish to hide from the points products dropdown. When you select a reward, you will be able to find the corresponding ID of the points product in the address bar. This ID can be added to the hidePointsProductsId variable in order to hide it from the dropdown.

​
4. Apply the discount code to your cart

In order for the dropdown to be functional, you will need to specify how the generated coupon code should be applied to the customer’s cart.‌ The method purchasePointsProduct is triggered by the customer when the “Redeem” button is clicked. Within the callback of this method, you’ll have access to the discount code which can then be applied to the cart however you see fit. The code is available by referencing pointsProduct.fulfilled_reward.code.‌ The process for applying the discount code to your customer’s cart can be done via your cart’s API, or by a form field input simulated with JavaScript. To complete the setup of the dropdown, you’ll need to customize the contents of the applyDiscountCodeToCart function so that the generated code is applied to the customer’s cart.​‌

​
5. You’re done! 🎉

Visit your store’s checkout page to confirm the dropdown works as expected.‌

​
Tips for the best customer experience

Certain Points Products apply discounts to the cart in different ways. For example, gift cards can apply discounts to the total value of the cart whereas coupon codes may only apply discounts to the cart subtotal. There are other factors, including your region and cart setup, that prevent us from providing a single code sample that works flawlessly out of the box for every merchant.‌ Our sample code is meant to get you up and running with giving your customers the option to spend their points at checkout. It allows them to purchase any PointsProduct they can afford. As a result, your customers may accidentally spend their points on a PointsProduct that has a greater value than what can actually be discounted from the cart.‌ You may want to filter out these PointsProducts so that your customers are assured to have a great experience at checkout!