---
title: "Step 2: Initialize Flex Pay payments"
slug: "step-2-initialize-flex-pay-payments"
updated: 2026-03-26T22:04:17Z
published: 2026-03-26T22:04:17Z
canonical: "developer.upgrade.com/step-2-initialize-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 2: Initialize Flex Pay payments

## Overview

Initialization tells the SDK what language, currency, and page context to use. You configure this **once per page** and every Flex Pay component — including all `<up-from-pricing>` instances — inherits the settings automatically.

This step resolves the `UPREADY? undefined` message you saw in Step 1.

## What You Configure vs. What We Handle

| You set | We handle |
| --- | --- |
| `locale` (e.g. `en-US`, `fr-CA`) | Localized wording and currency formatting across all components |
| `currency` (e.g. `USD`, `CAD`) | Consistent currency display and offer calculations |
| `checkout` (`true` or `false`) | Payment vs. non-payment messaging context |
| `channel` (e.g. `desktop`) | Device-appropriate rendering |
| `container` (payment pages only) | iFrame placement and lifecycle |
| `onChange` (payment pages only) | Status callback routing |

Once `init` runs, every `<up-from-pricing>` component on the page automatically receives locale, currency, branding, and formatting context through the internal bridge. No per-component configuration is needed for these values.

## Integration Details

#### A) Define the Initialization Function

Create an `initPayMonthly` function with the correct settings for your page type.

⚠️ Replace `locale`, `currency`, and `channel` with values that match your website.

**Payment Page**

```
function initPayMonthly() {
  window.Uplift.Payments.init({
    locale: "en-US",       // "en-CA", "fr-CA"
    currency: "USD",       // "CAD"
    checkout: true,
    channel: "desktop",
    container: "#up-pay-monthly-container", // covered in Step 5
    onChange: myOnChangeCallback            // covered in Step 4
  });
}
```

**Non-Payment Page**

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

Initialize on every page that uses any Flex Pay component — [From Pricing](/v1/docs/from-pricing-and-information-modal), [Pre-qualification](/v1/docs/pre-qualification-tool), or [Payments](/v1/docs/step-5-setup-flex-pay-iframe). Detailed configuration references are available [here](/v1/docs/uplift-payment-initialization-key-configurations).

⚠️ Call `window.Uplift.Payments.init()` **only once** per page. Multiple calls will cause unexpected behavior.

#### B) Wire It Into the SDK Lifecycle

The SDK automatically calls `window.upReady` when `up.js` finishes loading. Define it and call `initPayMonthly` inside:

```
window.upReady = function() {
    initPayMonthly();
}
```

You only **define** `window.upReady` — never call it yourself. The SDK handles the timing.

📘 We will add more logic to `window.upReady` in the next steps (order loading, callbacks). See [Step 3](/v1/docs/step-3-send-order-details-to-flex-pay) for the complete function.

## How This Powers From Pricing

When `init` executes, the SDK sends a ready event through the internal bridge with your configuration. Every `<up-from-pricing>` component on the page receives:

- **locale** — for localized wording (e.g. "or from" vs. "ou à partir de")
- **currency** — for correct symbol, delimiter, and formatting
- **branding** — for consistent Flex Pay identity across placements

This means you set locale and currency once in `init`, and all pricing components render correctly without per-element configuration.

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

    
    

Continuing from Step 1, let's confirm initialization works on a **non-payment page**:

1. Define `window.upReady` with a console log so you can confirm it fires:

```
window.upReady = function() {
    window.console.log("up.js is calling upReady!");
    initPayMonthly();
}
```

1. Define the `initPayMonthly` function:

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

1. Refresh the page and check the console:

| What to check | Expected result |
| --- | --- |
| `UPREADY?` | `true` |
| `init` log | Key-value pairs showing your configuration |
| Errors | None |

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

1. If initialization fails (missing values, wrong format), you will see an error in the console:

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

Once you see `UPREADY? true` and the init configuration logged without errors, continue to [Step 3: Send Order Details](/v1/docs/step-3-send-order-details-to-flex-pay) to start receiving pricing offers.