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.
- The Checkout Module for the custom platform automatically deducts the points a customer redeemed for the discount code. This means that if the customer removes the discount code, or abandons their cart, the points will not be returned to them, however, the 'Coupon Earned' email will be sent to the customer with the discount they redeemed.It will also be available to them on the rewards history section of the 'My Activity Module'.
- This module utilizes Mozilla's CustomEvent.detail element, which is not supported on Internet Explorer, as can be seen here
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.