---
title: "Step 1: Load Flex Pay payments"
slug: "step-1-load-flex-pay-payments"
status: "update"
updated: 2026-09-14T19:01:43Z
published: 2026-09-14T19:01:43Z
canonical: "developer.upgrade.com/step-1-load-flex-pay-payments"
---

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

# Step 1: Load Flex Pay payments

## Overview

Getting started with Flex Pay takes just one script tag. Paste the `up.js` snippet below on any page where you want BNPL functionality and you are ready to go.

That single snippet gives you:

- `window.Uplift.Payments` — the full PaymentJS runtime
- `<up-from-pricing>` — the From Pricing web component, auto-registered and ready to use
- Shadow DOM isolation — your CSS will never break Flex Pay rendering, and vice-versa
- Built-in performance optimizations — request batching, deduplication, and caching are handled for you

No npm installs, no build steps, and no extra configuration files to manage.

## What You Need

| Item | Where to get it |
| --- | --- |
| Your **UP-code** (`UP-XXXXXXXX-XX`) | Provided by your Flex Pay Account Manager before development |
| The correct **environment snippet** | Production or Pre-Production (see below) |

You will receive **two separate UP-codes** — one for testing and one for production. The testing code enables helpful debug messages in the browser console that are suppressed in production.

## Update your Allowlist

Ensure that the following domains are included in your allowlist.

```
https://*.Upgrade.com
https://*.Uplift.com
https://*.FlexPaybyUpgrade.com 
https://*.Uplift-Platform.com
https://*.Learning-Uplift.com 
https://*.Credify.tech
https://*.optimizely.com
https://*.sentry.io
```

## Add the Snippet

Place the snippet on every page where Flex Pay components will appear. This applies to both **payment** and **non-payment** pages.

#### Production

Replace `UP-XXXXXXXX-XX` with your **production** UP-code:

`(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');`

#### Pre-Production

Sample Testing UP-codes

- Travel -> US: **UP-37292414-99**  CA: **UP-37292414-83**
- Retail   -> US: **UP-37292414-94** CA: **UP-37292414-96**

Replace `UP-XXXXXXXX-XX` with your **testing** UP-code:

`(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://carbon.rc01gw.uplift-platform.com/external/up.js', 'up', 'UP-XXXXXXXX-XX');`
⚠ Bundle Unavailable

If `up.js` fails to load (network error, ad-blocker, etc.), all Flex Pay elements remain hidden by default. Your page will render normally without any broken UI.

## What Happens Behind the Scenes

Once the snippet executes:

1. `up.js` loads **asynchronously** — it will not block your page rendering
2. The Flex Pay SDK is exposed as `window.Uplift.Payments`
3. The `<up-from-pricing>` web component is registered automatically
4. The SDK calls `window.upReady` (which you will define in [Step 2](https://uplift-docs.document360.io/docs/step-2-initialize-flex-pay-payments-v2))

At this point `window.upReady` is not yet defined, so you will see `UPREADY? undefined` in the console. That is expected — Step 2 resolves it.

📘 SPA / Single-Page Application note

Ideally, load `up.js` once per page lifecycle. If you need to reload it (for example, after a full route teardown in an SPA), call these cleanup functions first:

`window.Uplift.Payments.clear()` `window.Uplift.Payments.exit()`

**Step-by-step Validation Guide (Recommended)**

    
    

Verify everything works in under 5 minutes:

1. Add the **Pre-Production** snippet to your page using one of the sample testing UP-codes:
  - Travel: US: `UP-37292414-99`  CA: `UP-37292414-83`
  - Retail:  US:  `UP-37292414-94`

`(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://carbon.rc01gw.uplift-platform.com/external/up.js', 'up', 'UP-37292414-99');`

1. Open your browser **Developer Tools** (Console + Network tab).
2. Refresh the page and filter network requests by "Uplift".
3. Confirm these three things:

| What to check | Expected result |
| --- | --- |
| `up.js` network request | `200 OK` |
| `window.Uplift.Payments` | Available (type it in the console) |
| `UPREADY?` console message | `undefined` (expected until Step 2) |

![DP-1](https://cdn.document360.io/ff52d920-99b4-4c2b-9b32-5d5fe9700cb0/Images/Documentation/DP-1.png)

1. Type `window.Uplift.Payments` in the console to confirm the SDK object is loaded:

![DP-2](https://cdn.document360.io/ff52d920-99b4-4c2b-9b32-5d5fe9700cb0/Images/Documentation/DP-2.png)

  

If both checks pass, the SDK is loaded and ready. Continue to [Step 2: Initialize Flex Pay Payments](https://uplift-docs.document360.io/docs/step-2-initialize-flex-pay-payments-v2) to configure locale, currency, and activate the `upReady` lifecycle.