---
title: "[LEGACY] Pay Monthly Selectors"
slug: "pay-monthly-selectors-legacy"
updated: 2026-03-19T03:55:27Z
published: 2026-03-19T03:55:27Z
canonical: "developer.upgrade.com/pay-monthly-selectors-legacy"
---
> ## Documentation Index
> Fetch the complete documentation index at: https://developer.upgrade.com/llms.txt
> Use this file to discover all available pages before exploring further.
# [LEGACY] Pay Monthly Selectors
### Overview
📘 Note this section is only relevant for payment pages
- If you **have not started implementing From Pricing yet**, please refer to [Pay Monthly Selectors](/v1/docs/pay-monthly-selectors-v2) which is our **newest** SDK documentation.
- If you **have implemented From Pricing already**, you can refer to the legacy documentation below for support or review our new SDK documentation for an enhanced implementation
Migration Instructions: [From Pricing v2 Migration](/v1/docs/from-pricing-v2-migration)
The Pay Monthly Selector is an embeddable HTML element that will allow the user to select Flex Pay as their preferred method of payment during payment flow. It is required that selectors display up-to-date prices to allow the customer to better differentiate among the different payment methods. Below is an example of such an element.
Note that if your website doesn’t already contain Payment Selectors for different payment methods, then you will need to implement this capability to allow customers to select their preferred payment method. However, if your flow already contains the Payment Selector component, you can simply add Uplift as a new option of payment in your current HTML structure as in the example below.
The Pay Monthly Selector is composed of 3 required elements as shown in the image below.
- Pay Monthly Selector Container
- “Pay Monthly” wording
- From Pricing Node
When a Pay Monthly Selector is clicked, a window containing the Flex Pay application (which is the Flex Pay iFrame) is displayed. This section provides details to implement the Pay Monthly Selector; you can find additional details on the iFrame functionality [here](/v1/docs/step-5-setup-pay-monthly-iframe).
### Configuration
Add the following HTML code snippet to enable a Pay Monthly Selector.
```
Pay Monthly
from
/mo
NOT AVAILABLE
```
We have provided a default tooltip (icon: ), in order to use it just copy the script below and place it in the corresponding spot in the Pay Monthly node script (above).
```
//default svg informational icon
```
📘 On payment pages, while the pop up modal is configured using the `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.
⚠️ It is vital to follow the HTML structure as above or the Flex Pay SDK won’t work as expected.
Key callout for the Pay Monthly Selector:
- **Display should be set as none** for `up-pay-monthly-selector-from-pricing` and `up-offer-not-available` spans keep “display” set as none; we will be reviewing how to handle showing and hiding this with the Uplift iFrame setup in the following step by step guide
- `data-up-price-value` **should be cents**; if you don’t convert the price to cents you will see a mismatch between offers
- `data-up-price-type` should be **total**
- `data-up-from-currency-unit-major` is utilized by the Uplift library to populate monthly pricing offers, therefore leave it as shown in code snippet above
- `data-up-comparison-type` should **never be included**
- The `up-pay-monthly-selector` should be always **displayed**
- As you already noticed, there is a **new element**, the `up-offer-not-available` span; this element will be shown to the user when the offer is not available and by hovering over the icon a “reason” will appear
### Styling Guidelines
You can follow any styles and customization that best matches your payment page. However, make sure to validate that the Pay Monthly Selector contains all the required elements mentioned above.
1. When you display the `up-pay-monthly-selector-from-pricing` span, your selector should look as below.
.png)
2. If you hide the up-pay-monthly-selector-from-pricing and display up-offer-not-available, then the selector now looks as below.
.png)
### French translations
Please use the following image as reference if you require a French translation for the Pay Monthly Selectors.
1. Offer Available
2. Offer Unavailable
**Step-by-step Guide (Recommended)**
Note that this testing example is only relevant for a payment page and thus all initialization and other configurations should be set up accordingly.
1. Ensure you have first successfully integrated with Flex Pay including [loading the Uplift Payments library](/v1/docs/step-1-load-uplift-payments), [initializing the library](/v1/docs/step-2-initialize-uplift-payments), [creating an OrderInfo object](/v1/docs/step-3-send-order-details-to-uplift), [loading the object to the Flex Pay platform](/v1/docs/step-3-send-order-details-to-uplift), and [defining the callback handler](/v1/docs/step-4-define-callback-handler) on `myOnChangeCallback`. You can refer to the step-by-step guides in each of the Flex Pay API integration steps to complete this setup.
2. Include the HTML code as shown below to embed the Flex Pay payment option within the payment selector HTML used on your site in order to display Flex Pay as a new payment method.
```
Pay Monthly
from
/mo
NOT AVAILABLE
```
Note we have provided a default icon, if you want use it please refer to the script in the Configuration section above.
3. Then refresh the page, the Payment Selector should look similar to the image shown below.
.png)
4. Now to understand the Payment Selector functionality in more detail, let’s go through some of the potential scenarios:
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.
On **non-payment pages**, the **From Pricing nodes’** `data-up-price-value` attribute determines Flex Pay’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.
.png)
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.