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
Migration Instructions: 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 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 |
|---|---|---|
| string | Price in cents (e.g., |
<up-from-pricing price-value="30000"></up-from-pricing>
Price Types
price-type determines the modal header text and visibility behavior.
Attribute | Type | Default | Description |
|---|---|---|---|
| string |
| Price category - determines modal header and visibility rules |
<up-from-pricing price-value="30000" price-type="hotel_option"></up-from-pricing>
Value | Header Text | Use Case |
|---|---|---|
| Travel: Book Now. Pay over time. Retail: Buy now. Pay over time. | Default value |
| Book the best location | Hotel search result, room selection |
| Travel when you want | Outbound flight search, fare class |
| Travel when you want | Return flight search, fare class |
| Take the cruise of a lifetime | Cruise search, itinerary, cabin selection |
| See more. Do more | Activity/ticket search, seat selection |
| Upgrade to the car you want | Vehicle rental search results |
| Travel worry free | Insurance add-on |
| 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 |
|---|---|---|---|
| string |
|
|
| string |
|
|
| string |
|
|
| string |
|
|
Locale & Currency
Locale and currency are configured during initialization and automatically apply to all <up-from-pricing> components, tooltips, and modals on the page.
Setting | Configured In | Options |
|---|---|---|
|
|
|
|
|
|
Display Options
These attributes control how the price is displayed within the component:
Attribute | Type | Default | Options |
|---|---|---|---|
| string | Auto | Override symbol (e.g., |
| string |
|
|
Branding
Attribute | Type | Default | Options |
|---|---|---|---|
| boolean |
|
|
| string |
|
|
| string | Default SVG | Custom SVG string |
Promotions
Attribute | Type | Default | Description |
|---|---|---|---|
| string |
| Hide promotional badges even when promos are returned by backend |
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 for the full promo reference including display text and campaign-based targeting.
Modal
Attribute | Type | Default | Options |
|---|---|---|---|
| string | - | Comparison display configuration |
| string |
|
|
Tooltip
Attribute | Type | Default | Options |
|---|---|---|---|
| string |
|
|
| string |
|
|
| string |
|
|
| string |
|
|
Error Handling
Attribute | Type | Default | Description |
|---|---|---|---|
| string |
| Show error message instead of hiding the component on error |
The show-error attribute controls the component behavior when an offer is unavailable:
| Offer available | Offer unavailable |
|---|---|---|
| Renders monthly pricing | Component hides itself |
| Renders monthly pricing | Renders "NOT AVAILABLE" with error tooltip showing the reason |
For Pay Monthly Selectors 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 |
|---|---|
| Font family |
| Base font size |
| Normal font weight |
| Bold font weight |
| Price text color |
| Info icon size |
| Spacing between elements |
| Flex justify-content value |
| Promo Text color |
| Promo Font size |
| Promo Font weight |
| Promo line height |
Example
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 |
| |
Flights |
| |
Cruises |
| |
Events |
| |
Rentals |
| |
Passes |
| |
Campaigns |
|
Example
<up-from-pricing
price-value="30000"
price-type="hotel_option"
details-hotel_reservations-0-hotel_name="Grand Hotel"
details-hotel_reservations-0-check_in="20260315"
></up-from-pricing>
For the complete field list, see Resource Objects.