[NEW] From Pricing v2 Migration

Overview

If you already have V1 From Pricing integrated, this migration is straightforward.

Migration effort: Low - Replace HTML markup.

You do not need to redesign your checkout flow. In most cases, this is a front-end update from legacy data-up-* nodes to the V2 <up-from-pricing> component.

By the end of this guide, you will have:

• migrated V1 HTML nodes to V2 web components
• removed legacy display/toggling logic
• validated available and unavailable scenarios

What This Guide Covers

This page is intentionally focused on migration execution:

• how to identify V1 nodes
• how to replace them with V2
• how to migrate styling safely
• how to validate before release

Before You Start (2 Minutes)

Confirm these prerequisites first:

1. Step 1: Load Flex Pay payments is active on the page
2. Step 2: Initialize Flex Pay payments is configured correctly
3. Step 3: Send order details calls window.Uplift.Payments.load(orderInfo)

Quick Migration

Before (V1)

<span style="display:none; cursor: pointer"
      data-up-price-value="190000"
      data-up-price-type="total">
  or from
  <span data-up-from-currency-unit-major=""></span>/mo
  <div data-up-tooltip="">
    <svg><!-- info icon --></svg>
  </div>
</span>

After (V2)

<up-from-pricing
  price-value="190000"
  tooltip-enabled="true"
></up-from-pricing>

Step-by-Step Migration

Identify V1 Nodes

Search your codebase for:

data-up-price-value
data-up-price-type
data-up-from-currency-unit-major
data-up-tooltip
data-up-promo
data-up-details-

Replace Each Node with V2

For each V1 node:

1. Copy data-up-price-value (required)
2. Copy data-up-price-type only when needed (non-default)
3. Copy any data-up-details-* attributes
4. Replace the whole node with:

<up-from-pricing
  price-value="EXTRACTED_PRICE_VALUE"
  tooltip-enabled="true"
></up-from-pricing>

Walk Through One Real Node (HTML + CSS)

A) Start from V1

<span style="display:none; cursor: pointer"
      data-up-price-value="257600"
      data-up-price-type="hotel_option"
      data-up-details-hotel_reservations-0-hotel_name="Grand Hotel">
  or from
  <span data-up-from-currency-unit-major=""></span>/mo
  <div data-up-tooltip="">
    <svg><!-- info icon --></svg>
  </div>
</span>

B) Keep only migration values

• price-value="257600"
• price-type="hotel_option"
• details-hotel_reservations-0-hotel_name="Grand Hotel"

Remove V1-only markup:

• data-up-from-currency-unit-major
• nested tooltip/icon HTML
• wrapper wording markup (or from ... /mo)

C) Rebuild as V2

<up-from-pricing
  price-value="257600"
  price-type="hotel_option"
  tooltip-enabled="true"
  details-hotel_reservations-0-hotel_name="Grand Hotel"
></up-from-pricing>

D) Migrate CSS

/* V1 selector-based styling */
[data-up-price-value] span {
  color: #0066cc;
  font-size: 14px;
}

/* V2 component styling */
up-from-pricing {
  --fp-price-color: #0066cc;
  --fp-font-size: 14px;
}

E) Validate this node

1. Monthly value renders and is not blank
2. Tooltip opens (if tooltip-enabled="true")
3. CSS custom properties are visible
4. No V1 markup remains for this node

Repeat A -> E for each node on the page.

Remove Legacy Display Logic

V1 integrations usually had two UI paths:

1. show the monthly node when offers were available
2. show a separate "NOT AVAILABLE" node when offers were unavailable

In V2, this is handled by a single <up-from-pricing> component.

What to remove

• style="display:none" on legacy From Pricing nodes
• separate up-offer-not-available spans
• callback code that manually toggles those two elements

What to keep

• your onChange callback for business logic, analytics, and logs
• your pricing updates (price-value / load(orderInfo) flow)

Before (V1 UI split)

<span id="up-pay-monthly-selector-from-pricing" style="display:none" data-up-price-value="70000" data-up-price-type="total">
  ...
</span>
<span id="up-offer-not-available" data-up-error="" style="display:none">
  NOT AVAILABLE
</span>

if (response.status === "OFFER_AVAILABLE") {
  document.getElementById("up-pay-monthly-selector-from-pricing").style.display = "block";
  document.getElementById("up-offer-not-available").style.display = "none";
}

if (response.status === "OFFER_UNAVAILABLE") {
  document.getElementById("up-pay-monthly-selector-from-pricing").style.display = "none";
  document.getElementById("up-offer-not-available").style.display = "block";
}

After (V2 single-node behavior)

<up-from-pricing
  price-value="70000"
  tooltip-enabled="true"
  show-error="true"
></up-from-pricing>

// Keep callback logic, remove UI display toggling
if (response.status === "OFFER_UNAVAILABLE") {
  // You can still use to disable a button or apply your own logic
}

Validate by Scenario

Scenario A: Offer Available

1. Use a qualifying price-value
2. Confirm monthly pricing renders
3. Confirm tooltip/modal interactions work
4. Confirm no legacy V1 pricing node remains for this placement

Scenario B: Offer Unavailable

1. Use a non-qualifying price-value (or unavailable test case)
2. With default behavior (show-error="false"), confirm the node hides
3. With show-error="true", confirm "NOT AVAILABLE" and error tooltip render

Definition of Done

• No data-up-price-*, data-up-tooltip, or data-up-from-currency-unit-major remains on migrated nodes
• All migrated nodes render valid monthly values
• Tooltip/modal behavior works on desktop and mobile
• Legacy show/hide JavaScript for From Pricing is removed
• No console errors related to <up-from-pricing> attributes

Common Migration Issues

Support

• From Pricing and Information Modal
• From Pricing Configurations
• Pay Monthly Selectors
• Contact your Flex Pay Account Manager for migration support