@paypal/checkout-components 5.0.434 → 5.0.436-alpha-46cb544.0

package/package.json

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

package/src/zoid/buttons/component.jsx

@@ -239,6 +239,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
       return {
         iframe: {
           allowpaymentrequest: "allowpaymentrequest",
+          allow: "payment",
           scrolling: "no",
           title: `${FUNDING_BRAND_LABEL.PAYPAL}${fundingSource}`,
           role: "presentation",

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

@@ -0,0 +1,76 @@
+/* @flow */
+
+import { describe, expect, it, vi } from "vitest";
+import { FUNDING_BRAND_LABEL } from "@paypal/sdk-constants/src";
+
+import { getButtonsComponent } from "./component";
+
+// component.jsx reads the bare global __ENV__ (not build-time inlined like
+// __PAYPAL_CHECKOUT__), so it must be defined before getButtonsComponent() runs.
+window.__ENV__ = "test";
+
+// Capture the config object component.jsx passes to zoid's create() so we can
+// exercise the real (un-exported) attributes() logic instead of re-implementing it.
+const { createMock } = vi.hoisted(() => ({
+  createMock: vi.fn((options) => options),
+}));
+
+vi.mock("@krakenjs/zoid/src", () => ({
+  create: createMock,
+  EVENT: { PRERENDERED: "prerendered" },
+}));
+
+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/),
+  getEnv: vi.fn(() => "test"),
+}));
+
+vi.mock("./util", async (importOriginal) => ({
+  ...(await importOriginal()),
+  getButtonExperiments: vi.fn(() => ({})),
+}));
+
+describe("getButtonsComponent iframe title", () => {
+  it("uses the plain PayPal label when no funding source is set", () => {
+    getButtonsComponent();
+    const { attributes } = createMock.mock.calls[0][0];
+
+    expect(attributes({ props: {} }).iframe.title).toBe(
+      FUNDING_BRAND_LABEL.PAYPAL,
+    );
+  });
+
+  it("appends the funding source to the label when one is set", () => {
+    getButtonsComponent();
+    const { attributes } = createMock.mock.calls[0][0];
+
+    expect(attributes({ props: { fundingSource: "venmo" } }).iframe.title).toBe(
+      `${FUNDING_BRAND_LABEL.PAYPAL}-venmo`,
+    );
+  });
+});
+
+describe("getButtonsComponent iframe payment permissions policy", () => {
+  it("delegates the payment permissions policy to the buttons iframe", () => {
+    getButtonsComponent();
+    const { attributes } = createMock.mock.calls[0][0];
+
+    expect(attributes({ props: {} }).iframe.allow).toBe("payment");
+  });
+
+  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");
+  });
+});

package/src/zoid/checkout/component.jsx

@@ -97,6 +97,9 @@ 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).
+          allow: "payment",
         },
       },
 

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

@@ -0,0 +1,69 @@
+/* @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", () => {
+    getCheckoutComponent();
+    const { attributes } = createMock.mock.calls[0][0];
+
+    expect(attributes.iframe.allow).toBe("payment");
+  });
+
+  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");
+  });
+
+  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");
+  });
+});