How-to
PCI DSS iframe Integration
Learn how to integrate an iframe into your application to support PCI DSS compliance.Table of Contents
When you use an iframe
to process payments, you create a secure conduit between your end users and your payment provider.
In accordance with Vercel's shared responsibility model, this approach facilitates:
- Data isolation: The payment card information entered in the
iframe
is isolated from Vercel’s environment and does not pass through Vercel's managed infrastructure - Direct data transmission: Information entered in the
iframe
is sent directly to your payment processor so that Vercel never processes, stores, or has access to your end users’ payment card data - Reduced PCI DSS scope: With isolation and direct data transmission, the scope of PCI DSS compliance is reduced. This simplifies compliance efforts and enhances security
-
Select a payment provider that offers the following:
- End-to-end encryption
- Data tokenization
- Built-in fraud detection
- 3DS authentication protocol
- Compliance with latest PCI DSS requirements
-
Embed the provider’s
iframe
in your application’s payment pageThis is an example code for a payment processor's
iframe
:paymentProcessor.tsxconst PaymentProcessorIframe = (): JSX.Element => { const paymentProcessorIframeURL = `https://${PAYMENT_PROCESSOR_BASE_URL}.com/secure-payment-form`; return ( <div className="container mx-auto my-10 rounded bg-white p-5 shadow-md"> <iframe src={paymentProcessorIframeURL} frameBorder="0" width="100%" height="500px" sandbox="allow-forms allow-top-navigation allow-same-origin" className="h-auto w-full" /> </div> ); }; export default PaymentProcessorIframe;
The
sandbox
attribute and its values are often required by the payment processor:allow-forms
: Enables form submissions in theiframe
, essential for payment data entryallow-top-navigation
: Allows theiframe
to change the full page URL. This is useful for post-transaction redirectionsallow-same-origin
: Permits theiframe
to interact with resources from the hosting page's origin. This is important for functionality but slightly reduces isolation
Last updated on August 12, 2024
Was this helpful?