--- title: "From Pricing and Information Modal" slug: "from-pricing-and-information-modal" updated: 2026-04-14T02:41:54Z published: 2026-04-14T02:41:54Z canonical: "developer.upgrade.com/from-pricing-and-information-modal" --- > ## 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 ## 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](/v1/docs/from-pricing-and-information-modal) **Migration Instructions:** [From Pricing v2 Migration](/v1/docs/from-pricing-v2-migration) 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. ``` ``` 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 | Benefit | Description | | --- | --- | | **Zero markup maintenance** | SDK owns the internal HTML - no nested spans to manage | | **Shadow DOM isolation** | Component styles never leak to or from your page | | **Automatic offer updates** | One `load(orderInfo)` call refreshes all components on the page | | **Built-in request batching** | Multiple components are served efficiently with deduplicated API calls | | **Integrated modal and tooltip** | Click/hover behavior wired automatically through the PaymentJS bridge | | **Built-in i18n** | 10+ locales supported, currency formatting included | | **WCAG 2.1 AA** | Keyboard support, focus management, ARIA attributes, `lang` attributes | ## Prerequisites Complete these SDK integration steps before placing components: 1. [Step 1: Load Flex Pay Payments](https://uplift-docs.document360.io/docs/step-1-load-flex-pay-payments-v2) - adds `up.js` and registers the component 2. [Step 2: Initialize Flex Pay Payments](https://uplift-docs.document360.io/docs/step-2-initialize-flex-pay-payments-v2) - configures locale, currency, and page context 3. [Step 3: Send Order Details](https://uplift-docs.document360.io/docs/step-3-send-order-details-to-flex-pay-v2) - 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) ``` ``` ### With Optional Enhancements ``` ``` Promotional badges are shown by default when the backend returns promos. Use `promo-disabled="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: ``` ``` ``` // 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 ## Tooltip The built-in tooltip appears on hover or click over the info icon: | Attribute | Default | Options | | --- | --- | --- | | `tooltip-disabled` | `Account config` | `"true"`, `"false"` | | `tooltip-position` | `"top"` | `"top"`, `"bottom"` | | `tooltip-events` | `"hover"` | `"hover"`, `"click"`, `"both"` | | `tooltip-trigger-on-icon` | `"false"` | `"true"`, `"false"` | ## 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; --fp-promo-color: #ccc; --fp-promo-font-size: 12px; --fp-promo-font-weight: 400 } ``` Or inline: ``` ``` For the full list of available properties (including promo styling), see [Configurations](https://uplift-docs.document360.io/docs/from-pricing-and-information-modal-configurations-v2). ## Internationalization Locale and currency are set once during [initialization](https://uplift-docs.document360.io/docs/step-2-initialize-flex-pay-payments-v2) 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 `CustomEvent`s that bubble through the Shadow DOM: | Event | Payload | When | | --- | --- | --- | | `component-ready` | `{ productId, price }` | Component initialized | | `render-success` | - | Render completes | | `render-error` | `{ error }` | Render fails | | `open-modal` | `{ productId, price, monthlyPayment, locale }` | Modal opens | | `close-modal` | - | Modal closes | ``` 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 | Issue | Cause | Solution | | --- | --- | --- | | Component not rendering | `up.js` not loaded | Verify [Step 1](https://uplift-docs.document360.io/docs/step-1-load-flex-pay-payments-v2) completed | | Pricing not updating | `load(orderInfo)` not called | Call `window.Uplift.Payments.load(orderInfo)` after order changes | | Tooltip not showing | `tooltip-disabled="true"` | Set `tooltip-enabled="false"` | | Wrong currency format | Mismatched locale/currency | Align attributes with `init()` config | | Component hidden | Price below minimum with default `price-type` | Check minimum order threshold for `total` pricing behavior | | No error shown when unavailable | `show-error` defaults to `"false"` | Set `show-error="true"` to display the error state with tooltip | ## Next Steps - **Full attribute reference:** [From Pricing Configurations](https://uplift-docs.document360.io/docs/from-pricing-and-information-modal-configurations-v2) - **Payment page selectors:** [Pay Monthly Selectors](https://uplift-docs.document360.io/docs/pay-monthly-selectors-v2)