Implementing the Checkout Module on a Custom or Generic Platform

When implementing the Checkout On-site Module on a custom or generic platform, there are a few additional elements that need to be implemented in order for the module to run smoothly.

Customer identification

The Checkout Module requires the logged-in customer's information to detect which customer is redeeming points on your site.

To add the identification process, please follow the Identifying Customer step of the Implementing Loyalty & Referrals on a Custom or Generic eCommerce Platform article.

Provide Cart Data

Cart data is used to display in the module how many points the customer has while they have free products/points applied to their cart.

If you have already implemented this div in the past (during the deployment of a Free Product module on the same page), you can skip this step and go straight to Applying the Discount.

Add the following two div snippets on every page where you implement the module code, above the module instance:

<div id="yotpo-loyalty-cart-data"
     data-free-product-points="0"
     data-applied-coupon-points="0"
     data-cart-id="12345"
     data-has-paid-product="false"
     data-has-free-product="false">
</div>

<div id="yotpo-loyalty-checkout-data"
  cart-subtotal-cents="300">
</div>

Values:  

• data-free-product-points
  integer: Price in points of any free products currently in the cart
• data-applied-coupon-points
  integer: Price in points of the coupons currently applied to the cart 
• data-cart-id
  string: The customer's cart id  
• data-has-paid-product
  boolean: Should be true if the customer has a paid product in the cart 
• data-has-free-product
  boolean: Set to true if the customer already has a free product in the cart, or false if there's no free product
• cart-subtotal-cents
  string: The final cart amount after discounts

Applying the Discount

When a customer redeems points in the Checkout Module, a CustomEvent named yotpoLoyaltyDiscountApplied will be triggered on document.body. 

The relevant information that needs to be used will be exposed through the detail property:

• discountCode - will contain the discount code that was redeemed by the customer
• costInPoints - will contain the number of points the customer used to redeem the discount code

document.body.addEventListener("yotpoLoyaltyDiscountApplied", function(e) {
   // apply the value from e.detail.discountCode 
   // in the discount code's input box
});

Removing the Discount

 If a customer chooses to reverse or remove their redemption and receive their points back, Yotpo must be notified.

The onDiscountCodeRemoved function must be added to your storefront so that Yotpo will call on it once a redemption is removed at checkout. This function allows both Yotpo and your store to reverse the redemption and give the customer their points back.

Since price reduction happens on the store’s side, Yotpo needs to receive a response that signals whether this process was successful or not.

For this reason, the onDiscountCodeRemoved function should return a Boolean value from a promise - instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future, when the process fails/completes.

There are two possible values the promise can return:

• true - If the redemption was removed and the order price was reversed to the amount prior to applying the discount, the function should return a true value to make sure the customer gets their unused points back.
• false - If the discount removal process you have implemented wasn’t successful, the function should return a false value. By default, the customer will see the following message: “There was a problem removing your coupon”. If you wish to change the message text, find the relevant module div, for example, <div data-instance-id=“12343” />  and add the following attribute with the desired text:

data-discount-removal-failure-text="your message"I

Deploy Module

Once you've chosen and configured a checkout model type, you can go back to the main checkout module page and click the ellipsis icon at the top right corner of the module instance you've created. 

Choose the Get code option:

You'll see a popup with the relevant codes. Copy these codes and add them to them your store's checkout page.