---
title: "Step 5: Setup pay monthly iFrame"
slug: "step-5-setup-pay-monthly-iframe-1"
updated: 2025-04-28T19:46:52Z
published: 2025-04-28T19:46:52Z
canonical: "developer.upgrade.com/step-5-setup-pay-monthly-iframe-1"
---

> ## 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 pay monthly iFrame

### Integration Details

**Pay Monthly iFrame** refers to Flex Pay's fully embedded HTML modal that allows the user to apply for Flex Pay’s monthly financing without leaving your agent tool!

To setup the iFrame, prepare a hidden DOM element that can hold the Flex Pay application iFrame as shown below.

```
<!-- prepare a hidden container for the Flex Pay application iframe -->
<div id="up-agent-pay-monthly-container" src="" style="display:none"></div>
<!-- you will attach here ^ the Flex Pay iframe if Pay monthly is available -->
```

          
          

⚠️ There are some important considerations when setting up this element:

1. The iFrame div unique id is passed into the Flex Pay initialization parameter `payMonthlyContainer` referenced earlier in [step 2](/v1/docs/step-2-initialize-uplift-agent-connect).
2. Avoid encapsulating the iFrame inside another iFrame.
3. Ensure that the container’s height of the viewport is set to maximum since our library is trying to fit it within the viewport.

When the iFrame is loaded on the page, it defaults to a hidden and paused state preventing user interaction. The library defines the corresponding methods to select and deselect the iFrame:

1. `window.Uplift.Agent.select()`  when called will resume the Flex Pay iFrame and **poll status** to know when the guest has completed booking.
2. `window.Uplift.Agent.deselect()` is used to deselect and pause the Flex Pay iFrame and **stop polling** the status of the application with the agent unable to receive the latest status of the booking.

          
          

⚠️ Besides pausing and polling status, the developer is responsible to **show or hide** the Pay Monthly iFrame using the **display** attribute in the HTML.

          
          

⚠️ Note that it is necessary to present the [Marketing Banner HTML](https://docs.uplift.com/docs/marketing-banner) at the same time as the Pay Monthly iFrame, otherwise it will result in an error.

We recommend to select an alternative payment option as default, however if you desire to preserve the previous selection or use Flex Pay payment by default, validate by calling `window.Uplift.Agent.select()` while Pay Monthly is pre-selected - otherwise the booking flow will not progress for the Agent when the guest has completed their booking.

          
          

⚠️ Flex Pay has [provided testing profiles](https://docs.uplift.com/docs/testing-details) to allow end-to-end testing by completing a Flex Pay application in the iFrame for your convenience.