Browser frames — also known as iframes — have been around since Netscape introduced them in 1996. Back then, iframes were sometimes used in ways that appear wacky by modern standards, such as for the structuring of content on a web page.
As a result of practices like these, iframes have gained a negative reputation in some quarters. Some developers dismiss iframes as “the web programming equivalent of the goto statement” — a hack that you use when you have to, but not an elegant solution or a best practice to follow.
But such criticisms of iframes are not really fair. It’s true that, like any technology, they can be abused and misused. That does not mean, however, that iframes do not have legitimate uses — some of which make them the best solution to a given web programming challenge.
One ideal use case for iframes is the integration of a hosted payments page into a website. Let’s take a look at why iframes are a good solution in this scenario.
What is a hosted payment page?
A hosted payment page is any type of web page that allows a user to make a payment online.
Hosted payment pages typically have to do three main things:
- Accept payment information from a debit card, credit card or other payment method
- Pass the payment information securely to a server that processes it
- Receive and display information about the transaction to the end-user
Benefits of using an iframe for hosted payments
What do hosted payments have to do with iframes? The basic answer is that iframes provide an easy way to integrate a payment page into a website with minimal fuss and security risk on the part of the developers who are implementing the website.
More specifically, using iframes for hosted payments provides several distinct benefits for developers and end-users alike:
- It’s easy for developers to implement. Typically, they only need to include a small amount of code within their website to insert the payment page within an iframe. They simply set up the iframe; the payment provider handles the rest.
- End-users never leave the main website. Although they technically pay via a different website (the one running inside the iframe), from their perspective, they remain on the same page and site. This helps to keep users confident about the security of the payment they are issuing, since navigating to a different site could leave them concerned about whether they can trust the payment site. It also simplifies the overall payment experience.
- Iframes mitigate the risk of users navigating away from a page before payment is complete. If you move users to a new website to submit a payment, they may become confused and press the back button or otherwise navigate away from the new site. Doing so can interrupt the payment process — and it poses an especially greater challenge if the payment is already in progress. By keeping the payment within an iframe on your site, you avoid unintended navigation issues.
- You can update your website without worrying much about how the changes will impact the hosted payment page. As long as you leave the iframe in place, changes to the rest of the site are unlikely to impact payments processing.
- Iframes are flexible and easy to configure. A few lines of CSS or element property definitions suffice for defining the size, layout and other features of an iframe. You can therefore easily customize how a hosted payment page appears within your website.
- You can have the payment page time out without disrupting the overall site. This is useful in cases where a customer starts a payment but does not complete it in time. You don’t want to leave the payment page open indefinitely, because that would be a security risk. But you also don’t want your entire website to time out and shut down automatically, because that would reduce the likelihood that the customer will come back later and complete the payment. By placing the payment page inside an iframe, you can easily have just that element time out, but keep the rest of the site running and ready for the customer to use.
- Iframes make it easy to support different screen sizes and layouts, without having to worry about the specifics of the payment page content. If your iframe is not large enough to display the entire payment page at once, or your end-user’s screen is too small, the browser will automatically create scroll bars to make content visible. In this way, iframes make it easy to integrate hosted payment pages that work well with a variety of different devices and screen types.
The bottom line: Iframes provide an easy, flexible and secure way to make hosted payment pages available with minimal effort on the part of your developers — and they simplify transactions for your customers.
About the Author:
Chris Tozzi has worked as a journalist and Linux systems administrator. He has particular interests in open source, agile infrastructure and networking. He is Senior Editor of content and a DevOps Analyst at Fixate IO. His latest book, For Fun and Profit: A History of the Free and Open Source Software Revolution, was published in 2017.