Pay Monthly Selectors

<!--  Payment selector HTML code -->
<div id="up-pay-monthly-selector">
  <span>Pay Monthly</span>
  <span id="up-pay-monthly-selector-from-pricing" 
    style="display: none; cursor: pointer;" 
    data-up-price-type="total"
    data-up-price-value="72700">
    from
    <span data-up-from-currency-unit-major=""></span>/mo
    <span data-up-tooltip="">
      <!--Replace with your preferred icon/svg-->
    </span>
  </span>
  <span id="up-offer-not-available" data-up-error="" style="display: none;">
    NOT AVAILABLE
    <span data-up-tooltip="">
      <!--Replace with your preferred icon/svg-->
    </span>
  </span>
</div>
<!-- Payment selector HTML code -->

Note we have provided a default icon, if you want use it please refer to the script in the
Configuration section above.

1. Offer is not available. Update orderInfo.order_amount to 1000 ($10.00) in the buildOrderInfo function. In addition to this, update your callback handler as shown below to hide the Pay Monthly Selector in case an offer is unavailable (status: OFFER_UNAVAILABLE) and show the corresponding not available node.

   OFFER_UNAVAILABLE:
   function(){
   //Uplift offer is not available for this customer
       document.getElementById("up-offer-not-available").style=”display: block”;
       document.getElementById("up-pay-monthly-selector-from-pricing").style=”display: none”;
   }
   

   
   

   On refreshing the page, you should see the following message when you hover on the information (i) icon.

   

2. Offer is available. Update orderInfo.order_amount to 70000 ($700.00) in the buildOrderInfo function. In addition to this, update your callback handler as shown below to show the Pay Monthly Selector in case an offer is available (status: OFFER_AVAILABLE) and hide the corresponding not available node.

   OFFER_AVAILABLE:
   function(){
     //Uplift offer is not available for this customer
     document.getElementById("up-offer-not-available").style=”display: none”;
     document.getElementById("up-pay-monthly-selector-from-pricing").style=”display: block”;
   }
   

   
   

   When you refresh the page, you should see a valid Uplift Payment Selector, when you hover above the information (i) icon you should see an information modal as shown below.

   

   📘 Note however, that the estimated pay monthly offer is on the basis of an
   amount of $727.00 and not $700.00. This is because of the value in our Pay
   Monthly HTML, specifically the data-up-price-value="72700". This was the amount used in the HTML example above.

   On non-payment pages, the From Pricing nodes’ data-up-price-value attribute determines Uplift’s Pay Monthly offer to the customer.

   However, on payment pages, while the modal is configured using the From Pricing nodes data-up-price-value attribute, the actual offer is based on the orderInfo.order_amount. Thus it is mandatory to use the same value for both data-up-price-value attribute and orderInfo.order_amount on a payment page.

3. Offer is available but wrongly configured to show as not available. The user experience will be similar to when an offer is not available. However, note that since we have a valid OrderInfo object, with a valid order_amount (70000 equivalent to $700) technically there should be an offer available, however, wrong configuration can result in the offer not being displayed. An example of this can be done by updating the callback handler with the following code snippet:

   OFFER_AVAILABLE:
   function(){
     //Uplift offer is not available for this customer
     document.getElementById("up-offer-not-available").style=”display: block”;
     document.getElementById("up-pay-monthly-container").style=”display: none”;
   }
   

   
   

   When you refresh the page, the Payment Selector should look similar to the image below.

   

   If you hover over the information (i) icon, you will notice an error message similar to the one in the image below. This is because, despite there being a valid offer available, you have configured the node to hide the Pay Monthly selector resulting in an unhandled error message.

   

   Note that is just an example scenario to showcase a potential wrong configuration and should be avoided outside this example.