Using iframes to keep card data out of your infrastructure

Ecommerce applications that handle payment card data must meet the Payment Card Industry Data Security Standard (PCI DSS). Under Vercel’s shared responsibility model, the platform is a service provider; customers are responsible for how their applications process and transmit cardholder data. The recommended way to handle payments on Vercel is to embed a payment form inside an <iframe> that is served and managed directly by your payment processor.

An iframe creates a nested browsing context, effectively loading a separate HTML document inside your page. For payments, that document is the processor’s own form. Because the iframe is a distinct document, it makes its own HTTP requests and never shares those with the parent page. This design produces three useful properties for PCI compliance:

Data isolation

Card details entered into the iframe never touch your application’s infrastructure on Vercel. The payment information is isolated from your managed environment entirely.

Direct transmission

Input submitted inside the iframe goes straight to the payment processor over the iframe document’s own network requests. Vercel never processes, stores, or gains access to the end user’s payment data.

Reduced PCI DSS scope

Since cardholder data is handled exclusively by the processor, the iframe approach narrows the compliance surface your organization must manage. That simplifies audits and improves the overall security posture of the ecommerce solution.

Building the integration

Start by choosing a payment service provider that meets several criteria: support for end-to-end encryption, data tokenization, built-in fraud detection, the 3DS authentication protocol, and compliance with the latest PCI DSS requirements.

Once you have a provider, embedding its iframe into your payment page is typically a small code change. The provider supplies the form URL; your page includes it with the appropriate sandbox attributes, which most processors require:

  • allow-forms: enables form submissions inside the iframe, which is essential for entering payment data.
  • allow-top-navigation: permits the iframe to change the full page URL, useful for post-transaction redirects.
  • allow-same-origin: allows the iframe to interact with resources from the hosting page’s origin. This is often required for functionality, though it slightly reduces isolation.

The integration itself may be simple, but maintaining security is an ongoing effort. For any organization connecting a payments processor, the PCI Security Standards Council publishes Best Practices for Securing Ecommerce, a guide worth reading regardless of whether your iframe setup is new or already in production. For details on Vercel’s own compliance status, see the Security & Compliance Measures documentation.