---
title: "Step 5: Setup Flex Pay iFrame"
slug: "step-5-setup-flex-pay-iframe"
updated: 2026-07-22T07:10:00Z
published: 2026-07-22T07:10:00Z
canonical: "developer.upgrade.com/step-5-setup-flex-pay-iframe"
---
> ## 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 5: Setup Flex Pay iFrame
## Overview
⚠️ Steps 4-6 are exclusive to **payment pages**. If you are building a non-payment page, skip to the [Enable User Interface Section](https://uplift-docs.document360.io/docs/from-pricing-and-information-modal-v2) to configure your `<up-from-pricing>` components.
The **Pay Monthly iFrame** is Flex Pay's fully embedded application that lets customers apply for monthly financing without leaving your site. One hidden `<div>`, two SDK methods, and you are done.
📘 The Flex Pay Pay Monthly Selector is an embeddable HTML element that allows users to select Flex Pay as their payment method. The iFrame described below is usually placed under the Pay Monthly Selectors. See [Pay Monthly Selectors](https://uplift-docs.document360.io/docs/pay-monthly-selectors-v2) for details.
## Integration Details
Add a hidden container element where the iFrame will be injected:
```
```
⚠ **Avoid** nesting this container inside another iFrame. The Flex Pay iFrame must be a direct child of your page.
⚠️ Important considerations:
1. The container id (`up-pay-monthly-container`) must match the `container` value passed to `init` in [Step 2](https://uplift-docs.document360.io/docs/step-2-initialize-flex-pay-payments-v2).
2. Set the container's viewport height to maximum - the iFrame adjusts to fit the available space.
3. Ensure a minimum container width of **360px** to avoid rendering issues.
### Select and Deselect
The iFrame starts in a hidden, paused state. The SDK provides two methods to control it:
**1. Select Pay Monthly** - `window.Uplift.Payments.select()`
Call this when the customer selects Flex Pay as their payment method. It resumes the iFrame, but you handle the show/hide of the container element (`#up-pay-monthly-container`) yourself.
Also use `select()` on navigation when a customer returns to the payment page after previously choosing Flex Pay.
**2. Deselect Pay Monthly** - `window.Uplift.Payments.deselect()`
⚠️ Only call `deselect()` if Flex Pay was **previously selected**. Do not call it when switching between non-Flex Pay methods (e.g. Credit to Debit).
Call this when the customer switches away from Flex Pay. Remember to hide the container element every time you deselect.
We recommend defaulting to an alternative payment option. If you want Flex Pay pre-selected, call `window.Uplift.Payments.select()` on load to validate availability.
📘 `select()` and `deselect()` are independent of `window.Uplift.Payments.load(orderInfo)`. Do not call `load` as part of select/deselect operations.
⚠️ Review the [Purchase Button](https://uplift-docs.document360.io/docs/purchase-button) page for the expected button behavior during the Flex Pay flow.
### From Pricing on Payment Pages
If your payment page also includes `<up-from-pricing>` components (for example, inside a Pay Monthly selector or near the order summary), they work alongside the iFrame without any extra configuration. Both share the same internal bridge and order context established by `load(orderInfo)` in Step 3.
**Step-by-step Validation Guide (Recommended)**
1. Add the hidden container to your page:
```
```
1. **Test with an unavailable offer** to see the fallback behavior:
1. Confirm `orderInfo.order_amount` is `1000` ($10.00) from [Step 4 testing](https://uplift-docs.document360.io/docs/step-4-define-callback-handler-v2).
2. Refresh the page.
3. In the console, run `window.Uplift.Payments.select()` and unhide the container. The iFrame should show a non-qualifying message:
1. **Test with an available offer** to see the full application flow:
1. Update `orderInfo.order_amount` to `70000` ($700.00).
2. Add a console log to the `TOKEN_AVAILABLE` handler:
```
TOKEN_AVAILABLE:
function(){
console.log("Your testing profile is correct. There is a token available!");
}
```
1. Refresh the page.
2. Run `window.Uplift.Payments.select()` in the console and unhide the container. You should see the Flex Pay application:
3. Complete a test application using the [provided testing profiles](https://uplift-docs.document360.io/docs/testing-details). Follow the approved outcome flow:
**Note:** The 5-digit verification code is included in the testing profiles.
**Note:** The "Complete Booking" text in the iFrame will reflect the actual button text on your site.
⚠️ Review the [Purchase Button](https://uplift-docs.document360.io/docs/purchase-button) page for the expected behavior.
⚠️ `billing_contact` can be used on payment pages to pre-fill information in the Flex Pay iFrame. While not required for most verticals (except Retail), it is highly recommended to improve the customer experience.
4. After completing the application, the `TOKEN_AVAILABLE` callback should fire. Check the console:
Continue to [Step 6: Receive Payment](https://uplift-docs.document360.io/docs/step-6-receive-payment-v2) to retrieve and process the Flex Pay virtual card.