Contents x
    Step 5: Setup pay monthly iFrame
    • 28 Apr 2025
    • 1 Minute to read
    • Dark
      Light
    Contents

    Step 5: Setup pay monthly iFrame

    • Updated on 28 Apr 2025
    • 1 Minute to read
    • Dark
      Light
    Article summary

    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.
    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 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 to allow end-to-end testing by completing a Flex Pay application in the iFrame for your convenience.

    Was this article helpful?
    What's Next