@paypal/checkout-components 5.0.436 → 5.0.437-alpha-4d75517.0

package/package.json

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

package/src/zoid/buttons/component.jsx

@@ -116,7 +116,7 @@ export type ButtonsComponent = ZoidComponent<
   ButtonProps,
   void,
   void,
-  ButtonExtensions,
+  ButtonExtensions
 >;
 
 // $FlowIssue
@@ -195,7 +195,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         try {
           const cplPhases = prepareInstrumentationPayload(
             buttonSessionID,
-            "buttons",
+            "buttons"
           );
           const cplLatencyMetrics = {
             [FPTI_KEY.STATE]: "CPL_LATENCY_METRICS",
@@ -239,6 +239,11 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
       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",
@@ -262,11 +267,11 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         supportsVenmoPopups = supportsVenmoPopupsUtil(
           buttonExperiments,
           userAgentSupportsPopups(),
-          getUserAgent(),
+          getUserAgent()
         ),
         supportedNativeVenmoBrowser = isSupportedNativeVenmoBrowser(
           buttonExperiments,
-          getUserAgent(),
+          getUserAgent()
         ),
         experiment = buttonExperiments,
         createBillingAgreement,
@@ -380,7 +385,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
           ({ props: { buttonSessionID } }) =>
           ({ close }) => {
             const overlay = document.getElementsByName(
-              `paypal-overlay-${buttonSessionID}`,
+              `paypal-overlay-${buttonSessionID}`
             )?.[0];
 
             if (overlay) {
@@ -456,7 +461,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
           () => {
             window.addEventListener(
               "visibilitychange",
-              props.visibilityChangeHandler,
+              props.visibilityChangeHandler
             );
           },
       },
@@ -469,7 +474,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
           () => {
             window.removeEventListener(
               "visibilitychange",
-              props.visibilityChangeHandler,
+              props.visibilityChangeHandler
             );
           },
       },
@@ -956,7 +961,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
             // $FlowFixMe
             value,
             layout,
-            fundingSources,
+            fundingSources
           );
         },
       },
@@ -1041,7 +1046,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
             const modalInstance = await getModal(
               clientID,
               merchantID,
-              buttonSessionID,
+              buttonSessionID
             );
             return modalInstance?.show({
               amount,
@@ -1137,8 +1142,8 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: ({ props }) => {
           return Boolean(
             props.onShippingChange ||
-            props.onShippingAddressChange ||
-            props.onShippingOptionsChange,
+              props.onShippingAddressChange ||
+              props.onShippingOptionsChange
           );
         },
       },
@@ -1372,7 +1377,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: ({ props }) => {
           return isSupportedNativeVenmoBrowser(
             props.experiment,
-            props.userAgent,
+            props.userAgent
           );
         },
         queryParam: true,
@@ -1393,7 +1398,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
           return supportsVenmoPopupsUtil(
             props.experiment,
             userAgentSupportsPopups(),
-            props.userAgent,
+            props.userAgent
           );
         },
         queryParam: true,

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

@@ -29,6 +29,7 @@ vi.mock("@paypal/sdk-client/src", async (importOriginal) => ({
     error: vi.fn(),
   })),
   getPayPalDomainRegex: vi.fn(() => /paypal\.com/),
+  getPayPalDomain: vi.fn(() => "https://www.paypal.com"),
   getEnv: vi.fn(() => "test"),
 }));
 
@@ -43,7 +44,7 @@ describe("getButtonsComponent iframe title", () => {
     const { attributes } = createMock.mock.calls[0][0];
 
     expect(attributes({ props: {} }).iframe.title).toBe(
-      FUNDING_BRAND_LABEL.PAYPAL,
+      FUNDING_BRAND_LABEL.PAYPAL
     );
   });
 
@@ -52,7 +53,43 @@ describe("getButtonsComponent iframe title", () => {
     const { attributes } = createMock.mock.calls[0][0];
 
     expect(attributes({ props: { fundingSource: "venmo" } }).iframe.title).toBe(
-      `${FUNDING_BRAND_LABEL.PAYPAL}-venmo`,
+      `${FUNDING_BRAND_LABEL.PAYPAL}-venmo`
     );
   });
 });
+
+describe("getButtonsComponent iframe payment permissions policy", () => {
+  it("delegates the payment permissions policy to the buttons iframe's actual origin", () => {
+    getButtonsComponent();
+    const { attributes } = createMock.mock.calls[0][0];
+
+    expect(attributes({ props: {} }).iframe.allow).toBe(
+      "payment https://www.paypal.com"
+    );
+  });
+
+  it("keeps the legacy allowpaymentrequest attribute alongside the modern allow attribute", () => {
+    getButtonsComponent();
+    const { attributes } = createMock.mock.calls[0][0];
+
+    const iframeAttrs = attributes({ props: {} }).iframe;
+    expect(iframeAttrs.allowpaymentrequest).toBe("allowpaymentrequest");
+    expect(iframeAttrs.allow).toBe("payment https://www.paypal.com");
+  });
+
+  it("names the origin explicitly rather than relying on the 'src' keyword", () => {
+    // zoid's openFrame() never sets this iframe's `src` attribute — it creates
+    // the iframe bare, then navigates it later via proxyWin.setLocation(), which
+    // uses window.location/form-POST, not the `src` attribute. Permissions
+    // Policy's 'src' keyword resolves by reading that attribute, so a bare
+    // `allow="payment"` (== `payment 'src'`) can never grant the feature here.
+    // Regression test for the retest failure after the original 'payment'-only
+    // fix (DTINAPPXO-5124).
+    getButtonsComponent();
+    const { attributes } = createMock.mock.calls[0][0];
+
+    const iframeAttrs = attributes({ props: {} }).iframe;
+    expect(iframeAttrs.allow).not.toBe("payment");
+    expect(iframeAttrs.allow).toContain("https://www.paypal.com");
+  });
+});

package/src/zoid/checkout/component.jsx

@@ -68,13 +68,13 @@ function spyOnWindowNameAssignment(): void {
             new Error(
               `window.name was overwritten: ${String(value).slice(
                 0,
-                WINDOW_NAME_LOG_TRUNCATION_LENGTH,
-              )}`,
-            ),
+                WINDOW_NAME_LOG_TRUNCATION_LENGTH
+              )}`
+            )
           ),
           originalValue: String(currentWindowName).slice(
             0,
-            WINDOW_NAME_LOG_TRUNCATION_LENGTH,
+            WINDOW_NAME_LOG_TRUNCATION_LENGTH
           ),
         });
         currentWindowName = value;
@@ -97,6 +97,13 @@ export function getCheckoutComponent(): CheckoutComponent {
       attributes: {
         iframe: {
           scrolling: "yes",
+          // Delegates the Permissions Policy 'payment' feature so PaymentRequest
+          // works when this iframe falls back to CONTEXT.IFRAME (supportsPopups() false).
+          // 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. Name the origin explicitly instead.
+          allow: `payment ${getPayPalDomain()}`,
         },
       },
 
@@ -343,8 +350,8 @@ export function getCheckoutComponent(): CheckoutComponent {
           value: ({ props }) => {
             return Boolean(
               props.onShippingChange ||
-              props.onShippingAddressChange ||
-              props.onShippingOptionsChange,
+                props.onShippingAddressChange ||
+                props.onShippingOptionsChange
             );
           },
         },

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

@@ -0,0 +1,84 @@
+/* @flow */
+
+import { describe, expect, it, vi } from "vitest";
+import { supportsPopups } from "@krakenjs/belter/src";
+
+import { getCheckoutComponent } from "./component";
+
+// Capture the config object component.jsx passes to zoid's create() so we can
+// assert on the real (un-exported) attributes.iframe config, mirroring the
+// pattern used in ../buttons/component.test.js.
+const { createMock } = vi.hoisted(() => ({
+  createMock: vi.fn((options) => ({ ...options, isChild: () => false })),
+}));
+
+vi.mock("@krakenjs/zoid/src", () => ({
+  create: createMock,
+  CONTEXT: { POPUP: "popup", IFRAME: "iframe" },
+  EVENT: { FOCUS: "focus" },
+}));
+
+vi.mock("@krakenjs/belter/src", async (importOriginal) => ({
+  ...(await importOriginal()),
+  supportsPopups: vi.fn(() => true),
+}));
+
+vi.mock("@paypal/sdk-client/src", async (importOriginal) => ({
+  ...(await importOriginal()),
+  getLogger: vi.fn(() => ({
+    metricCounter: vi.fn(),
+    track: vi.fn(),
+    info: vi.fn(),
+    error: vi.fn(),
+  })),
+  getPayPalDomainRegex: vi.fn(() => /paypal\.com/),
+  getPayPalDomain: vi.fn(() => "https://www.paypal.com"),
+}));
+
+describe("getCheckoutComponent iframe payment permissions policy", () => {
+  it("delegates the payment permissions policy to the checkout iframe's actual origin", () => {
+    getCheckoutComponent();
+    const { attributes } = createMock.mock.calls[0][0];
+
+    expect(attributes.iframe.allow).toBe("payment https://www.paypal.com");
+  });
+
+  it("keeps the existing scrolling attribute alongside the new allow attribute", () => {
+    getCheckoutComponent();
+    const { attributes } = createMock.mock.calls[0][0];
+
+    expect(attributes.iframe.scrolling).toBe("yes");
+    expect(attributes.iframe.allow).toBe("payment https://www.paypal.com");
+  });
+
+  it("still delegates the payment permissions policy when the component falls back to CONTEXT.IFRAME", async () => {
+    // getCheckoutComponent() is inline-memoized, so the earlier tests' calls
+    // never re-invoke create(). Reset the module registry to get a fresh,
+    // un-memoized component that actually re-evaluates supportsPopups().
+    vi.mocked(supportsPopups).mockReturnValueOnce(false);
+    vi.resetModules();
+    const { getCheckoutComponent: getFreshCheckoutComponent } = await import(
+      "./component"
+    );
+
+    getFreshCheckoutComponent();
+
+    const { attributes } = createMock.mock.calls.at(-1)[0];
+    expect(attributes.iframe.allow).toBe("payment https://www.paypal.com");
+  });
+
+  it("names the origin explicitly rather than relying on the 'src' keyword", () => {
+    // zoid's openFrame() never sets this iframe's `src` attribute — it creates
+    // the iframe bare, then navigates it later via proxyWin.setLocation(), which
+    // uses window.location/form-POST, not the `src` attribute. Permissions
+    // Policy's 'src' keyword resolves by reading that attribute, so a bare
+    // `allow="payment"` (== `payment 'src'`) can never grant the feature here.
+    // Regression test for the retest failure after the original 'payment'-only
+    // fix (DTINAPPXO-5124).
+    getCheckoutComponent();
+    const { attributes } = createMock.mock.calls[0][0];
+
+    expect(attributes.iframe.allow).not.toBe("payment");
+    expect(attributes.iframe.allow).toContain("https://www.paypal.com");
+  });
+});