---
title: "[LEGACY] From Pricing and Information Modal"
slug: "from-pricing-and-information-modal-legacy"
updated: 2026-03-19T03:54:57Z
published: 2026-03-19T03:54:57Z
canonical: "developer.upgrade.com/from-pricing-and-information-modal-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] From Pricing and Information Modal
### Overview
- If you **have not started implementing From Pricing yet**, please refer to [From Pricing and Information Modal](/v1/docs/from-pricing-and-information-modal-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)
Flex Pay's SDK will enable **“Pay Monthly”** messaging and pricing to be shown throughout the consumer purchase funnel in order to increase awareness and conversion. It does this using **Pricing Nodes** which are HTML elements showcasing the Pay Monthly Offer to the customer as an alternative payment method. An example of a Pricing Node is as shown below.
 The Pricing Node is composed of 3 required elements:
- “From” wording
- Pay Monthly Offer
- Information icon
Additionally, by clicking a Pricing Node (Pay Monthly Offer), an **Informational Modal** will be automatically shown to the consumer. This modal provides important product, consumer financial and regulatory information. An example of such a modal as shown below.
### Styling Guidelines
The From Pricing should always be positioned immediately next to or under total prices, below are sample layouts:
**Styling** guidelines are as follows:
1. From Pricing (i.e. “$XX/mo”) to reflect a hyperlinked state so users know it’s clickable on a hover action (applies to all placements of From Pricing)
2. Link color and text colour must pass WCAG AA color contrast
3. From pricing is no larger than 80% of the price font size (e.g. if the price font size is 24px, the From Pricing is no larger than 19px)
4. From pricing style should match the price style:
1. If the price is “$900”, the from pricing is “$81”
2. If the price is “$900 USD”, the from pricing is “$81 USD”
5. Feel free to customize the info icon that best matches your website
**Alignment** related compliance guidelines are as follows:
1. “from” must be on the same line as the price “$xx/mo ”
2. “or” can be on a separate line above “from $xx/mo ”
3. The icon must also be present after and on the same line as the From Pricing
4. When the pricing is shown as an additional cost, use “or add from $xx/mo ” or "or from +$xx/mo "
1. “or add” can be on a separate line above “from $xx/mo ”
5. For the total price at Payment Page from pricing can be displayed as “or Pay Monthly from $xx/mo ”
1. “from” must be right beside “$xx/mo ”
### Configuration
In order to configure Flex Pay’s Monthly Pricing Nodes as mentioned above, add the **hidden Pay Monthly** nodes wherever the offers are to be displayed using the HTML code as shown below.
```
or from
/mo
```
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
```
📘 Key callout for the From Pricing node
- The input to `data-up-price-value` should be **updated to be dynamic** in order to reflect the specific option being viewed by your customers
- `data-up-price-value` **should be cents**; if you don’t convert the price to cents you will see a mismatch between offers
- `display` **should be set as none**; you don’t have to handle when to show or display an offer since the Flex Pay API will handle this for you
⚠️**WARNING**: Please note that any request exceeding 500 nodes will be truncated. Ensure you add no more than 500 From Pricing nodes per page.
⚠️**WARNING**: It is vital to follow the HTML structure as above, or the Flex Pay API won’t work as expected.
Note that once the Pay Monthly Nodes have been configured, a single call of the `window.Uplift.Payments.load(orderInfo)` method will fetch and display the Pay Monthly pricing (offers) for each node as per their respective `data-up-price-value` attribute.
Thus, it is the **best recommended practice** to configure all Pay Monthly nodes with the updated `data-up-price-value` attribute (not fixed amounts), followed by a single `window.Uplift.Payments.load(orderInfo)` call to create and attach the updated offers on all the nodes.
As mentioned above, when a customer clicks on the Pay Monthly offer, an **information modal** as will be displayed; Let’s review the different attributes of this modal in the image below:
**Note: “at checkout”** messaging in the informational modal is dependent on whether the [library was initialized](/v1/docs/step-2-initialize-uplift-payments) as a payment or non-payment page. Specifically “at checkout”, will only be shown on non-payment pages.
📘 In order to **configure the Information Modal to have the most relevant messaging to increase awareness for your customers**, please refer to the information [here](/v1/docs/from-pricing-and-information-modal-configurations).
### French Translations
Please use the following image as reference if you require a French translation for the Flex Pay From Pricing messaging.
