---
title: "Pre-Qualification Tool"
slug: "pre-qualification-tool"
updated: 2026-03-16T17:42:59Z
published: 2026-03-16T17:46:18Z
canonical: "developer.upgrade.com/pre-qualification-tool"
---

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

# Pre-Qualification Tool

📘 The Pre-Qualification tool is not available by default. Contact your Account Manager to enable this feature and discuss modal customizations.

## Overview

The Pre-Qualification tool lets customers check their spending eligibility at the start of their shopping journey. With a few inputs, they instantly see a personalized outline of what they can afford — giving them confidence to explore higher-value options.

## How It Works

There are two ways customers can access pre-qualification:

| Entry Point | How It Works |
| --- | --- |
| **Dedicated widget** | Add a `data-up-prequal` element anywhere on the page. Clicking it launches the pre-qualification modal. |

## Dedicated Widget Integration

### 1. Add the HTML Node

Place a hidden element with the `data-up-prequal` attribute wherever you want the pre-qualification entry point. You control the widget design — banners, buttons, or cards that match your site.

```
<div style="display: none" data-up-prequal>
  <!-- Your widget markup: banner, button, card, etc. -->
</div>
```

📘 - The pre-qualification widget is only available on **non-payment pages**.

- The HTML node must be in the DOM **before** you load and initialize the Flex Pay library. It will remain hidden until ready.

### 2. Load and Initialize

📘 If you already completed [Step 1](https://uplift-docs.document360.io/docs/step-1-load-flex-pay-payments-v2) and [Step 2](https://uplift-docs.document360.io/docs/step-2-initialize-flex-pay-payments-v2) for this page, skip ahead to **Step 3** — the SDK is already loaded and initialized.

If this is a standalone page without Flex Pay yet, add the `up.js` script and define the initialization:

`(function (u, p, l, i, f, t, o, b, j) { u['UpLiftPlatformObject'] = f; u[f] = u[f] || function () { (u[f].q = u[f].q || []).push(arguments) }, u[f].l = 1 * new Date(); b = p.createElement(l), j = p.getElementsByTagName(l)[0]; b.async = 1; b.src = i + '?upcode=' + t; j.parentNode.insertBefore(b, j); o = u.location.host.match(/[\w-]+\.\w{2,3}(:\d+)?$/); if (o) o = o[0]; u[f]('create', t, o) })(window, document, 'script', 'https://tag.uplift.com/external/up.js', 'up', 'UP-XXXXXXXX-XX');`

```
function initPayMonthly() {
  window.Uplift.Payments.init({
    locale: "en-US",
    currency: "USD",
    checkout: false,
    channel: "desktop"
  });
}
```

### 3. Show the Widget in `upReady`

Unlike `&lt;up-from-pricing&gt;` components which manage their own visibility, **the pre-qualification widget must be shown manually by the developer**:

```
window.upReady = function() {
  initPayMonthly();
  window.Uplift.Payments.load();

  document.querySelector("[data-up-prequal]").style.display = "block";
}
```

📘 If the page also contains `&lt;up-from-pricing&gt;` components, pass the order data: `window.Uplift.Payments.load(orderInfo)`. If the page only has the pre-qualification widget, call `window.Uplift.Payments.load()` without parameters.

### 4. Verify

Click the widget element. You should see the pre-qualification modal.

Contact your Account Manager to configure the language and messaging in the modal.

After completing pre-qualification, customers see a confirmation screen.

## Callback

You can hook into the pre-qualification flow by passing an `onUserActionCallback` function during initialization:

```
function onUserActionCallback(data) {
  console.log('onUserActionCallback:', data);
}

function initPayMonthly() {
  window.Uplift.Payments.init({
    locale: "en-US",
    currency: "USD",
    checkout: false,
    channel: "desktop",
    onUserActionCallback
  });
}
```

The callback receives `{ action: "continue-shopping" }` when the customer clicks the button on the final screen. Use this to redirect customers, update UI state, or track conversions.

📘 Flex Pay cannot share the outcome of the pre-qualification due to confidentiality requirements. The callback only confirms the user completed the flow.