Fenced-Frame GPay button demo:

Fenced frame area:

Fenced Frame is unsupported. To support this demo, please follow the instructions below.

Html source code:

<fencedframe src="https://maxlg-big-query-project.ue.r.appspot.com/fencedframe.html"></fencedframe>

Note that the card number can show up when the top level site is allowlisted in this file.

Github:

Server & frame page: https://github.com/maxlgu/fencedframe-gpay-demo-server
Merchant page: https://github.com/maxlgu/maxlgu.github.io/tree/master/pr/fencedframe

Instructions:

Ensure CL has been merged, or patch it to your local Chrome build.
Enable chrome://flags/#enable-fenced-frames with "Enable multiple page architecture"
Enable chrome://flags/#enable-fenced-frames-unpartitioned-cookie-access
Enable chrome://flags/#partitioned-cookies
Visit Chrome settings, block 3rd party cookie.

Expectations:

When 3rd party cookie is blocked, the real GPay button no longer shows the card info, but the prototype GPay button is still able to show the card info.

Video demo:

References:

Explainer: Fenced frame modes
Use Fenced Frame read-only mode for payment buttons