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!