Points slider at checkout

To add this feature, you'll need to know how to edit the checkout page within your theme.

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 slider to your checkout makes spending points super easy and actually kind of fun!

This guide requires the Javascript SDK setting in Smile Admin be enabled.

Implementation

Step 1: Include our sample code in your checkout page

From the BigCommerce theme editor, copy the contents of our smile-points-slider.html code sample into a new theme file. You will need to make sure that this file gets added to your checkout page.

This code snippet requires jQuery. If you do not already use jQuery on your site and wish to use the snippet as it, you will need to uncomment the jQuery script at the top of the snippet.

Step 2: Add your public API key to the script

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.

Step 3: Locate the points product that will power your slider

Find the ID of the PointsProduct you wish to use with the points slider. You can do this by navigating to the reward in question within Smile Admin, and then looking at the ID specified in the last part of the URL. The ID will always be a number.​

To use a points slider, the PointsProduct that it references must be a variable reward (one that supports rewarding in increments). To learn more about fixed vs. variable rewards, click here.‌

Step 4. Optional - Update your snippet's language

The variables that start with "translate" (i.e. "translateRedeemLabel") are in English by default. Any "translate" variable with the note "Optional translation:" above it can be edited and translated into the language you've set in your language settings.

Each phrase has a description, instructions, and an example above it. Follow the instructions to edit these phrases as needed.

Step 5: Add the slider to your checkout page

Add the following div to your checkout page. Update the data-points-product-id property with the ID that you selected in the previous step.

<div class="smile-points-slider" data-points-product-id=null></div>

Step 6: Apply the discount code to your cart

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.

The 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 pointsProduct.reward_fulfillment.code.

The process of 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.

Step 7: Test it out

Visit your store's checkout page to confirm your changes. If everything is working as expected, you're done! 🎉

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 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!