Learn how to leverage iframes for payment processing to enable PCI compliance and maintain resilient workloads.

Link to headingRole of iframes in PCI compliance

In the context of your application on Vercel, an iframe serves a specific and vital purpose for payment processing and PCI compliance.

The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.

When your application integrates an iframe for payment processing, it effectively creates a secure conduit for payment transactions. The iframe is designed to host a payment form, directly provided and managed by your chosen payment processor.

This approach is emblematic of Vercel’s shared responsibility model, which states that Vercel serves as a service provider to customers who process payment and cardholder data, and ensures the following remain true:

Link to headingData isolation

The payment card information entered by your application’s end users in the iframe is completely isolated from Vercel’s environment—at no point does the payment information touch or pass through your application’s managed infrastructure on Vercel.

Link to headingDirect data transmission

Any information entered into the iframe is transmitted directly to your payment processor. This is because the iframe acts as a separate document with its own HTTP requests, independent of those made by the parent page. Ensuring that Vercel never processes, stores, or has access to your end users’ payment card data.

Link to headingReduced PCI DSS scope

By isolating payment data from your application, and ensuring that it is handled exclusively by the payment processor, the iframe method considerably narrows the scope of PCI DSS compliance that customers subject to PCI DSS need to manage. This simplifies compliance efforts, and enhances the overall security posture of your ecommerce solution.

Link to headingImplementing iframe payment solutions

First, select a payment service provider. Select a provider that offers end-to-end encryption, data tokenization, built-in fraud detection, utilizes 3DS authentication protocol, and most importantly, is compliant with the latest PCI DSS requirements.

Begin the integration process. Embedding the provider’s iframe into your application’s payment page is usually straightforward, and should require minimal code change. Below is some basic pseudo-code for a payment processor iframe.

export function PaymentIframe() {
  return (
    <iframe
      src="https://payment-processor.com/secure-payment-form"
      width="100%"
      height="500px" 
      sandbox="allow-forms allow-top-navigation allow-same-origin"
    />
  );
};

Included, you’ll notice the sandbox attribute and with it values that are often required by the payment processor for functionality.

• allow-forms: Enables form submissions in the iframe, essential for payment data entry.

• allow-top-navigation: Allows the iframe to change the full page URL, useful for post-transaction redirections.

• allow-same-origin: Permits the iframe to interact with resources from the hosting page's origin, crucial for functionality but slightly reduces isolation.

Link to headingMaintaining PCI compliance

While the inclusion of the iframe is relatively trivial for your frontend, maintaining security and integrity, requires diligence, and often involves maintaining at least some level of PCI compliance. For any organization integrating a payments processor, the PCI Security Standards Council provides a guide to Best Practices for Securing Ecommerce, which we recommend reading. To learn more about Vercel and PCI DSS compliance, please visit our Security & Compliance Measures.