Iframe Swapping and Hosted Payment Pages
Merchants integrating payments directly into their website or application have several options but often use iframe (inline frame) payment gateway pages to capture payment data.
Iframe swapping is a practice merchants use to collect information and route data based on the specific iframe that captured it. Merchants swap iframes on the front end based on criteria like the user's location, IP address, or payment type. Then, the iframe collects the information and routes it accordingly based on the merchant's best interest (cost, success rate, etc.)
These iframe pages are often embedded directly into a merchant’s website or application and share aspects of its visual design, but they are actually controlled and hosted by the gateway provider.
Iframed forms offer significant benefits to merchants, including a quick time to go live, but drawbacks include limited control and design inconsistencies. Some providers offer the ability to customize the gateway's look, feel, colors, and branding, but this often has limitations. For some merchants that want a quick go-live and simple design, this can be seen as a benefit.
In other cases, this can be seen as a drawback. Iframe forms will likely fall short for merchants who want a seamless checkout experience that perfectly matches every pixel of the brand’s digital assets.
What does iframe swapping mean?
Iframe swapping is used in scenarios where merchants have agreements with multiple payment service providers and programmatically select the correct iframe for each transaction. This process dynamically replaces the form on the page without the user being aware of the selection.
Depending on the provider, the checkout flows are broken into three broad categories:
- On-site payment gateways give merchants significant control over the payment experience. But this flexibility means the merchant must engineer their own checkout flows.
- Hosted payment gateways (or redirects) send customers to a third-party site for checkout and payment processing. Merchants using PayPal checkout are a common example. While generally simple to implement, the merchant has very little control over the payment experience.
- On-site checkout and off-site payments allow customers to check out on a merchant’s website while payment processing takes place at the gateway’s back end, giving the merchant partial control over the experience.
Payment gateway iframes could technically be leveraged in any one of the solutions, depending on how the gateway’s technology is built. Out-of-the-box solutions often fall in the final two categories, while on-site gateways require more development to go live.
Iframe forms reduce the development needed to go live. For all intents and purposes, the bare minimum requirement for a merchant is simply a web page with an iframe area that displays the form—anything beyond that is likely completed by using drag-and-drop configuration on the gateway’s administration interface, and may require no code.
Hosted Payment Pages
Once a merchant has outgrown the initial out-of-the-box payment gateway solution, self-hosting the checkout flow and implementing a solution like Basis Theory Elements is the next step toward payment optimization.
Hosted payment pages (or hosted payment gateways) provide businesses with secure checkout experiences. These pages are hosted by a third-party and can take several forms. Each comes with its own set of integration requirements.
- Iframe pages offered through gateways are often embedded directly into a merchant’s website or application but are controlled and hosted entirely through a gateway provider. iFrame pages offer significant benefits to merchants, including a quick time to go live, and they offer slightly more control than webpage payment pages.
- Webpages redirect customers to a secure external website hosted by the gateway to complete the transaction. While checkout can happen externally through a link, webpages offer the least amount of control for merchants of the hosted payment page types as the experience is completely external.
- Pop-ups are payment pages that appear on the merchant’s website to complete the checkout process. While customers can stay on the merchant’s website to complete checkout, pop-up blockers can make this a less desirable option.
Are iframe payment solutions safe to use?
If the selected gateway provider is reputable and reliable, the merchant would face minimal risk, as the merchant wouldn’t be handling any of the payments directly. The gateway would handle the risks, and the processing would happen entirely through the gateway on an embedded screen on the merchant’s website.
For a more agnostic approach not tied to a specific PSP or gateway, merchants can leverage the React Elements SDK form with Basis Theory, which will render a secure iFrame for capturing the data and storing it in a secure vault.
Elements offer a fast, dynamic, and secure way to seamlessly collect information within applications without exposing any systems to the underlying sensitive data. Elements are completely customizable, giving merchants complete control over the user experience while keeping systems outside PCI compliance scope.
Similar to the earlier point, a merchant needs little to achieve and maintain PCI compliance because the sensitive data never touches the merchant's servers. If the gateway offers the payment flow in a PCI-compliant manner, the merchant can simply embed the iframe and offer a compliant flow.
Therefore, iframe payment flows can significantly reduce the time and effort required for PCI compliance.
Contact our payment experts for a PCI-compliant solution to collect card data, store it, and leverage it as if it were in your own system.
