Step 5: Setup pay monthly iFrame

1. As per Step 4 of the testing example, validate that your OrderInfo object’s order amount (that is orderInfo.order_amount) is 1000($10.00).
2. Refresh the page.
3. Open the console and execute window.Uplift.Payments.select() which will resume the iFrame and the user interaction. Normally, this should be done within the code, however to make this validation easier, we have used the console. Now, you should see the iFrame as shown below on your page where you inserted the HTML snippet. Make sure to unhide the iFrame container (#up-pay-monthly-container) when the select method is executed.

Note: Since the order amount is set to 1000 ($10.00), the order amount is too low as per merchant specific set up (lower than minimum eligible order amount) to qualify for a valid offer and this is what will be shown to your customer.

1. Update the OrderInfo object with a valid order amount (that will result in an offer), update orderInfo.order_amount to 70000 ($700.00).
2. Next, on a successful Uplift application, the Uplift callback handler will return with a status of TOKEN_AVAILABLE. To verify this, update the callback handler for the TOKEN_AVAILABLE status as shown below.

TOKEN_AVAILABLE:
function(){
  console.log("Your testing profile is correct. There is a token available!");
}

3. Refresh the page.
4. Open the console and execute window.Uplift.Payments.select() which will resume the iFrame and the user interaction. Normally, this should be done within the code, however to make this validation easier, we have used the console. Now same as earlier, you should see the iFrame offering Uplift financing as shown below on the page where you inserted the HTML snippet. Make sure to unhide the iFrame container (#up-pay-monthly-container) when the select method is executed.

   

5. To ensure end-to-end testing, proceed by completing an Uplift application in the iFrame using the provided testing profiles. For the following steps we will refer to an approved outcome, but feel free to test the unapproved outcome as well.

   

   Note: This 5 digit verification code is also included in the testing profiles.

   

   

   

   

   Note: In order to complete a transaction, the customer must then click the booking/purchase button on your website. The text in the screen above saying “Complete Booking” will be updated to reflect the text used on the button on your site.

   ⚠️ Please reivew the Purchase Button page for a detailed view of the expected behavior.

   ⚠️ Note that billing_contact can be used on payment pages to pre-fill information in the Uplift application iFrame. Thus, while it is not required by any vertical with the exception of Retail, it is highly recommended to improve customer experience.

6. Once you have successfully completed the Uplift application flow, a token is made available within the callback method verifying completion of flow. Thus, you should see the console message we added earlier in your browser tool’s console as shown below.