Implementing the Checkout Module on a Custom or Generic Platform

      Implementing the Checkout Module on a Custom or Generic Platform


        Article summary

        Products


        Loyalty & Referrals
        Supported plans

        Pro, Premium, Enterprise

        eCommerce Platform

        Custom

        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.

        Please note:
        • 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.

        Please note:

        Both the customer-email and customer-id attributes are required for the Checkout Module to successfully redeem points on behalf of the customer.

        The customer-id should match the customer ID attribute sent to Yotpo with the orders and customer creation API calls

        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


         I
        f 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.



        Was this article helpful?