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!