@paypal/checkout-components 5.0.437 → 5.0.438-alpha-b1d5950.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.437",
+  "version": "5.0.438-alpha-b1d5950.0",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/types.js

@@ -71,6 +71,7 @@ export type Experiment = {|
   isPaylaterCobrandedLabelEnabled?: boolean,
   isPaylaterCobrandedLabelRandomizationEnabled?: boolean,
   isBfcacheEnabled?: boolean,
+  isWebMCPEnabled?: boolean,
 |};
 
 export type Requires = {|

package/src/zoid/buttons/component.jsx

@@ -236,18 +236,25 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         fundingSource = `-${props.fundingSource}`;
       }
 
+      const baseIframeAttributes = {
+        allowpaymentrequest: "allowpaymentrequest",
+        // Named origin, not bare "payment": zoid never sets this iframe's `src`
+        // attribute (it navigates the frame via window.location/form-POST after
+        // creation instead), so the 'src' keyword that bare `allow="payment"`
+        // resolves to can never match the actual checkout origin.
+        allow: `payment ${getPayPalDomain()}`,
+        scrolling: "no",
+        title: `${FUNDING_BRAND_LABEL.PAYPAL}${fundingSource}`,
+        role: "presentation",
+      };
+
       return {
-        iframe: {
-          allowpaymentrequest: "allowpaymentrequest",
-          // Named origin, not bare "payment": zoid never sets this iframe's `src`
-          // attribute (it navigates the frame via window.location/form-POST after
-          // creation instead), so the 'src' keyword that bare `allow="payment"`
-          // resolves to can never match the actual checkout origin.
-          allow: `payment ${getPayPalDomain()}`,
-          scrolling: "no",
-          title: `${FUNDING_BRAND_LABEL.PAYPAL}${fundingSource}`,
-          role: "presentation",
-        },
+        iframe: props.experiment?.isWebMCPEnabled
+          ? {
+              ...baseIframeAttributes,
+              allow: `${baseIframeAttributes.allow}; tools *`,
+            }
+          : baseIframeAttributes,
       };
     },
 

package/src/zoid/buttons/component.test.js

@@ -93,3 +93,35 @@ describe("getButtonsComponent iframe payment permissions policy", () => {
     expect(iframeAttrs.allow).toContain("https://www.paypal.com");
   });
 });
+
+describe("getButtonsComponent iframe allow attribute", () => {
+  it("does not append tools when the WebMCP first-render experiment flag is absent", () => {
+    getButtonsComponent();
+    const { attributes } = createMock.mock.calls[0][0];
+
+    const { allow } = attributes({ props: {} }).iframe;
+    expect(allow).toBe("payment https://www.paypal.com");
+    expect(allow).not.toContain("tools");
+  });
+
+  it("does not append tools when the WebMCP first-render experiment flag is disabled", () => {
+    getButtonsComponent();
+    const { attributes } = createMock.mock.calls[0][0];
+
+    const { allow } = attributes({
+      props: { experiment: { isWebMCPEnabled: false } },
+    }).iframe;
+    expect(allow).toBe("payment https://www.paypal.com");
+    expect(allow).not.toContain("tools");
+  });
+
+  it("appends 'tools *' alongside the payment permission when the WebMCP first-render experiment flag is enabled", () => {
+    getButtonsComponent();
+    const { attributes } = createMock.mock.calls[0][0];
+
+    expect(
+      attributes({ props: { experiment: { isWebMCPEnabled: true } } }).iframe
+        .allow,
+    ).toBe("payment https://www.paypal.com; tools *");
+  });
+});