From Pricing and Information Modal

Overview

From Pricing is a web component (<up-from-pricing>) that displays "from $X/mo" messaging anywhere on your site. It renders inside Shadow DOM, so the SDK owns the markup, styles, and behavior - you just place the element and provide business inputs.

One element. One required attribute. That is all it takes.

<up-from-pricing
  price-value="30000"
></up-from-pricing>

If price-type is omitted, the component defaults to total.

After window.Uplift.Payments.load(orderInfo) executes, this renders something like:

or from $25/mo ℹ️

Clicking or interacting with the component opens an Information Modal with offer details, compliance disclosures, and financing terms - all managed by the SDK.

Key Benefits

Prerequisites

Complete these SDK integration steps before placing components:

1. Step 1: Load Flex Pay Payments - adds up.js and registers the component
2. Step 2: Initialize Flex Pay Payments - configures locale, currency, and page context
3. Step 3: Send Order Details - calls load(orderInfo) to fetch offers

Once these are done, any <up-from-pricing> element on the page will render with the correct offer.

Quick Start

Minimal (one required attribute)

<up-from-pricing
  price-value="30000"
></up-from-pricing>

With Optional Enhancements

<up-from-pricing
  price-value="190000"
  price-type="total"
  layout="horizontal"
  tooltip-enabled="true"
  modal-enabled="true"
></up-from-pricing>

Promotional badges are shown by default when the backend returns promos.
Use hide-promos="true" only when you explicitly want to suppress promo badges.

Dynamic Price Updates

Each <up-from-pricing> component calculates its monthly payment based on its price-value attribute. When a price changes on your page - for example, the user selects a different room or adds an extra - simply update the attribute:

// User selected a more expensive room
document.querySelector('#room-pricing').setAttribute('price-value', '45000');

The SDK automatically detects the change and fetches a new offer. No additional API calls required.

Multiple components: Use unique identifiers to target the right element:

<up-from-pricing id="room-pricing" price-value="30000" price-type="hotel_option"></up-from-pricing>
<up-from-pricing id="insurance-pricing" price-value="5000" price-type="addon_option"></up-from-pricing>

// Update only the room price
document.querySelector('#room-pricing').setAttribute('price-value', '45000');

// Update only the insurance price
document.querySelector('#insurance-pricing').setAttribute('price-value', '7500');

Tip: The global order context (traveler info, dates, locale) is set once via load(orderInfo). You only need to call load() again if that context changes - not when individual prices update.

Placement Guidelines

Position <up-from-pricing> immediately next to or below the associated price.

Common placements:

• Search results (next to each itinerary/product price)
• Product detail pages (below the main price)
• Cart/summary (next to line items and/or totals)
• Payment page (inside the Pay Monthly selector)

The component adapts its layout based on the layout and align attributes. Use layout="horizontal" for inline placements and layout="vertical" for stacked layouts.

Information Modal

When users click or interact with the pricing text or info icon, the SDK requests the information modal through the PaymentJS bridge. The modal displays:

• Offer details (monthly payment, term, APR)
• Compliance and regulatory disclosures
• Campaign-specific messaging

Modal behavior depends on page context set during initialization:

• Non-payment pages (checkout: false): shows "at checkout" messaging to drive conversion
• Payment pages (checkout: true): shows checkout-context messaging

Control modal behavior with attributes:

Tooltip

The built-in tooltip appears on hover or click over the info icon:

Styling with CSS Custom Properties

The component exposes CSS Custom Properties that pierce the Shadow DOM boundary:

up-from-pricing {
  --fp-font-family: 'Inter', sans-serif;
  --fp-font-size: 14px;
  --fp-font-weight: 400;
  --fp-font-weight-bold: 700;
  --fp-price-color: #0066cc;
  --fp-icon-size: 1rem;
  --fp-gap: 0.25rem;
}

Or inline:

<up-from-pricing
  price-value="30000"
  price-type="total"
  style="--fp-font-size: 14px; --fp-price-color: #0066cc;"
></up-from-pricing>

For the full list of available properties (including promo styling), see Configurations.

Internationalization

Locale and currency are set once during initialization and apply automatically to all <up-from-pricing> components, tooltips, and modals on the page.

window.Uplift.Payments.init({
  locale: "fr-CA",
  currency: "CAD",
  // ...
});

Supported locales: en-US, en-CA, fr-CA, fr-FR, fr-BE, de-DE, es-ES, it-IT, nl-NL, nl-BE, pt-PT

Supported currencies: USD, CAD, EUR

The SDK automatically:

• Translates wording ("or from" -> "ou a partir de")
• Formats currency per locale conventions
• Sets lang attribute for screen readers (WCAG 3.1.1)

Events

The component dispatches CustomEvents that bubble through the Shadow DOM:

document.addEventListener('component-ready', (e) => {
  console.log('From Pricing ready:', e.detail);
});

Verification

After completing Steps 1-3, confirm the component works:

1. Add <up-from-pricing price-value="30000" price-type="total"></up-from-pricing> to your page
2. Open DevTools Console - confirm no errors
3. Verify the monthly price renders correctly
4. Click the component to confirm the modal opens

// Verify the component is registered
customElements.get('up-from-pricing');

Troubleshooting

Next Steps

• Full attribute reference: From Pricing Configurations
• Payment page selectors: Pay Monthly Selectors