Skip the discount code by letting customers spend points at checkout.
Redeeming 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 super easy during checkout.
From the BigCommerce theme editor, copy the contents of our smile-points-products-dropdown.html code sample into a new theme file. You will need to make sure that this file gets added to your checkout page.
In order to make the code sample work with your store, you need to add your public API key. To locate your API key go to the apps page in the Smile Admin. Click the "Edit" link next to your BigCommerce app.
Next, click "Show launcher and API keys", then copy your public API key.
At the top of the code snippet, paste your public API key into the
data-channel-key attribute on the script tag.
Sometimes there are rewards in your program that don't apply to the cart, such as email rewards or free products. You can hide points products from being shown in the dropdown by adding specific points product IDs to the
In order to find the IDs of points products that you want to hide, visit the 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.
Add the following div to your checkout page where you would like the dropdown to appear.
In order for this component to function, you will need to write the code that takes the generated discount code and applies it to the card.
applyPointsPurchaseToCart function is triggered when the customer clicks the "Redeem" button. Within this method, you'll have access to the discount code which will need to be applied to the cart. The code is available via
Visit your store's checkout page to confirm your changes. If everything is working as expected, you're done! 🎉
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 points product they can afford. As a result, your customers may accidentally spend their points on a points product that has a greater value than what can actually be discounted from the cart.
You may want to filter out these points products so that your customers are assured to have a great experience at checkout!