Contents x
    Step 5: Setup pay monthly iFrame
    • 21 Jun 2023
    • 1 Minute to read
    • Dark
      Light
    Contents

    Step 5: Setup pay monthly iFrame

    • Updated on 21 Jun 2023
    • 1 Minute to read
    • Dark
      Light
    Article summary

    Integration Details

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

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

    <!-- prepare a hidden container for the Uplift application iframe -->
<div id="up-agent-pay-monthly-container" src="" style="display:none"></div>
<!-- you will attach here ^ the Uplift 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 Uplift 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 Uplift iFrame and poll status to know when the guest has completed booking.
    2. window.Uplift.Agent.deselect() is used to deselect and pause the Uplift 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 Uplift 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.

    ⚠️ Uplift has provided testing profiles to allow end-to-end testing by completing an Uplift application in the iFrame for your convenience.

    Was this article helpful?
    What's Next