---
title: "From Pricing and Information Modal Configurations"
slug: "from-pricing-and-information-modal-configurations"
updated: 2026-09-23T21:15:55Z
published: 2026-09-23T21:15:55Z
canonical: "developer.upgrade.com/from-pricing-and-information-modal-configurations"
---
> ## 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.
# From Pricing and Information Modal Configurations
## Overview
- If you are implementing From Pricing for the **first time**, you are in the right section! On this page you will find instructions for our **new** SDK version
- If you have implemented From Pricing **previously**, please note these are instructions for our newest SDK version. **Legacy Instructions:** [[LEGACY] From Pricing and Information Modal Configurations](/v1/docs/from-pricing-and-information-modal-configurations) **Migration Instructions:** [From Pricing v2 Migration](/v1/docs/from-pricing-v2-migration)
This page is your go-to reference for every attribute, styling option, and price-type available on the `<up-from-pricing>` component. Use it alongside the [From Pricing overview and quick start](https://uplift-docs.document360.io/docs/from-pricing-and-information-modal-v2) to fine-tune behavior, appearance, and promotions with minimal effort.
## Required Attribute
Every `<up-from-pricing>` element must include these two attributes:
| Attribute | Type | Description |
| --- | --- | --- |
| `price-value` | string | Price in **cents** (e.g., `"30000"` = $300.00) |
```plaintext
```
## Price Types
`price-type` determines the modal header text and visibility behavior.
| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `price-type` | string | `"total"` | Price category - determines modal header and visibility rules |
```plaintext
```
| Value | Header Text | Use Case |
| --- | --- | --- |
| `total` | **Travel:** Book Now. Pay over time. **Retail:** Buy now. Pay over time. | Default value |
| `hotel_option` | Book the best location | Hotel search result, room selection |
| `departure_option` | Travel when you want | Outbound flight search, fare class |
| `return_option` | Travel when you want | Return flight search, fare class |
| `cruise_option` | Take the cruise of a lifetime | Cruise search, itinerary, cabin selection |
| `activity_option` | See more. Do more | Activity/ticket search, seat selection |
| `car_option` | Upgrade to the car you want | Vehicle rental search results |
| `insurance` | Travel worry free | Insurance add-on |
| `addon_option` | **Travel:** Upgrade and Make it the trip of a lifetime **Retail:** Upgrade your purchase today | Ancillaries (baggage, meals, seats) |
**Visibility rule:** `price-type="total"` is gated by the minimum order value configured for your integration. All other types always display to increase awareness.
📘 Header text and images can be customized per partner. Contact your Account Manager for details.
## Layout & Display
| Attribute | Type | Default | Options |
| --- | --- | --- | --- |
| `layout` | string | `"horizontal"` | `"horizontal"`, `"vertical"` |
| `align` | string | `"start"` | `"start"`, `"center"`, `"end"`, `"space-between"` |
| `context` | string | `"default"` | `"default"`, `"payment_page"`, `"pay_monthly_selector"` |
| `wording-qualifier` | string | `"from"` | `"as low as"`, `"from"` |
## Locale & Currency
Locale and currency are configured during [initialization](https://uplift-docs.document360.io/docs/step-2-initialize-flex-pay-payments-v2) and automatically apply to all `<up-from-pricing>` components, tooltips, and modals on the page.
| Setting | Configured In | Options |
| --- | --- | --- |
| `locale` | `init()` | `"en-US"`, `"en-CA"`, `"fr-CA"`, `"fr-FR"` |
| `currency` | `init()` | `"USD"`, `"CAD"`, `"EUR"` |
### Display Options
These attributes control how the price is displayed within the component:
| Attribute | Type | Default | Options |
| --- | --- | --- | --- |
| `currency-symbol` | string | Auto | Override symbol (e.g., `"€"`, `"CA$"`) |
| `show-currency-suffix` | string | `"false"` | `"true"`, `"false"` |
## Branding
| Attribute | Type | Default | Options | Additional Notes |
| --- | --- | --- | --- | --- |
| `show-logo` | boolean | `"false"` | `"true"`, `"false"` | If show-logo is set to "true", Flex Pay logo shows after monthly price .png) If show-logo is set to “false”, the Flex Pay logo does not show after monthly price .png) |
| `logo-type` | string | `"standard"` | `"standard"`, `"monochrome"` | Standard: .png) Monochrome: .png) **only for dark backgrounds* |
| `info-icon` | string | Default SVG | Custom SVG string | Default info icon for Flex Pay infomodal .png) |
## Promotions
| Attribute | Type | Default | Description | Additional Notes |
| --- | --- | --- | --- | --- |
| `promo-disabled` | string | `"false"` | Hide promotional badges even when promos are returned by backend | Displays Promotional Messaging along with From Pricing placement when a Promotional Campaign is active on the backend .png) *promo-disabled=false* .png) *promo-disabled=true* |
Behavior:
- By default, promo badges are shown when backend promos are available.
- Set `promo-disabled="true"` to suppress promo badges for a specific component.
When the backend returns `pay_today === 0`, the SDK automatically injects an internal `zero-down` signal for the modal/tooltip layer. Visible "$0 today" badges require the backend to return `zero-down-guaranteed` or `zero-down-variable` in the offer.
See [Promotional Financing](https://uplift-docs.document360.io/docs/promotional-financing-v2) for the full promo reference including display text and campaign-based targeting.
## Modal
| Attribute | Type | Default | Options |
| --- | --- | --- | --- |
| `modal-comparison-type` | string | - | Comparison display configuration |
| `modal-enable-estimator-tool` | string | `"false"` | `"true"`, `"false"` |
## Tooltip
| Attribute | Type | Default | Options |
| --- | --- | --- | --- |
| `tooltip-disabled` | string | `Account level configuration` | `"true"`, `"false"` |
| `tooltip-position` | string | `"top"` | `"top"`, `"bottom"` |
| `tooltip-events` | string | `"hover"` | `"hover"`, `"click"`, `"both"` |
| `tooltip-trigger-on-icon` | string | `"false"` | `"true"`, `"false"` |
## Error Handling
| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `show-error` | string | `"false"` | Show error message instead of hiding the component on error |
The `show-error` attribute controls the component behavior when an offer is unavailable:
| `show-error` | Offer available | Offer unavailable |
| --- | --- | --- |
| `"false"` (default) | Renders monthly pricing | Component hides itself |
| `"true"` | Renders monthly pricing | Renders "NOT AVAILABLE" with error tooltip showing the reason |
For [Pay Monthly Selectors](https://uplift-docs.document360.io/docs/pay-monthly-selectors-v2) on payment pages, use `show-error="true"` so customers can see why Pay Monthly is not available instead of the component disappearing.
## CSS Custom Properties
Style the component using CSS Custom Properties applied to the element or an ancestor.
### Typography & Layout
| Property | Description |
| --- | --- |
| `--fp-font-family` | Font family |
| `--fp-font-size` | Base font size |
| `--fp-font-weight` | Normal font weight |
| `--fp-font-weight-bold` | Bold font weight |
| `--fp-price-color` | Price text color |
| `--fp-icon-size` | Info icon size |
| `--fp-gap` | Spacing between elements |
| `--fp-justify-content` | Flex justify-content value |
| `--fp-promo-color` | Promo Text color |
| `--fp-promo-font-size` | Promo Font size |
| `--fp-promo-font-weight` | Promo Font weight |
| `--fp-promo-line-height` | Promo line height |
### Example
```css
up-from-pricing {
--fp-font-family: 'Inter', sans-serif;
--fp-font-size: 14px;
--fp-font-weight-bold: 700;
--fp-price-color: #0066cc;
--fp-icon-size: 1rem;
--fp-gap: 0.25rem;
}
```
## Order Details (details-* attributes)
📘 Order details are typically sent once via load(orderInfo) and apply to all components on the page.
Use `details-*` attributes only when a specific `<up-from-pricing>` component needs additional context beyond the main order - for example, when displaying pricing for individual hotel rooms within a search results page.
### Supported Resources
| Resource | Prefix | Reference |
| --- | --- | --- |
| Hotels | `details-hotel_reservations-0-*` | [Hotel Schema](https://uplift-docs.document360.io/docs/resource-objects#hotelspecific) |
| Flights | `details-air_reservations-0-*` | [Air Schema](https://uplift-docs.document360.io/docs/resource-objects#airspecific) |
| Cruises | `details-cruise_reservations-0-*` | [Cruise Schema](https://uplift-docs.document360.io/docs/resource-objects#cruisespecific) |
| Events | `details-event_tickets-0-*` | [Event Schema](https://uplift-docs.document360.io/docs/resource-objects#eventticketspecific) |
| Rentals | `details-rentals-0-*` | [Rental Schema](https://uplift-docs.document360.io/docs/resource-objects#rentalspecific) |
| Passes | `details-passes_subscription-0-*` | [Passes Schema](https://uplift-docs.document360.io/docs/resource-objects#passessubscriptionspecific) |
| Campaigns | `details-campaigns-0-*` | [Campaign Schema](https://uplift-docs.document360.io/docs/resource-objects#campaignobject) |
### Example
```plaintext
```
For the complete field list, see [Resource Objects](https://uplift-docs.document360.io/docs/resource-objects).
## Related Pages
- [From Pricing Overview and Quick Start](https://uplift-docs.document360.io/docs/from-pricing-and-information-modal-v2)
- [Pay Monthly Selectors](https://uplift-docs.document360.io/docs/pay-monthly-selectors-v2)