Google Pay inside sandboxed iframe for PCI DSS v4 compliance

If you are developing or maintaining a checkout page you might come across PCI DSS v4 which includes the following requirement under 6.4.3:

^{All payment page scripts that are loaded and executed in the consumer’s browser are managed as follows:
– A method is implemented to confirm that each script is authorized.
– A method is implemented to assure the integrity of each script.
– An inventory of all scripts is maintained with written business or technical justification as to why each is necessary.}

One way to comply with this requirement is to use a technique like Subresource Integrity (SRI). However, the Google Pay JavaScript (pay.js) build and release process does not allow for a long-lived, stable hash required by techniques like SRI.

Using a sandboxed iframe

Using a sandboxed iframe satisfies any concerns with compliance since scripts within the iFrame will not have access to the parent DOM. See the following illustration for an example:

<iframe
  src="https://cdn.somewhereelse.com"
  allow="payment"
  sandbox="allow-scripts allow-popups allow-same-origin allow-forms">
</iframe>

HTML

In this case the domain “cdn.somewhereelse.com” would load Google Pay’s pay.js JavaScript file. After a successful transaction, the inner iframe can communicate with the parent page through mechanisms like window.postMessage() if needed.

In order for Google Pay to work in all browsers we need the following 4 sandbox attribute values in addition to allow=”payment”:

To allow the iframe to execute scripts (pay.js as an example)

Allows the embedded page to create ‘child browsing contexts’. In practice, this flag enables the embedded iframe to open new tabs and windows when the user clicks a link.

If not set, fails on various occasions for browsers. If set, the iframe has access to the parents storage and cookies.

Allows forms such as the Google Pay login to submit the data.

See this test page to see the various iframe sandbox values in action.

Shopify successfully certified for PCI DSS v4

Google Pay partnered with Shopify to implement the above solution. Shopify was able to successfully pass the PCI DSS v4 audit by using a sandboxed iframe to display the Google Pay button. Here is what Shopify has to say:

We’ve built Shopify Checkout in such a way that Google Pay code executes in a secure sandboxed environment, allowing us to maintain the integrity of our checkout and comply with PCI DSS V4 requirements.

–

^{Ilya Grigorik, Distinguished Engineer at Shopify}

For more information on how Shopify built their checkout solution using sandboxed iframes, their “Powering Shopify’s High-Performance, PCI DSS v4 Compliant Checkout with Sandboxing” blog post has the insights.

Conclusion

Wrapping your Google Pay integration in a sandboxed iframe can help you to comply with PCI DSS v4 requirements. For more assistance with your implementation, sign in to the Google Pay & Wallet Console to create a support ticket. In addition, you can join the developer community in the #payments channel on Discord.

Follow @GooglePayDevs on X for future updates. If you have questions, tag @GooglePayDevs and include #AskGooglePayDevs in your tweets.