If you're an online merchant or e-commerce provider by now you should know that using an iFrame based payment form is the most secure and reliable way to minimize your PCI compliance burden. With PCI DSS 4.0 coming in 2024, most payment gateways and payment processors have iFrame-based payment forms available for use.
However, just because your gateway offers a payment form that has "iFrame" somewhere in the description does not mean it fulfills the scope of the PCI guidelines, nor does it mean it's the right choice for your business.
Because Spreedly integrates to over a hundred separate payment gateways, we see a lot of payment form implementations and can offer a unique perspective for merchants choosing the right iFrame payment form.Before we dive in, keep in mind this is mainly a cautionary tale meant to reinforce that you, the merchant, are responsible for choosing the tools that adhere to your stated level of PCI certification. Just because you use a gateway, and that gateway provides an iFrame payment form, doesn't mean your PCI assessor or the brands themselves will let you abdicate that decision. You're on the hook, so you need to be able to defend your position.Below we discuss choosing an iFrame payment form across three different axes, starting with the most obvious adherence to the PCI specification.
Understanding iFrame for Payment Gateways
An iFrame, short for Inline Frame, is a versatile tool in the world of online payments, that offers a blend of user experience and security. It functions as a window within your website, allowing you to embed an external web component - in this case, a payment form from a service provider. For e-commerce sites, this means you can provide a seamless checkout process by embedding a payment form directly on your site, while the actual processing of sensitive payment information like credit card numbers and CVV codes happens securely off-site. This method not only maintains the aesthetic continuity of your website but also upholds critical security standards. While it helps in aligning with PCI DSS guidelines by ensuring that sensitive data is handled by PCI-compliant providers, the primary advantage lies in its ability to offer a streamlined, integrated payment experience for customers without compromising on data security.
PCI DSS 4.0 iFrame Compliance
Navigating PCI compliance is a crucial task for all online merchants. With the advent of PCI DSS 4.0, introduced in March 2022, the complexity has increased, but so has the clarity on several fronts. This latest standard brings more specific guidelines, addressing the evolving security challenges and technological advancements in the payment card industry.
Under PCI DSS 4.0, it is imperative for online merchants using iFrame payment forms to ensure that all payment content, including the form fields for credit card numbers and CVV, any associated JavaScript libraries, and the submission process of payment data, are fully compliant. This compliance means that these elements must originate from and return to a PCI DSS 4.0 compliant service provider.
One of the key updates in PCI DSS 4.0 is the emphasis on protecting cardholder data with advanced technological controls and maintaining process maturity. For iFrame implementations, this translates to a heightened focus on ensuring that the payment forms and related scripts are not only secure but also implemented with a clear understanding of the latest compliance requirements.
Ensuring compliance might appear straightforward, but due to the layers of abstraction that can exist between your usage of the provider's client libraries and their actual in-browser representation, it's crucial to verify that your payment forms adhere strictly to these updated standards. This vigilance is not just about meeting a regulatory requirement; it’s about safeguarding your business and customers against increasingly sophisticated threats in the digital payment space.
Is Your iFrame Form Compliant?
Here's an easy way to tell if your provider's iFrame form is adhering to this aspect of the PCI guidance.
1. In your browser, navigate to a page that utilizes the provider's iFrame payment form (this could be a demo site, or a known customer).
2. Using your browser's developer tools, inspect the credit card number field.
3. In the rendered document view that comes up in your browsers' developer tools, look to see if the credit card number HTML form element (usually an input field) is rendered within an iFrame (e.g. there's an iFrame anywhere in its parent hierarchy). This is what it looks like when the field is not contained within an iFrame, meaning that sensitive field is not served directly from your provider and you are exposed to additional PCI compliance burden (taken from a production site using a popular gateway's payment form):
By contrast, this is what it looks like when a PCI-sensitive field like the credit card number is served directly from the payment provider within an iFrame:
This might seem like an arcane technical detail but don't dismiss it! It has a direct effect on your ability to self-assess using the 4 page SAQ A vs. the 40 page SAQ A-EP and it is your, not your payment gateways, responsibility to make the final PCI determination.
Does Your iFrame Enable Brand Continuity?
Unstable payment forms that lack continuity not only hurt your conversion rate, they also have a negative effect on your brand’s customer perception. Without continuity you run the risk of decreasing your brand’s reputation.As an online merchant, store, or e-commerce brand, it is your responsibility to craft the best experience for your users. Though this might take more time than just embedding your current payment provider's stock form on your site, the fact is that it's a commercially justified effort. Not only will your users have a delightful checkout experience, you will walk away with more money in your pocket from the non-trivial increase in checkout rates.Things to look for in an iFrame payment form are the ability to customize both the look and feel of the form as well as the structure of the form itself. This often manifests as the ability to position the credit card number and set custom CSS properties on these fields, even though they live inside your provider's iFrame. While a more complex implementation for the merchant, this results in better checkout rates for online merchants and better brand experience for the customers.
Does Your Gateway Provide Documentation?
Old-school payment companies tend to be cut of a different cloth than modern technology or developer tooling companies. Large institutions can be secretive and protective of their technical documentation, which can meaningfully delay your integration effort. Thankfully, this divide is closing, but you should accept nothing less than publicly available integration guides, technical documentation, and self-service test credentials.Having documentation is very different from having good documentation. Your provider's developer documentation should be clearly organized both by purpose (mobile payments, etc) and product (iFrame form, etc). Additionally, the API documentation should be very clearly separated from the general guides. Guides are good for walking developers new to the toolset through the features and tend to be prose-oriented. API docs are good for when you know what you’re looking for and need to see the raw technical details.
Evaluating Your iFrame Options
If your payment gateway provides a really clean iFrame payment form that adheres to all the points raised here, then you should be in good shape! However, chances are if you're using a gateway outside of the top 3-5 developer-oriented gateways, there could be room for improvement. Switching payment gateways is always an option, but there are too many business reasons to keep your existing processor.
That's where Spreedly comes into play. Spreedly will help modernize your antiquated gateway. Spreedly's tooling, built by developers for developers as part of a modern payment stack, lets you integrate with the payment gateway of your choice so you don’t have to maintain PCI compliance, brand continuity, and have access to straightforward documentation.
Reach out to Spreedly today to ensure that your iFrame is PCI compliant.
.svg){kind=icon}
.svg)
.png)
.png)
