Loyalty & Rewards: Redeeming Points on Checkout

Note: This guide only applies to Shopify Plus.

You can now add a redemption widget on Checkout Page:

Note: Any variable discount coupon redeemed through the slider widget that remains unused after 24 hours will be automatically voided. 

1) Create a snippet "stamped-checkout-slider" file with the following contents:
Note: replace "##REPLACE_WITH_CAMPAIGN_ID##" with the spending campaign's ID with "variable" type. You will find the campaign ID in the tail-end of the URL of the settings page for the relevant spending rule:

{% assign stamped_key_public = shop.metafields['stamped'].api_public %}
{% if customer %}
  {% assign stamped_key_secret = shop.metafields['stamped'].api_secret %}
  {% assign stamped_customer_accepts_marketing = customer.accepts_marketing %}
  {% assign stamped_customer_email = customer.email %}
  {% assign stamped_customer_first_name = customer.first_name %}
  {% assign stamped_customer_id = customer.id %}
  {% assign stamped_customer_last_name = customer.last_name %}
  {% assign stamped_customer_orders_count = customer.orders_count %}
  {% assign stamped_customer_tags = customer.tags | join: "," %}
  {% assign stamped_customer_total_spent = customer.total_spent %}
  {% assign auth_token = customer.id | append: customer.email | hmac_sha256: stamped_key_secret %}
{% endif %}


<div id="stamped-rewards-init" class="stamped-rewards-init"
  data-key-public="{{ stamped_key_public }}"
{% if customer %}
  data-customer-accepts-marketing="{{ stamped_customer_accepts_marketing | escape }}"
  data-customer-id="{{ stamped_customer_id | escape }}"
  data-customer-email="{{ stamped_customer_email | escape }}"
  data-customer-first-name="{{ stamped_customer_first_name | escape }}"
  data-customer-last-name="{{ stamped_customer_last_name | escape }}"
  data-customer-orders-count="{{ stamped_customer_orders_count | escape }}"
  data-customer-tags="{{ stamped_customer_tags | escape }}"
  data-customer-total-spent="{{ stamped_customer_total_spent | escape }}"
  data-key-auth="{{ auth_token }}"
{% endif %}
></div>
<div id="stamped-rewards-slider-range" class="order-summary__section" style="display:none;" data-type="apply-points">
	<div id="stamped-rewards-widget" data-widget-type="rewards-redeem-variable-slider" data-campaign-id="##REPLACE_WITH_CAMPAIGN_ID##" data-max-amount="{{checkout.total_price | divided_by:100.0}}"></div>

</div>

<script> 
function myInit(){ 
	StampedFn.init({ 
		apiKey: '{{stamped_key_public}}', 
		storeUrl: '##storeUrl##' 
	}); 
} 
</script> 
<script onload="myInit()" type="text/javascript" src="https://cdn-stamped-io.azureedge.net/files/widget.min.js">
</script>
<link rel="stylesheet" type="text/css" href="//cdn-stamped-io.azureedge.net/files/widget.min.css">




<script type="text/javascript">
  StampedFn.on('stamped:init:starting', function(data){
    if(window.location.href.indexOf("checkout") > -1 && window.location.href.indexOf("thank_you") == -1) {
        if(jQueryStamped(window).width() < 999)
        {
          jQueryStamped("[data-trekkie-id='order_summary_toggle']").click();
        }
    }
    jQueryStamped('#stamped-rewards-slider-range').insertAfter('.order-summary__section.order-summary__section--product-list');
    jQueryStamped('#stamped-rewards-slider-range').show();
  });

  StampedFn.on('stamped:rewards:redeemed', function(data){
    var selectorCodeInput = 'input#checkout_reduction_code';
    var jquery;
        if (window.jQuery) {
          jquery = window.jQuery;
        } else if (window.Checkout && window.Checkout.$) {
          jquery = window.Checkout.$;
        }
  
    var couponCode = data.detail.rewardCampaignCoupon.couponCode;
    if (couponCode){
      jquery(selectorCodeInput).val(couponCode);
      
      var i = ["focus", "keypress", "input", "blur"];
      i.forEach(function(e) {
        var n = new CustomEvent(e,{
          bubbles: !0
        });
      	jquery(selectorCodeInput).get()[0].dispatchEvent(n);
	  })

      jquery('button.field__input-btn').click();
    }
  });
</script>

To install the dropdown selection widget for fixed discounts, replace the value for the attribute data-widget-type to rewards-redeem-select-options instead.

2) In "Checkout.liquid" theme file, insert the following codes just before the </body> tag:

{% include 'stamped-checkout-slider' %}

Done!

Important Note!
Unable to find the checkout.liquid file?
If you cannot locate the checkout.liquid file in the theme editor, you'll need to contact Shopify to enable to file to be editable.