---
title: "From Pricing v2 Migration"
slug: "from-pricing-v2-migration"
updated: 2026-04-14T03:10:42Z
published: 2026-04-14T03:10:42Z
canonical: "developer.upgrade.com/from-pricing-v2-migration"
---

> ## 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 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

📘 This page is **not** a full attribute catalog. Use these references when you need deep configuration details:

- [From Pricing and Information Modal](https://uplift-docs.document360.io/docs/from-pricing-and-information-modal-v2)
- [From Pricing Configurations](https://uplift-docs.document360.io/docs/from-pricing-and-information-modal-configurations-v2)

## Before You Start (2 Minutes)

Confirm these prerequisites first:

1. [Step 1: Load Flex Pay payments](https://uplift-docs.document360.io/docs/step-1-load-flex-pay-payments-v2) is active on the page
2. [Step 2: Initialize Flex Pay payments](https://uplift-docs.document360.io/docs/step-2-initialize-flex-pay-payments-v2) is configured correctly
3. [Step 3: Send order details](https://uplift-docs.document360.io/docs/step-3-send-order-details-to-flex-pay-v2) calls `window.Uplift.Payments.load(orderInfo)`

⚠️ If these are not ready, complete the integration flow first, then return to this guide.

## 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"
></up-from-pricing>
```

📘 If `price-type` is omitted, V2 defaults to `total`.

## 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"
></up-from-pricing>
```

📘 Use `price-type` only when the node is tied to a non-default placement (for example `hotel_option`, `cruise_option`, `addon_option`). For the full list of available attributes and defaults, see [From Pricing Configurations](https://uplift-docs.document360.io/docs/from-pricing-and-information-modal-configurations-v2).

### 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"
  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;
}
```

📘 For all style tokens and display options, see [From Pricing Configurations](https://uplift-docs.document360.io/docs/from-pricing-and-information-modal-configurations-v2). For practical styling examples in context, see [From Pricing and Information Modal](https://uplift-docs.document360.io/docs/from-pricing-and-information-modal-v2).

#### E) Validate this node

1. Monthly value renders and is not blank
2. Tooltip opens (if enabled on account level unless `tooltip-disabled="true"` is set)
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 `&lt;up-from-pricing&gt;` component.

⚠️ Remove all manual show/hide logic for From Pricing nodes. V2 handles visibility automatically through Shadow DOM.

#### 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"
  context="pay_monthly_selector"
></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
}
```

📘 With V2, the component controls visibility and error rendering automatically. Use `show-error="true"` or `context="pay_monthly_selector" ` to display "NOT AVAILABLE" with an error tooltip when offers are unavailable.

### 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"` or  confirm "NOT AVAILABLE" and error tooltip render

📘 If your placement is in a payment selector, review [Pay Monthly Selectors](https://uplift-docs.document360.io/docs/pay-monthly-selectors-v2) for expected unavailable behavior.

## 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 `&lt;up-from-pricing&gt;` attributes

## Common Migration Issues

| Issue | Cause | Solution |
| --- | --- | --- |
| Component not visible | Missing or stale `price-value` | Ensure `price-value` updates when price changes |
| Wrong monthly amount | Value not in cents | Convert to cents before rendering |
| Tooltip missing | `tooltip-disabled` being added | Add `tooltip-disabled="false"` |
| Promo badge not showing | Promo code mismatch with backend payload | Use valid V2 promo variants returned by backend |
| Unavailable state not rendered | `show-error` not enabled | Add `show-error="true"` where needed |
| Old unavailable span still in DOM | Incomplete V1 cleanup | Remove legacy span and toggling logic |

## Support

- [From Pricing and Information Modal](https://uplift-docs.document360.io/docs/from-pricing-and-information-modal-v2)
- [From Pricing Configurations](https://uplift-docs.document360.io/docs/from-pricing-and-information-modal-configurations-v2)
- [Pay Monthly Selectors](https://uplift-docs.document360.io/docs/pay-monthly-selectors-v2)
- Contact your Flex Pay Account Manager for migration support